Home

Customization

Sometimes, an utility class doesn't fit your needs. In this case, you need to create a custom class. This guide will show you how to create a custom class. This means you can have the best of the both worlds: the simplicity of utility classes and the flexibility of custom classes.

When you load the CSS files, you will notice that there is precedence by inheritance in the CSS files. For example, the classes on generics.css will have precedence each other following the order:

/** In generics.css */        
.color--black {
  color: black;
}
.color--white {
  color: white;
}

Now, in the HTML, you can use the classes like this:

<p class="color--black">This text is black</p>
<p class="color--white">This text is white</p>

This code outputs:

This works beautifully, but what if you want to make the paragraph with white color black overwriting? Something like this:

<p class="color--black">This text is black</p>
<p class="color--white color--black">This text is white</p>

Even though you added the color--black class after the color--white class, the paragraph is still white. You thought that the color--black class would overwrite the color--white class because you wrote it in different order, but it didn't. The browser still applies the color--white class. Why?

This is because the color--white class has precedence over the color--black class because it is declared after the color--black class in the CSS, therefore the paragraph will be white because of the natural inheritance order dictacted by the CSS.

To address this issue, you can introduce the !importantkeyword to the color--black class. However, doing so will result in the same output as the previous code, albeit causing significant disruption to your CSS structure. This approach would demand the inclusion of the !important keyword across all instances, ultimately leading to a cluttered CSS file and the persistence of this recurring problem.

FCSS resolves this dilemma by employing custom classes documented within the custom.css file, which is intentionally imported as the final step. Although this practice deviates from the standard FCSS methodology, it remains a viable option for implementation when necessary.

If you need to solve an inheritance problem, make a logic case in the component for rendering a different class. For example, if you need to render a black text instead of white, you can do something like this:

/** @format */

export default function MyComponent({ color }) {
  const textColor = color === 'black' ? 'black' : 'white';
  return (
    <p className={`color--${textColor}`}>
      This text is {color}
    </p>
  );
  }
          

This a clean way to solve it. But for other cases, you cannot use this, and for those cases, you may want to write your custom class.

Writing a custom class

To write a custom class, you need to write it in the custom.css this file is always imported last, so it will have precedence over the other classes. It must follow a defined pattern, the pattern I designed is all custom classes must be preceded by a preffix .c-. For example, if you want to create a class that makes the text red on hover, you can do something like this:

/** In custom.css */
.c-color-red-on-hover:hover {
  color: red;
}

Now, in the HTML, you can use the class like this:

<p class="color--black c-color-red-on-hover">This text is red on hover</p>

This code outputs the following result:

You must be careful when writing custom classes. You must avoid classes with dozens of properties, because this will make your CSS file huge. You must also avoid classes that are too specific, because this will make your CSS file too specific and will make it hard to maintain. Always try to make your classes reusable. Always use c- preffix for custom classes, this will make it easier to identify them.

If your project has too many classes, something is wrong. Ideally, you will have a few classes, and you will reuse them across your project. If you have too many classes, you may want to rethink your design.