Reduce Ambiguity in Class Names using a Naming Convention

Share this video with your friends

Send Tweet

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a variation of the BEM (Block Element Model) naming convention. OOCSS and SMACSS offer similar methodologies. I also use the class attribute selector to target multiple modifier classes.

Dwayne
~ 7 years ago

Would you guys recommend doing the functionality first as dan did, then adding the styling afterwards?

Ashley Connor
~ 7 years ago

I know this course is focused on design, but I feel that checkbox would be bad for usability.

Artem Filippov
~ 5 years ago

I instead of [class ^ = "todo-list__item"] would create a separate class .todo-list__item. This is more readable.