Web Workers is a community of designers, developers, UXers and all around tech- and web-savvy individuals that meet in person and online to discuss all the goings on of the wide, wide world of the Web.

SCSS Conventions - May 9th, 2017

FedEx Institute of Technology - Room 225

Meeting Notes

Josh Bryant talked about SCSS naming conventions. His slides are available here.

First up: BEM

Block Element Modifier is a naming convention for writing modular CSS.

BEM is extrordinarly helpful for making modular CSS that is maintainable by yourself and future developers. BEM helps fight specificity in the CSS Cascade.

CONS of BEM: Different mental model for CSS. Sometimes these class names can be seriously long and convoluted.

Second up: SMACSS

Scalable Modular Architecture for CSS is a definite mental model for CSS. It involves Base, Layout, Module, State and Theme elements.

Module elements end up being about 80-85% of your CSS in a SMACSS mindset.

Pros:

  • Easy to read
  • Great for newcomers to SCSS
  • Highly scalable

Cons:

  • There can be specificity issues
  • Deep level CSS
  • Where should things live?

Aesthetic SASS

Aesthetic SASS allows you to break your code up logically into various folders and files to make updates easier. A 2000+ line file of CSS can be made up of many 20-30 line SCSS files.

(Web Workers note: Did you know that we did a podcast about Aesthetic SASS?)