CSS.la #4 - Naming Conventions in CSS
Introduction to naming things in CSS (and why it matters)
- Cascade & Specificity 101
- Classes only
- Organization – CSS is hard to scale without some organization in place
- Naming conventions are kind of a means of control flow – CSS is declarative, and we apply our own structure so it’s not just a snowballing list of instructions
- Semantic vs. presentational/functional naming
- Choose what makes sense for you and your team!
- Right balance of semantic enough to communicate what it is, but generic enough to be reused
- Or double down on functional naming, like Lucas will talk about soon!
- Object Oriented CSS (OOCSS): https://github.com/stubbornella/oocss/wiki (Nicole Sullivan)
- Layering – building off of one base chunk of code
SuitCSS is another one, not too popular: https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
Namespacing (love this)
- e.g: .c-* for component, .o-* for object, .u-* for utility, etc. etc.
- Indicates CSS architecture, easier to visualize styles at a glance
Naming JS hookups
- Data attributes (+1 from Lara)
- .js-* prefix
- Again, better to stay away from IDs if you can
Presentation from Lucas Allmon about Functional CSS
Inspect other websites and see if you can locate some patterns we discussed:
Choose either of the two following pens, and implement a layout like this