Home

The natural FCSS syntax

Writing Functional CSS using other frameworks is possible, but the learning curve can be steep. The syntax is often unnatural and hard to remember. FCSS, however, is different. Its syntax is natural and easy to remember. This guide will show you how to write Functional CSS using FCSS.

The first rule of FCSS is that a class must be written as it appears in CSS. For example, if you want to create a class that makes the text black, you can do something like this:

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

The basic structure is [property]--[value]. For example, in color--black, color is the property and black is the value. This mirrors the natural way to write CSS, making it easy to remember. You can start imagining how other classes are written: display--block, height--100, etc. When a property has multiple words, use a dash as you would in CSS. For example, to represent the background color property, you can write background-color--black. This approach is straightforward and consistent. The same rule applies to values: if a value has multiple words, use a dash, just as in CSS. For example, to apply display: inline-block, you can write display--inline-block.

The second rule of FCSS is that a class may be preceded by a prefix. Prefixes are used to group classes for breakpoints or custom classes. For example, sm-display--block is equivalent to this:

/** In sm.css */
@media (max-width: 640px) {
  .sm-display--block {
    display: block;
  }
}

In the FCSS framework you can find many breakpoint premade prefixes: sm-,md-, lg-, xl-, xxl-, etc., and you can also read about the breakpoint strategy in the breakpoint page.

Sometimes, you will find yourself in a situation where you need to add a custom class. For example, if you want to add a class that makes the text uppercase, you need to use the prefix c-. All rules that begin with c- are custom classes, and these classes must be added to custom.css. To learn more about custom classes, you can read the customization page.

In other situations, you will find yourself that you need to add sufixes to a class. Sufixes are used to add behavior properties to a class. For example, we can add the hover behavior to the color-- property: color--black:hover. In code this looks like:

/** In generics.css */  
.color--green\:hover:hover {
  color: var(--green);
}

<BodyMedium className='color--green:hover'>Hover me to see the effect.</BodyMedium>

Hover me to see the effect.