Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS architecture: How To Write Clean & Scalable Code

1,224 views

Published on

Slides by Mateusz Czajka from @netguru, originally created for a Frontownia meet-up.

Published in: Technology
  • Be the first to comment

CSS architecture: How To Write Clean & Scalable Code

  1. 1. HOWTOWRITECLEAN&SCALABLECODE CSSARCHITECTURE .mat.czajka@gmail.com /czajkovsky MateuszCzajka-seniordev@netguru.co
  2. 2. IT’SCSSWITHSUPERPOWERS USEPREPROCESSORS 0.
  3. 3. ANDBECONSISTENTABOUTIT DEFINEASTYLEGUIDE 1.
  4. 4. DEFINEASTYLEGUIDESCSSLINT .pill-box { &__icon{ display: block; border: 1px solid $primary-color; } } .pill-box { &__icon{ display: block; border: 1px solid $primary-color; } } 2 of 5 errors: SpaceBeforeBrace: Opening curly `{` should be preceded by one space, Line 38, Column 8
  5. 5. DEFINEASTYLEGUIDEHOUND + =SCSSLINT
  6. 6. THATYOUNEEDTOSUPPORT DETERMINEBROWSERS 2.
  7. 7. DETERMINEBROWSERSAUTOPREFIXER // in code a { display: flex; } // output a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
  8. 8. INTOSMALLPIECES DIVIDEYOURCODE 3.
  9. 9. ASMANYASITMAKESSENSE USEVARIABLES 4.
  10. 10. USEVARIABLESBASICS // colors $primary-color: #4391d7; // font-sizes $fs-1: 12px; $fs-2: 14px; // font-families $ff-open-sans:$ff-open-sans: 'Open Sans', sans-serif; // font-weights $fw-bold: 700;
  11. 11. USEVARIABLESZINDEXES // view/component .settings-modal { // ... z-index: $z-index-settings-modal; } .avatar-popover { // ... z-index: $z-index-avatar-popover; }
  12. 12. USEVARIABLESZINDEXES // _z-index-variables.scss $z-index-1: 1000; $z-index-2: 2000; // ... $z-index-9: 9000; // ... $z-index-settings-modal:$z-index-settings-modal: $z-index-5; $z-index-avatar-popover: $z-index-6;
  13. 13. ITREALLYHELPSTOKEEPYOURCODEDRY USEMIXINS&EXTENDS 5.
  14. 14. USEMIXINS&EXTENDSMIXINS // Sass .box { @include absolute(top 5px left 10px); @include sizing(100% 50px); } // CSS .box.box { position: absolute; top: 5px; left: 10px; width: 100%; height: 50px; }
  15. 15. USEMIXINS&EXTENDSEXTENDS // Sass %error { background: $error-color; } .error { @extend %error; border-width: 1px; &--important { @extend %error; border-width: 3px; } } // CSS .error, .error--important { background: #f00; } .error { border-width: 1px; } .error--important { border-width: 3px; }
  16. 16. THINKABOUTRETINAUSERS USEVECTORS 6.
  17. 17. BUTUSEITTHESMARTWAY USEAFRAMEWORK 7.
  18. 18. USEAFRAMEWORKSTRUCTURE framework ├── _components.scss ├── _overrides.scss ├── _variables.scss └── overrides └── _framework-overrides-go-here.scss
  19. 19. USEAFRAMEWORKCOMPONENTS // framework/_components.scss // Core CSS @import "bootstrap/scaffolding"; @import "bootstrap/type"; // @import "bootstrap/code"; @import "bootstrap/grid"; // @import "bootstrap/tables";// @import "bootstrap/tables"; @import "bootstrap/forms"; // @import "bootstrap/buttons"; // ...
  20. 20. USEFRAMEWORKVARIABLES // variables from package/GEM $gray-base: #eee !default; $gray-darker: darken($gray-base, 10%) !default; // etc... // framework/_variables.scss (overrides) // $gray-base: #eee !default; $gray-darker:$gray-darker: darken($gray-base, 20%); // etc...
  21. 21. USEAFRAMEWORKOVERRIDES // framework/_overrides.scss // Core CSS // @import "overrides/scaffolding"; // @import "overrides/type"; // @import "overrides/code"; @import "overrides/grid"; // @import "overrides/tables";// @import "overrides/tables"; @import "overrides/forms"; // @import "overrides/buttons"; // ...
  22. 22. STRUCTUREANDORDER THERESULT
  23. 23. THERESULTSTRUCTURE ├── application.scss ├── components │ └── _your-custom-components-go-here.scss ├── views │ └── _your-view-based-styles-go-here.scss ├── framework │ ├──│ ├── _components.scss │ ├── _overrides.scss │ ├── _variables.scss │ └── overrides │ └── _framework-overrides-go-here.scss ├── settings │ ├── _z-index-variables.scss │ ├──│ ├── _breakpoint-variables.scss │ └── _custom-variables.scss └── utilities ├── _functions.scss ├── _mixins.scss ├── _shared.scss └── _typography.scss
  24. 24. THERESULTSTRUCTURE @import 'settings/z-index-variables'; @import 'settings/variables'; @import 'framework/variables'; @import 'framework/components'; @import 'settings/breakpoint-variables'; @import 'utilities/functions'; @import@import 'utilities/mixins'; @import 'utilities/shared'; @import 'utilities/typography'; @import 'framework/overrides'; @import 'components/first-component'; // more components @import 'views/home'; // more views// more views
  25. 25. Q&A THANKYOU .mat.czajka@gmail.com /czajkovsky MateuszCzajka-seniordev@netguru.co

×