Category: CSS Page 1 of 10

Naming things in programming in hard. What you name things matters. Naming is communication. You want the names in your CSS to be easy to understand. They need to quickly communicate what you were thinking.

What naming convention do you use to name your colors in CSS? CSS can be difficult to maintain. Save yourself and others time by picking an easy naming convention. Your choice can save you hours of debugging in the future.

Image by Myriams-Fotos from Pixabay

Choose a Naming Convention

There are two types of naming or variable categories in CSS. Descriptive or functional. A descriptive name describes the value. A functional name describes a use. If you want a variable to display a blue color, you might name it --color-blue. When you want a variable for a specific purpose like an accent color, you might name it --color-accent. Use both variable categories to make it easier to maintain your custom color palette.

Naming Colors

Colors have tints, shades and tones. How do you know what to call each one? Use The Color API to find out what to call the colors in your color palette. You can put in a hex code or RGB value to identify your color.

Start with your color palette

It’s good practice to limit the number of colors in your design. Use descriptive names to define your color palette. Then, use functional names to further define your styles.

root: {
brand-blue-color: #0000ff;  
brand-green-color: #008000;
}

.article-title {
color: var(--brand-blue-color);
}

.primary-button {
color: var(--brand-color-green);
}

When you need to change your colors, you can easily do it. Simply change the color code. If that won’t work, create a new descriptive name and use that instead. Whatever strategy you choose, make it simple so you or someone else can easily make updates in the future.

When you write CSS, do you create classes that reflect the UI? Classes like card, button, title, sidebar or link. Your classes have every possible element defined in that class.

Image by superdirk from Pixabay

What if you didn’t write your CSS that way? Utility-first CSS creates a series of helper classes or utilities. A utility class does one thing really well. For example, you might write a class that changes the background color to blue. Then, you would use to change the background color on buttons, cards and CTA boxes. Use it wherever you want. You mix and match these utilities to create the look you want.

Where can you learn more about it?

Start by checking out these articles:

• In Defense of Utility-First CSS – Why you should learn more about it
• Best Practices for Utility-First CSS – Tips and Techniques for applying utility-first
• Growing Popularity of Atomic CSS – Why you can mix utility frameworks with your other CSS

What CSS Methodologies can I use?

You can look at these couple popular methodologies:

• Cube CSS – a CSS methodology that focuses on simplicity, consistency and works with whatever medium you are using.
• Tailwind CSS – a CSS framework that helps you rapidly build modern websites.
• Atomizer – a CSS utility library that integrates with the most popular web frameworks.

Software development consistently changes. A developer needs to experiment with new tools and new ideas. You need to pick the tools that best suit your project and users.