Basic Usage

If you already know CSS, you already understand the core idea behind AliasCSS. AliasCSS lets you write CSS through class names directly in your markup, so you can style elements without switching back and forth between HTML and a separate stylesheet.

In AliasCSS, a class name represents a CSS property-value pair. You can use it on its own, alongside custom CSS, or together with other frameworks such as Bootstrap.

Classname types

AliasCSS class names can be understood in two categories:

1. Static class names

Static class names are based on CSS properties that use a fixed set of predefined values.

Examples:

• display-flex
• font-weight-900
• align-items-center

2. Dynamic class names

Dynamic class names are based on properties whose values can vary freely, such as length, color, number, or complex values.

Examples:

• margin-200px
• color-green
• font-size-1.2em
• border-1px-solid-e3e3e3

Core idea

To create an AliasCSS class name from normal CSS, replace the : between property and value with -.

Examples:

• display: flex → display-flex
• flex-direction: row → flex-direction-row
• text-align: center → text-align-center
• text-decoration: var(--text-modify) → text-decoration--text-modify

Static class names

For static values, the full semantic class name is usually the most direct format.

<div class="display-flex flex-direction-row text-align-center"></div>

Shorthand options

AliasCSS supports two shorthand approaches.

Method 1: Generic shorthand

This method is mainly useful for rapid prototyping. It works best with static class names.

Rule: Take the first character of each word in the property and value, then combine them.

Examples:

• display: flex → df
• flex-direction: row → fdr
• text-align: center → tac
• font-weight: 900 → fw9

If two declarations produce the same shorthand, AliasCSS resolves the conflict by appending a number such as 2, 3, or 4. Or better provide value that clears the inteneded classname you want to build by uisng /( only applicable for conflicted shorthand classNames).

Examples:

• acs => .acs{align-content: start}
• acs2 => .acs2{align-content: stretch}
• acs/start => .acs/start{align-content: start}
• acs/stretch => .acs2{align-content: stretch}

Use this method when speed matters more than readability.

Method 2: Alias-based shorthand

This is the recommended shorthand style for production because it is easier to read and maintain. It also works for many dynamic class names.

Rule: Use a short alias for the property, the value, or both.

Examples:

• display: flex → display-f, d-flex, d-f
• align-items: center → align-items-c, ai-center, ai-c
• flex-direction: column → flex-direction-c, fd-column, fd-c

Dynamic class names

Dynamic class names follow the same general pattern, but the value is written directly into the class name.

Examples:

• margin: 12px → margin-12px
• color: green → color-green
• font-size: 3rem → font-size-3rem

For complex values such as shadows, gradients, and custom colors, AliasCSS uses strict writing rules.

Important rules

1. Use -- before a numeric value to make it negative.
2. Keep decimal points between digits, for example 0.1rem instead of .1rem.
3. Prefer 0px, 0rem, or another explicit unit instead of bare 0 when writing multi-value utilities.
4. Every property can use CSS variables.

Examples:

• margin--12px → margin: -12px
• box-shadow--1px-1px-1px-black → box-shadow: -1px 1px 1px black

CSS variable example

<h1
  class="color--fg1-custom-color background--bg1-custom-color font-size-3rem"
  style="
    --fg1-custom-color: color-mix(in srgb, red, white 20%);
    --bg1-custom-color: hsl(from var(--primary) h s calc(l - 20%));
  "
>
  Hello, World
</h1>

First example

Suppose you want an h1 with blue text and a font size of 3rem.

<h1 class="color-blue font-size-3rem">Hello, World</h1>

This works because each class name directly describes the CSS declaration:

• color-blue → color: blue
• font-size-3rem → font-size: 3rem

You can also use shorthand:

<h1 class="c-blue fs-3rem">Hello, World</h1>

Both versions generate the same styling.

Negative values

When you place -- before a numeric or length value, AliasCSS treats it as negative.

<div class="m-100px"></div>
<div class="m--100px"></div>
<div class="m-100px--100px-100px--100px"></div>
<div class="bxs-1px--1px-2px-3px-red"></div>

These map to:

margin: 100px;
margin: -100px;
margin: 100px -100px 100px -100px;
box-shadow: 1px -1px 2px 3px red;

Common examples

Basic guidelines

1. One AliasCSS class always represents one CSS property, but that property can contain multiple values.
2. Common properties such as margin, padding, color, border, height, and width usually have shorthand aliases.
3. You can mix shorthand and full semantic classes in the same element.
4. Use CSS variables for complex or dynamic values.
5. With aliascss.config.js and frontend tooling, you can shape AliasCSS into your own design system.

Examples:

margin-10px-20px           => margin: 10px 20px
display-flex               => display: flex
d-f                        => display: flex
background-position-rb     => background-position: right bottom
atf-eio                    => animation-timing-function: ease-in-out

