Utility Classes & Custom Properties

This brief chapter provides some insight into utility classes and CSS custom properties, both features which can markedly improve your CSS. These topics are optional during the course but are a great place to start for if you're looking for how to improve your CSS proficiency.

Utility Classes

Akin to the practises of abstracting methods within Java, the introduction of general "utility" classes to your CSS helps keep your code concise. The idea of DRY code, where you Don't Repeat Yourself is important not only with regard to code legibility and maintainability, but also webpage performance metrics.

The idea of utility classes is intrinsically linked to keeping your code DRY. Abstracting repeated sets of properties out from rule-sets applying to specific blocks or elements on our page, allows us to create a single point-of-contact for some of our styling. This relates to the idea of having a single source of truth within your code. Things such as font sets, basic padding, or colour schemes can all be housed within generic-named classes that can be applied wherever across your site.

Within the example responsive-design webpage provided on CodePen, there is an example of utility class, namely the padded class. It's a very simple class which we are applying to each section within the webpage with written content.

.padded {
   padding: 2rem 4rem;
}

The utility class padded is being applied to the "Products", "About Us" and "Footer" sections. This same class is then targeted specifically with a media query checking the screen width, so that the lateral padding is reduced for smaller screens.

Other examples of how you may create a utility class could be for if you want certain headings to be a different colour and underlined:

.green-underlined {
    color: green;
    text-decoration: underline;
}

Or maybe you would like to create a utility class which creates a flexbox but that also over-rides the default of flex-direction: row:

.flex-columns {
    display: flex;
    flex-direction: column;
}

Generally, a utility class will define a property, or two-three related ones.

Custom Properties

Another topic which relates heavily to creating a "single source of truth" is CSS custom properties. These properties are very similar to creating a variable within your CSS—you create a name which you associate to a value which you make use of later on. All custom property names start with two hyphens e.g. --name and are usually declared within a rule-set applying to the root of the document (using :root).

Custom properties are incredibly useful for creating different sets of either colours or sizes, used for colour schemes and explicit sizing respectively. An example of how to create such a colour scheme outline is shown below, alongside an example of how to use a custom property within your rule-set.

:root {
    --base-grey: #c9c9c9;
    --dark-green: #0f7314;
    --medium-green: #39bf66;
    --light-green: #7ceba1;
    --highlight-blue: #86aceb;
}

...

.sectionName {
    background-color: var(--light-green)
}

.sectionName__title {
    color: var(--dark-green);
}

.section__card {
    border: 2px solid var(--highlight-blue);
}

Custom properties can boost your CSS' readability while also creating a single point of contact for defining values which are used repeatedly across your site. This means that if you ever need to make a change, you only need to change one value, and not many.

While the use-case of utility classes and custom properties are similar, note that custom properties relate to property values whereas the other relates to both properties and their values. Custom properties can hence be used across many different rules whereas utility classes' uses are strictly defined.