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
Industry Best Practices
By adelaineho
Industry Best Practices
- 465