Naming Colors in Your CSS

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.

Naming Your Colors IN CSS
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.

Make Your Own UI Pattern Library

What are User Interface Design Patterns? A pattern is a plan or model for making something. In software development, patterns provide solutions to specific design problems. Buttons tell people to do something. Download, Buy, Continue or Save.

Make Your Own UI Library
Photo by Susan Q Yin on Unsplash

When you design a website or web app, you’ll need a navigation bar, button, tabs, forms and more. Common design patterns help to make your design easy to use and user friendly.

What is a UI Pattern Library?

A UI Pattern Library is a collection of user interface components or patterns. It helps you to define how each component looks and works. Your pattern library helps to ensure a consistent look and feel across your products. You want to add solutions so you don’t have to solve the same design problem over and over again. Or search your app for the pattern that you need to use.

What goes in it?

You’ll want to define your user interface. How you create buttons, navigation bars, layouts, alerts and notifications. Include guidelines on how and when to use them. You may want to include code snippets so you don’t have to rebuild a component from scratch. Also include color palettes, typography and grid layouts.

Where to find Design Pattern Libraries and Resources?

Build Your Own

When you build your own pattern library, get designers and developers involved. A pattern library is a collaborative project. Both your designers and developers must work together in creating and maintaining it.

  • Decide on what to name things The team needs to decide what to call a component. A shared naming convention prevents communication problems.
  • Use a ticket system to track updates Your design library has to be updated and maintained. A ticket system makes it easy to track changes. You can create an approval system for requests.
  • Audit your library Your library can quickly become out of date. Remove old components, templates and no longer used patterns. Plan to audit your library at least once a year.

Switching to Utility-First CSS

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.

Switching to Utility-First CSS
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:

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.

Making an Advice Generator

Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.

Making an Advice Generator
Image by Dean Moriarty from Pixabay

You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.

Advice Generator

The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.

Screenshot of Advice Generator with Advice #100: Everybody makes mistakes.

How I Built It

I created this app using HTML, CSS and JavaScript. For CSS, I started with Bootstrap to help structure the design. Then, I used FlexBox to manage the layout.

Fetching Data

I used the JavaScript Fetch API to fetch the data from the Advice Slip JSON API and display it on a web page. By default, it picks a piece of advice and displays it. If you want to get another piece of advice, you need to click the dice icon. This icon button retrieves a random piece of advice.

If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.

Design Challenges

The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.

The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.

Other Coding Challenges

Resilient Web Tips

Whether you use a computer, phone, table or some other device to access the Internet, you expect it to work. Sometimes things can break. Your connection is slow. Images don’t load. They are using a third-party tool that is having their own issues with the Internet. What can you do? Wait. Try again. Come back later to see if they fixed it.

Resilient Web Tips
Image by 3D Animation Production Company from Pixabay

The Internet provides information to users. By allowing them to use, whatever tools they wish. This feature makes the web resilient or fault tolerant.

What is a resilient website?

Being fault tolerant or resilient is part of the how the web works. HTML and CSS are the simplest tools for building a website. If errors are in either the HTML or CSS, the browser skips the errors and loads the page anyway. It may not look the way you want, but people can read the information.

Other programming tools like JavaScript don’t have built in fault or error tolerance. To make your code more resilient, you have to handle errors and missing information.

What can you do?

1. Start with the basics

Use HTML and CSS. HTML is the foundation of the web. You can build a website with HTML only and have it work. CSS allows you to use new features and older browsers ignore what they don’t understand. The more things we add to our web apps, the more they affect user experience. site performance and accessibility.

2. Pick the right framework for the job

JavaScript can enhance the user experience. It can also slow the site performance down. JavaScript Frameworks allow you to build things that you can’t using HTML and CSS. Before you decide to use a framework, you need to ask if you really need it. Or can you use Vanilla JavaScript instead? Consider adding less to your next project.

3. Prevent errors and make them easy to fix

Lot of things can break on the web. Your network connection fails. You clicked on the wrong thing. Or something else breaks behind the scenes. Web developers can build their web apps to prevent errors and make them easy for the user to fix. When you use JavaScript, you need strategies for making a resilient UI. Callum Hart shows you how to build a resilient JavaScript UI.

Where can I learn more about making resilient websites?

Jeremy Keith wrote Resilient Web Design. A book that gives you ideas and approaches on how to build a more resilient web.