CSS.la #4 - Naming Conventions in CSS
Introduction to naming things in CSS
why it matters)
Cascade & Specificity 101
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
Layering – building off of one base chunk of code
SuitCSS is another one, not too popular:
for utility, etc. etc.
Indicates CSS architecture, easier to visualize styles at a glance
Naming JS hookups
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