CSS naming conventions other than BEM

Design help General
1

Hey there,
I’m trying to find a CSS naming convention other than the BEM, I’d prefer something shorter and quicker without as much typing for the CSS class names.
Does anyone know of any other CSS class naming conventions which are quicker/ more effective?

Thank you!
Stay safe and have a great day! :blush: :blush:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Webflow does not really support utility classes so why not go semantic?

Example:

2 Likes
3

Thanks for your reply Jeff,
I’ll take a look at it now!

4

Thanks Jeff, i looked into many possibilities of naming classes and your example seems to be the best fit for Webflow.

5

Hi @ogviet,

Teams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others prefer to use the more structured naming convention which you mentioned - called BEM

Generally, there are 3 problems that CSS naming conventions try to solve:

  1. To know what a selector does, just by reading its name
  2. To have an idea of where a selector can be used, just by looking at it
  3. To know the relationships between class names, just by looking at them

A lot of CSS frameworks use a non-semantic naming convention which generally describes how the element should look, this can get confusing. Below is an example:

<div class="pb3 pb4-ns pt4 pt5-ns mt4 black-70 fl-l w-50-l">
  <h1 class="f4 fw6 f1-ns lh-title measure mt0">Heading</h1>
  <p class="f5 f4-ns fw4 b measure dib-m lh-copy">Tagline</p>
</div>

What you’re looking for is something more readable and practical, something that’s unique to that element and easy to write. As Jeff mentioned, thats where a semantic naming convention comes in. Here is an example below:

<div class="basket">
<div class="product">
<div class="searchResults">

Each element is labelled not based on how it should be styled, but on what the element is.

For information on Semantic classes, take a look at this article:Semantics — MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver