Title CSS: A Simple Approach to CSS Class Naming

Key Takeaways

• Title CSS is a methodology that simplifies CSS class naming by using capitalized names for global classes and lowercase names for modifier or descendant classes. This approach provides the benefits of BEM without adding prefixes or special characters to class names.
• Title CSS helps in writing CSS classes in a more natural manner, resembling written language. It also allows for shorter class names that are faster to type and easier to scan. The capitalized classes are easy to spot in the markup, making it easier to understand what a lowercase descendant class belongs to.
• A potential issue with Title CSS arises when a Title block contains other blocks with the same descendant selector class. To avoid style conflicts, the child combinator (>) can be used in Title blocks that act as containers, ensuring styles apply only to direct children and not to further nested elements with the same class names.

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:

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

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:

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

And here is how the corresponding CSS would look:

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

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:

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

And the accompanying CSS:

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

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:

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

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:

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

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.

Frequently Asked Questions (FAQs) about CSS Title and Class Naming

What is the significance of CSS title and class naming?

CSS title and class naming is a crucial aspect of web development. It helps in organizing your CSS code, making it easier to read, understand, and maintain. Proper naming conventions can also improve the efficiency of your CSS selectors, making your web pages load faster. Moreover, it aids in collaboration as it provides a clear understanding of the code to other developers.

How can I add a title attribute from CSS?

CSS is a styling language and does not directly control HTML attributes such as the title attribute. However, you can use JavaScript or jQuery to dynamically add a title attribute to an element. Alternatively, you can use CSS content property with the attr() function to display the title attribute value, but it doesn’t actually add the title attribute to the element.

What are CSS attribute selectors and how are they used?

CSS attribute selectors are a powerful tool that allows you to select elements based on their attribute and attribute values. They can be used to style elements that have certain attributes or attribute values. For example, input[type=”text”] will select and style all text input fields.

How can I use the title attribute in HTML?

The title attribute in HTML is used to provide additional information about an element. It is often displayed as a tooltip when the user hovers over the element. You can add it to almost any HTML element. For example,

Hover over me

.

What is the best practice for naming CSS classes?

The best practice for naming CSS classes is to use meaningful and descriptive names. Avoid using presentation or location-specific words. Instead, use names that reflect the purpose or content of the element. Also, use hyphens to separate words in a class name and keep the names as short as possible.

Can I use special characters in CSS class names?

Yes, you can use special characters in CSS class names, but they must be escaped with a backslash. However, it’s generally recommended to avoid using special characters as they can make your code harder to read and understand.

How can I select an element with a specific title attribute in CSS?

You can use the attribute selector in CSS to select an element with a specific title attribute. For example, div[title=”example”] will select all div elements with a title attribute value of “example”.

Can I use numbers in CSS class names?

Yes, you can use numbers in CSS class names, but they cannot be the first character. The first character must be a letter, hyphen, or underscore.

How can I add multiple classes to an HTML element?

You can add multiple classes to an HTML element by separating them with a space inside the class attribute. For example,

.

Can I use CSS to change the title attribute of an HTML element?

No, CSS is a styling language and cannot be used to change HTML attributes. You would need to use JavaScript or jQuery to change the title attribute of an HTML element.

The above is the detailed content of Title CSS: A Simple Approach to CSS Class Naming. For more information, please follow other related articles on the PHP Chinese website!