Slide 1

Slide 1 text

ORGANISING
 {CSS;SCSS} Joel Pan 26 April 2016

Slide 2

Slide 2 text

about me Joel Pan [email protected]
 @ketsugi just google “ketsugi”

Slide 3

Slide 3 text

Preamble • CSS in large projects can be a pain • Lots of CSS definitions • Selectors are all over the place • Properties inconsistently ordered

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Section One Plain CSS

Slide 6

Slide 6 text

Create logical blocks /* Navigation **************************************************/ nav { ... } /* Footer **************************************************/ footer { ... }

Slide 7

Slide 7 text

Add a Table of Contents /** * CH01 - Resets * CH02 - Typography * CH03 - Page Structure * CH04 - Header & Navigation * CH05 - Content & Media * CH06 - Footer * CH07 - Miscellaneous **/

Slide 8

Slide 8 text

Indent the rules #nav { float:right; } #nav li { float:right; width:100px; } #nav li a { color:#ccc; } #nav li span { color:#fff; }

Slide 9

Slide 9 text

LoVe/HAte sort order
 for pseudo-selectors a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; }

Slide 10

Slide 10 text

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;

Slide 11

Slide 11 text

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; }

Slide 12

Slide 12 text

Group z-index rules together #goku { z-index: 9001; } .modal { z-index: 9000; } .overlay { z-index: 8000; } .header { z-index: 7000; }

Slide 13

Slide 13 text

Section Two SASS/SCSS

Slide 14

Slide 14 text

Use imports to maintain a master CSS file @import "reset"; @import "variables"; @import "global"; @import "typography"; @import "navigation";

Slide 15

Slide 15 text

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";

Slide 16

Slide 16 text

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";

Slide 17

Slide 17 text

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; }

Slide 18

Slide 18 text

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; }

Slide 19

Slide 19 text

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; } }

Slide 20

Slide 20 text

Aside: use source maps!

Slide 21

Slide 21 text

Open Discussion

Slide 22

Slide 22 text

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/