AliasCSS Feature Overview

Philosophy

AliasCSS is built on three ideas:

1. Atomic: one class maps to one property.
2. Composable: combine classes freely.
3. Deterministic: strict grammar gives predictable output.

Parsing order

AliasCSS parses every class in the following order:

@layer → media → pseudo → selector → property → value

This order is important because it defines how each utility is compiled.

Atomic utilities

Example:

<div class="d-flex p-20px bgc-blue"></div>

Compiled CSS:

.d-flex { display: flex; }
.p-20px { padding: 20px; }
.bgc-blue { background-color: blue; }

Rule:

Each class = exactly one CSS declaration

Value system

Length values

<div class="p-20px m-1rem w-100p"></div>

.p-20px { padding: 20px; }
.m-1rem { margin: 1rem; }
.w-100p { width: 100%; }

Negative values

<div class="mt--20px"></div>

.mt--20px { margin-top: -20px; }

Complex values with variables

<div class="bg--gradient" style="--gradient: linear-gradient(red, blue)"></div>

.bg--gradient { background: var(--gradient); }

Color system

Hex values without #

<div class="c-fff bgc-0f172a"></div>

.c-fff { color: #fff; }
.bgc-0f172a { background-color: #0f172a; }

RGBA

<div class="c-rgba-255-0-0-0.5"></div>

.c-rgba-255-0-0-0.5 { color: rgba(255, 0, 0, 0.5); }

Border shorthand

<div class="b-1px-solid-e3e3e3"></div>

.b-1px-solid-e3e3e3 { border: 1px solid #e3e3e3; }

Property alias system

AliasCSS lets you use either the full property name or a shorter alias.

Examples:

<div class="p-20px fs-16px bgc-red"></div>

Equivalent full property version:

<div class="padding-20px font-size-16px background-color-red"></div>

Rule:

If you don't know the alias, use the full property name.

Best practice:

• Use aliases for common properties.
• Use full names for uncommon or complex properties.

Selectors

AliasCSS is not limited to plain utilities. It also supports selector-based patterns.

Element selector

<div class="_div-c-red"></div>

._div-c-red div {
  color: red;
}

Nested selector

<div class="_div_h4-fs-20px"></div>

._div_h4-fs-20px div h4 {
  font-size: 20px;
}

Combinators

<div class="_div__h4-c-red"></div>
<div class="_div___h4-c-blue"></div>
<div class="_div____h4-c-green"></div>

._div__h4-c-red div > h4 { color: red; }
._div___h4-c-blue div + h4 { color: blue; }
._div____h4-c-green div ~ h4 { color: green; }

Attribute selector

<div class="[data-state=open]-d-flex"></div>

[data-state="open"] {
  display: flex;
}

Pseudo states

Example:

<button class="--hover-bg-blue"></button>

.--hover-bg-blue:hover {
  background-color: blue;
}

Chained example:

<div class="--hover--focus-c-red"></div>

.--hover--focus-c-red:hover:focus {
  color: red;
}

Grouping

Grouping expands multiple utilities from a single syntax.

Basic group

<div class="[p-20px,c-red]"></div>

Pseudo group

<div class="--hover[c-red,bgc-blue]"></div>

Conceptually, AliasCSS expands grouped values into separate utilities internally.

Components with --as

Example:

<div class="_div[p-20px]--as-card"></div>

Compiled CSS:

.card div {
  padding: 20px;
}

Multi-export example:

<div class="[p-20px]--as-[card,box]"></div>

.card { padding: 20px; }
.box { padding: 20px; }

Rule:

--as replaces the class anchor, not the selector logic

Keyframes

Example:

<div keyframes-fade="@0-opacity-1 @100-opacity-0" class="an-fade adu-1s"></div>

Compiled CSS:

@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
 
.an-fade {
  animation-name: fade;
}

Layers and media

Layer

<div class="@base-d-flex"></div>

@layer base {
  .\@base-d-flex {
    display: flex;
  }
}

Media

<div class="md-d-flex"></div>

@media (min-width: ...) {
  .md-d-flex {
    display: flex;
  }
}

Rule:

Order defines nesting: @layer → media → pseudo → selector → property → value

Runtime usage

AliasCSS can also run directly from a CDN script.

<script defer src="https://cdn.jsdelivr.net/npm/aliascss@latest/dist/aliascss.js"></script>

Runtime behavior:

• Scans the DOM
• Compiles class names
• Injects CSS
• Watches for changes

Mental model

AliasCSS is more than a utility class library. It gives you a strict grammar for writing CSS directly in class names, including utilities, selectors, states, grouping, components, animation, and layers.

AliasCSS is closer to a CSS authoring language than a traditional utility framework.