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

1. HOWTOWRITECLEAN&SCALABLECODE
CSSARCHITECTURE
.mat.czajka@gmail.com /czajkovsky
MateuszCzajka-seniordev@netguru.co

2. IT’SCSSWITHSUPERPOWERS
USEPREPROCESSORS
0.

3. ANDBECONSISTENTABOUTIT
DEFINEASTYLEGUIDE
1.

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. DEFINEASTYLEGUIDEHOUND
+ =SCSSLINT

6. THATYOUNEEDTOSUPPORT
DETERMINEBROWSERS
2.

7. DETERMINEBROWSERSAUTOPREFIXER
// in code
a {
display: flex;
}
// output
a {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex
}

8. INTOSMALLPIECES
DIVIDEYOURCODE
3.

9. ASMANYASITMAKESSENSE
USEVARIABLES
4.

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. USEVARIABLESZINDEXES
// view/component
.settings-modal {
// ...
z-index: $z-index-settings-modal;
}
.avatar-popover {
// ...
z-index: $z-index-avatar-popover;
}

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. ITREALLYHELPSTOKEEPYOURCODEDRY
USEMIXINS&EXTENDS
5.

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. 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. THINKABOUTRETINAUSERS
USEVECTORS
6.

17. BUTUSEITTHESMARTWAY
USEAFRAMEWORK
7.

18. USEAFRAMEWORKSTRUCTURE
framework
├── _components.scss
├── _overrides.scss
├── _variables.scss
└── overrides
└── _framework-overrides-go-here.scss

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. 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. 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. STRUCTUREANDORDER
THERESULT

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. 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. Q&A
THANKYOU
.mat.czajka@gmail.com /czajkovsky
MateuszCzajka-seniordev@netguru.co