Team

This is it

This isn’t really a post about naming conventions, either. Instead, let’s talk about what we’re calling elements. The names themselves. The things we use to link blocks of styles to the elements they’re associated with.

I really think I have

found the necessary tools for making quick decisions when it comes to creating class names. Naming in development is notoriously difficult, but BEM has helped me formulate a structure for naming classes that has helped me stay away from names that are cryptic or abstract. I want to share my mental rubric for CSS class names as inspired by working with the BEM convention of naming.

Yuck.

How can we remedy this? Pick names that are less likely to change.

We can usually fit a given class name into one of three categories:

• Test
• Test

Lorem ipsum dolor sit amet,

consectetur adipisicing elit. Necessitatibus ipsum quo dicta reiciendis adipisci sit iusto earum nam debitis nulla, aut in libero inventore iure dolore et maxime veritatis ad! Itaque ab in voluptates quisquam autem impedit tempora quasi laboriosam.

• Training
• Erholung
• Aufbau

Functional Class Names

Class names within a given category tend to share maintainability characteristics. If we make naming decisions with these categories in mind, we can make smarter decisions about what we’re calling things–decisions that will make our CSS more resilient to change.

•     Functional class name
•     Presentational class names

Limit gross refactoring tomorrow by picking class names that are less likely to change. Ethan shares three naming options to help cushion the blow of future design changes.