Naming Conventions

This page explains the naming conventions for class names and CSS variables in Lism CSS.

CSS Variable Naming Conventions

Each block of a variable name is written in camelCase, following the basic form --{varName}.

Token Variables

Token Variation Notation

Variables for Property Classes

Rules for variable names used in Property Classes (-{prop}:{value}).

Other Variables

Class Naming Conventions

Prefixes are attached to match the class classification. They are joined using two hyphens (--).

• Component: c--
• Atomic Primitives: a--
• Layout Primitives: l--
• Trait Primitives: is--
• Set Class: set--
• Utility Class: u--

The name that follows the prefix is written in camelCase.

• NG: c--my-component
• OK: c--myComponent

The naming conventions for Property Classes are as follows.

• Class paired with a specific value: -{prop}:{value}
• Class that accepts a --{prop} variable: -{prop}
• Class that accepts a breakpoint value (--{prop}_{bp}): -{prop}_{bp}

Abbreviation Rules for {prop}

The basic approach is to abbreviate based on Emmet.

One-character Properties

The main properties that can be abbreviated to a single character are defined as follows.

Among these, the only one that differs from Emmet is opacity.

Property Groups

The following explains abbreviation rules for groups of related properties.

• Shorthand / longhand groups such as font/font-*, background/background-*, padding/padding-*
• Groups that share a common prefix, such as text-* (e.g. text-align, text-decoration)

Basic form: “group abbreviation” + “abbreviation of the sub-property name”

Some examples:

Directional form: “group abbreviation” + - + “direction”

• Side properties that indicate a direction specify it with a hyphenated (-) suffix.
• inline / block become x / y.

Directional exception: for p and m only, the first hyphen is omitted

For padding and margin, notations like pt, px, my are widely adopted across CSS frameworks, so the first hyphen is omitted.

No collisions between group abbreviations

An abbreviation used by one group must not be reused by another group.

NG example: abbreviating flex to fx, then flex-shrink to fsh. (This breaks the consistency of the fx group.)

max- / min- Properties

max- and min- prefixes retain their hyphen.

Other Properties

For the remaining properties, abbreviation follows the criteria below.

1. Single word: use as-is or abbreviate
2. Hyphenated, or 6 characters or more: abbreviate using Emmet style or to a degree still easily recognizable

Reusing one-character abbreviations

For one-character properties that do not form a group, the character can be reused as the front half of another hyphenated abbreviation. It can also be reused when the property has only directional sub-properties, as long as it does not collide with directional suffixes.

Here are some examples.

Abbreviation Rules for {value}

This section describes the abbreviation rules for the {value} portion of a Property Class -{prop}:{value}.

Basic rule: use the actual CSS value as-is

The {value} portion is not abbreviated in principle. Since {prop} is already abbreviated, keeping {value} intact allows the combination to hint at the original property.

.-d:none          → display: none;
.-d:inline-flex   → display: inline-flex;
.-pos:relative    → position: relative;
.-ta:center       → text-align: center;
.-fx:1            → flex: 1;
.-fxd:column      → flex-direction: column;

When using a token value

If a matching token exists, use the token value (the {value} portion of --{token}--{value}).

.-c:text-2        → color: var(--text-2);
.-fz:l            → font-size: var(--fz--l);
.-p10             → padding: var(--s10);
.-fw:bold         → font-weight: var(--fw--bold);
.-bdrs:20         → border-radius: var(--bdrs--20);
.-bxsh:10         → box-shadow: var(--bxsh--10);

Like positive tokens, tokens whose value is -{NUM} also have the value concatenated as-is into the variable name.

.-o:-10          → opacity: var(--o---10);
.-o:-20          → opacity: var(--o---20);

Value notation rules

Units, minus signs, and decimal points are basically kept as-is when turned into a class.

.-w:100%        → width: 100%;
.-h:100%        → height: 100%;
.-z:-1          → z-index: -1;
.-ar:16/9       → aspect-ratio: 16/9;

Decimal Property Classes are not included in the core, but if you want to turn a fixed value like opacity: 0.75 into a class, you can add CSS like the following.

.-o\:0\.75{opacity: 0.75;}

/* → used as <div class="-o:0.75"> */

Long keyword values can be abbreviated if still understandable

As an exception, values that are 6 characters or more and whose abbreviation is still obviously meaningful may be abbreviated.