$30 off During Our Annual Pro Sale. View Details »

Organising and Structuring CSS/SCSS

Organising and Structuring CSS/SCSS

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

Joel Pan

April 26, 2016
Tweet

Other Decks in Programming

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/