Front End Design Conference – Drew Barontini – Thinking Modular CSS

https://twitter.com/drewbarontini

Slides:  http://talks.drewb.io/tmcss-score/

• • “Front-end development is a thing”
  •  tl;dr
    • Smaller parts
    • Independently created
    • Used in different systems
  • Breaking your CSS down into smaller chunks will ultimately make it more maintainable
  • Single responsibility principle
    • Each class/module should have a single responsibility
      • Use a comment block to explain the responsibility
  • Stick to using classes.  Avoid using IDs.
  • Establish naming conventions
  • “This is how it is now, until we change it” – Nick Walsh
  • MVCSS – http://mvcss.github.io/
  • BEM methodology – http://bem.info/method/ & http://bem.info/
  • Inspiration
    • OOCSS
    • BEM
    • Suit
    • SMACSS
    • intuit.css
  • Avoid magic numbers (or leave a comment if you need to use one)
  • Helps to come up with standards to reuse throughout projects.
  • Do a front-end audit – https://github.com/drewbarontini/front-end-audit
  • Don’t be afraid to write something specifically and then abstract it
  • Check out
    • csscss – https://github.com/zmoazeni/csscss
    • csslint – http://csslint.net/
    • Style Stats – http://www.stylestats.org/
    • preprocessor helpers
  • http://go.drewb.io/tmcss-examples
  • He then reviewed Dribble and Digg to identify patterns and explained each section.
  • “Always be evaluating”