Organising and Structuring CSS/SCSS

Lightning talk delivered at Talk.CSS #5 in Singapore. Suggestions and tips for organising your CSS and SCSS.

Transcript

1. ORGANISING
 {CSS;SCSS} Joel Pan 26 April 2016
2. about me Joel Pan joel@ketsugi.com
 @ketsugi just google “ketsugi”
3. Preamble • CSS in large projects can be a pain • Lots of CSS definitions • Selectors are all over the place • Properties inconsistently ordered
4. Disclaimer The following suggestions are provided as-is and should be used at your own discretion. according to your own unique situation. The speaker takes no responsibility for any distress or conflict which may arise from the adoption of any of the described techniques without the prior consent and agreement of your team mates, clients or superiors.
5. Section One Plain CSS
6. Create logical blocks /* Navigation **************************************************/ nav { ... } /* Footer **************************************************/ footer { ... }
7. Add a Table of Contents /** * CH01 - Resets * CH02 - Typography * CH03 - Page Structure * CH04 - Header & Navigation * CH05 - Content & Media * CH06 - Footer * CH07 - Miscellaneous **/
8. Indent the rules #nav { float:right; } #nav li { float:right; width:100px; } #nav li a { color:#ccc; } #nav li span { color:#fff; }
9. LoVe/HAte sort order
 for pseudo-selectors a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; }
10. TRouBLed sort order for shorthand
 (margin, border, padding) margin: top right bottom left; margin: 1em 0 2em 0.5em; margin-top : 1em; margin-right : 0; margin-bottom: 2em; margin-left : 0.5em;
11. Sort the properties #box-model { display:block; float:left; margin:10px; border:1 px solid #999; padding:2px 4px; width:200px; height:50px; color:#fff; font-size:14px; background:#000; } #alphabetical { background:#000; border:1 px solid #999; color:#fff; display:block; float:left; font-size:14px; height:50px; margin:10px; padding:2px 4px; width:200px; }
12. Group z-index rules together #goku { z-index: 9001; } .modal { z-index: 9000; } .overlay { z-index: 8000; } .header { z-index: 7000; }
13. Section Two SASS/SCSS
14. Use imports to maintain a master CSS file @import "reset"; @import "variables"; @import "global"; @import "typography"; @import "navigation";
15. Store SCSS variables in a partial @import "variables"; // _variables.scss $primaryColour: #f00; $primaryColourLight: lighten($primaryColour, 30%); $secondaryColour: #00f; $primaryFontStack: "Helvetica Neue", "Helvetica",
 "Roboto", "Arial", "sans serif";
16. Or maintain a more complex file organisation stylesheets/ | |-- modules/ # Common modules | |-- _all.scss # Include to get all modules | |-- _utility.scss # Module name | |-- _colors.scss # Etc... | ... | |-- partials/ # Partials | |-- _base.sass # imports for all mixins +
 | | global project variables | |-- _buttons.scss # buttons | |-- _figures.scss # figures | |-- _grids.scss # grids | |-- _typography.scss # typography | |-- _reset.scss # reset | ... | |-- vendor/ # CSS or Sass from other projects | |-- _colorpicker.scss | |-- _jquery.ui.core.scss | ... | `-- main.scss # primary Sass file // Modules and Variables @import "partials/base"; // Partials @import "partials/reset"; @import "partials/typography"; @import "partials/buttons"; @import "partials/figures"; @import "partials/grids"; // ... // Third-party @import "vendor/colorpicker"; @import "vendor/jquery.ui.core";
17. Separate style rules from layout rules // _styles.scss nav { border: 1px solid red; background-color: green; } li { display: block; } // _desktop.scss nav { display: fixed; width: 30vw; height: 100vh; } // _phone.scss nav { display: fixed; width: 50vw; height: 100vh; }
18. Use a z-index partial // _zindex.scss $zindexGoku : 9001; $zindexModal : 9000; $zindexOverlay : 8000; $zindexHeader : 7000; @import "zindex"; #goku { z-index: $zindexGoku; } .header { z-index: $zindexHeader; }
19. Sort your SCSS declarations .weather { @extend %module; @include transition(all 0.3s ease); background: LightCyan; &:hover { background: DarkCyan; } &::before { content: "*"; } > h3 { border-bottom: 1px solid white; } }
20. Aside: use source maps!
21. Open Discussion
22. References • https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/ • http://jonathannicol.com/blog/2011/04/24/organise-your-css/ • https://css-tricks.com/handling-z-index/ • http://thesassway.com/beginner/how-to-structure-a-sass-project • http://modernweb.com/2014/04/14/organizing-your-css-code-for-preprocessors/