February 2, 2022

Class Naming When Using a Framework

CSS Frameworks are great. They provide easily customized elements for your website out of the box to help decrease development time. However, with a custom design, there’s always need for some overrides to the design and the ability to target individual elements for tracking and other user-interactions.

By default, a CSS framework has reusable classes that define the look and behavior of your element. However, these aren’t a unique identifier. For instance, you may have 3 grids on one page with similar markup, how can you target just one of them?

Give Everything a Name

Each element in your design should have a custom name, either a class or an ID depending on how you plan to use it.  Let’s say you have 3 Bootstrap columns on your page, each with different content. The framework’s markup looks like this:

<div class="container">...</div>

Since each grid’s markup is the same, we can’t target one of the grids with CSS overrides or Javascript interactions. It needs something unique to set it apart like this:

<div class="container insta-feed" id="container-01">...</div>

By using a CSS class or element ID, we can target a child of this parent that doesn’t affect the other grid instances for CSS overrides or Javascript. Note: IDs need to be unique, only one “container-01” ID can exist per page, which isn’t the same for classes.

$('.container.insta-feed a').click(function(){ ... });
.container.insta-feed a { ... }

Tag Manager Tracking

In some cases, we might want to target user interaction with Google Tag Manager, like user clicks and hover states, for analytics data. Without unique identifiers for individual elements, or at least parent elements, this is difficult to achieve. With unique identifiers, we can easily target any element.

For example, if we want to track each time someone clicks on a specific button on a specific page, the page both the body tag and element should have a unique identifier. On “page01”, in the “blade02” section, target the child “button” anchor link:

body.page01 section.blade02 a.button

Conclusion

CSS frameworks are great, though a site-specific naming convention is the only way to retain full control over your markup.

Howdy!

I’m a full-stack website developer and designer. Whether you’re looking for an online store, portfolio showcase or a blog, I can help make it stand out from the crowd. I love LAMP.