HTML & CSS

Title CSS: A Simple Approach to CSS Class Naming

Jon Cuthbert
Share

If you are like me then you spend way too much time coming up with the perfect class name for an element. You might Google for synonyms or imagine what this element would be if it were a real life object. You know that any semantic name will work, but somehow trying to think up the perfect name seems worth it.

To be honest, the perfect name won’t help your stylesheet all that much, but utilizing a CSS methodology could make a big difference.

Examples of CSS Methodologies

OOCSS is environmentally-friendly advice helping you write sustainable classes through recycling styles.

SMACSS is an all-encompassing CSS game plan that will coach you through all the proper techniques.

Idiomatic CSS is an analytical house cleaner, organizing everything in uniform for easy recognition and peace of mind.

And BEM? Well, BEM is the gold standard of CSS class naming of which all CSS class naming schemes are measured against.

So Why Any More Talk About Class Naming?

The BEM approach is about writing scalable CSS with an emphasis on readability and avoiding collisions. In short, BEM stands for Block__Element–Modifier. The Block is an element that encompasses a small chunk of related elements (in SMACSS it is called a module). The Element is a descendant of the block and normally wouldn’t exist without the presence of the block. The Modifier controls the state of the block.

In BEM, you write a normal class name for the block, and for any element you copy the block name and append the element name.

Conventional BEM looks like this:

<div class="block block--modifier">
    <p class="block__element">
</div>

This is good because anyone will understand that “block__element” relates to “block” and there is little chance the class “block__element” has been used anywhere else in the project.

But there is a problem with this approach. You write CSS all day and you do not want to write long class names that muddy up your clean markup.

Title CSS is about giving you the benefits of BEM without adding any prefixes or special characters to your class names.

The Trick to Title CSS is Simple

Using Title CSS, you’d do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name.

This means with Title CSS you capitalize any class name that will get referenced in the stylesheet without a parent class. This means even the objects in OOCSS get capitalized. The distinction is simple; anything that is capitalized in the stylesheet must not be used again.

Here is an example of how the markup would look when using Title CSS:

<div class="Title isModified">
    <p class="descendant">
</div>

And here is how the corresponding CSS would look:

.Title {}
    .Title.isModified {}
    .Title .descendant {}

Why Title CSS Works

Block identifiers or “Title” classes create a scope for all the descendent classes within the block. Descendant classes can be repeated in other Title blocks without style collision.

This is not vital for the methodology to work but since HTML class name are case-sensitive, “Title” classes are also free to be repeated as descendant classes.

How Does Title CSS Help?

With the Title CSS methodology, you’ll see the following benefits:

  • Write CSS classes in a more natural manner.
  • CSS selectors resemble the written language, like English sentences that start with an uppercase letter.
  • Shorter class names are faster to type and easier to scan.
  • Title case classes are easy to spot in the markup; to see what a lowercase descendant class belongs to, just traverse up the nodes for a Title class.

A Pitfall and Workaround

Title CSS may have issues when you use a Title block to contain other blocks. If a containing Title block has the same descendant selector class as one that it envelopes than there will be a conflict, in which case you should use child combinator in Title blocks that act as containers.

To demonstrate the issue, below is some sample markup with the problem present:

<div class="Container">
    <header class="header"></header>
    <main class="body">
        <section class="Title">
            <div class="header"></div>
            <div class="body"></div>
        </section>
        <section class="Title">
            <div class="header"></div>
            <div class="body"></div>
        </section>
    </main>
</div>

And the accompanying CSS:

.Container {}
    .Container .header {}
    .Container .body {}
.Title {}
    .Title .header {}
    .Title .body {}

Notice that the styles applied to the .header and .body elements inside .Container will also apply to the other .header and .body elements nested further. To avoid this, here is the solution:

.Container {}
    .Container > .header {}
    .Container > .body {}

With a selector that uses the child combinator (>), the styles will apply only to the direct children, and not to the further nested elements that have the same class names.

A Word About Sass

Pre-processors provide an excellent way to write Title CSS. The nesting ability allows you to identify Title blocks easily in the stylesheet.

Here is a Title CSS example in SCSS:

.Title {
    &.modifier {}

    .descendant {}

    > .tightlyBound {}
}

Feedback?

As BEM, SMACSS, and OOCSS would suggest, it is important to keep the blocks or modules small. There are performance and maintainability benefits to include only elements that are closely related to the Title class.

If you have any observations or feedback on Title CSS, I’d be happy to hear them in the comments. And if you’d like to get more information or want to collaborate, be sure to check out the GitHub repo for Title CSS.