Industry Best Practices

Agenda

  • OOCSS
  • BEM Syntax
  • ID selectors
  • !important
  • JS Hooks
  • CSS Prepocessors
  • ES6
  • Task runners
  • Automated tests

What is OOCSS?

Object Orientated CSS

  • Reusable components
  • Extend classes
  • Avoid location specifics

BEM Syntax

"Block Element Modifier"

Strict naming structure of CSS

.block {}
.block__element {}
.block--modifier {}

ID selectors

IDs have the highest specificity in CSS, non reusable

Considered an anti-pattern

 

!important

BIG NO NO

There's no turning back after you start using them...

JS Hooks

Classes that help differentiate whether they're CSS classes or JS classes

 

<button class="button button--ghost js-request-a-quote">Request a Quote</button>
        

CSS Preprocessers

Classes that help differentiate whether they're CSS classes or JS classes

  • Cuts down large files
  • Use variables
  • Write functions (mixins)
  • Vendor friendly
  • If/Else statments
  • Loops
  • Examples: Sass, Less or Stylus

ES6

ECMAScript6

  • OOP, increased modularity
  • Still in draft
  • Most ES6 features are not supported by browsers
  • Transpiler tools to compile ES6 code to ES5

Task Runners

  • Grunt or Gulp
  • Minify
  • Uglify
  • Compile
  • Image optimisation
  • Pipeline tool

Automated Tests

  • QUnit
  • Mocha
  • Browserstack
  • PhantomCSS
  • Selenium

Lookout for Tech