Home

The natural FCSS syntax

Writing Functional CSS using other frameworks is possible, but the learning curve is steep. The syntax is not natural, and it is hard to remember. FCSS is different. The syntax is natural, and it is 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 represent how it is wrote 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], as for the example, color-- is the property and black is the value. This is the natural way to write CSS, so it is easy to remember. Start imagining how other classes are written: display--block, height--100, etc. When a property has multiple words, you can use the dash as you use it in CSS. For example, if you want to represent the background color property, you can do something like this: background-color--black. As you can see, it is easy to do it. Same rule applies to values, if a value has multiple words, you do it the same way you do it in CSS. For example, if you want to make the display: inline-block, you can do something like this: 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 equal 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, you want to add a class that makes the text uppercase. In that case, you need to add a prefix c-. All rules that begin with c- are custom classes, and these classes must be added into custom.css. For learning more about custom classes, you can read the customization page.

But 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.