Last updated: November 2018
There, I said it. It’s not procrastination, it’s planning and there is a big difference!
Modal, flag, media block, popup, drawer, overlay, suggestive search, breadcrumb, follow us icons, pagination, sort by, list item, facets, filters, widgets, newsletter, title, heading, social share, nav, nav dropdown, buttons, forms, inline forms, banners, carousels, tabs, accordions, tabs to accordions, toggles. I could go on…
Well actually a lot!
The beauty of CSS is it’s simplicity but it’s also open to interpretation. This is great for creativity, terrible for large projects.
Planning the structure and naming conventions of your CSS is critical for a successful project. Remembering to document everything as you go along. The goal is for anyone to be able to jump onto a project and understand what’s happening.
Here are a few pointers I use when naming my CSS classes.
Don’t over complicate things. Classes should only perform one task. As well as simplifying the naming process it creates a reusable style that can be applied anywhere. It’s okay to use multiple classes on a single HTML element. The goal is to create flexible, lean and usable code; not attractive code.
The same layouts or styles could be applied to lots of different content. Name your classes after what they do and not what they contain. We don’t want to be duplicating CSS down the road or even worse, giving things the wrong classes.
BEM is a naming convention that uses double underscores and dashes. BEM allows you to see the relationship between styles without delving into the CSS. Double underscore represents a reliance on part of the name that prepends it. A double dash distinguishes it as a modifier of the default functionality.
A good example is an article that contains a title and content with some being sticky. Here is an example of BEM in use.
Last November I presented a talk about BEM at Staffs Web Meetup. Harry Roberts also wrote an introduction to BEM on his blog.
There is nothing better than talking things over with a colleague. This will help focus your ideas while getting the perspective from someone who may eventually work on the code you’re writing.
I spent an hour deciding a class name and I’ll do it again.