Loading...

​​CSS.la #4 - Naming Conventions in CSS

​​Introduction to naming things in CSS (and why it matters)

• ​​Cascade & Specificity 101

• ​​https://specificity.keegan.st/

• ​​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!

​​

​​Semantic

​​

​​Strategies:

• ​​Object Oriented CSS (OOCSS): https://github.com/stubbornella/oocss/wiki (Nicole Sullivan)

• ​​Layering – building off of one base chunk of code

​​

​​BEM

• ​​.block__element--modifier​

• ​​Demo: https://codepen.io/laras126/pen/GXdWoQ

​​

​​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

• ​​https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

​​

​​Naming JS hookups

• ​​Data attributes (+1 from Lara)

• ​​.js-* prefix

• ​​Again, better to stay away from IDs if you can

​​

​​

​​Functional/Atomic CSS

​​

​​Presentation from Lucas Allmon about Functional CSS

​​

​​Exercise

​​Inspect other websites and see if you can locate some patterns we discussed:

• ​​https://fender.com/play

• ​​https://techcrunch.com/

• ​​https://www.openlistings.com/

• ​​https://www.vox.com/

• ​​https://rollingstone.com

• ​​http://www.bbc.com/

• ​​https://www.ibm.com/design/language/

​​

​​Choose either of the two following pens, and implement a layout like this