Basic : How to Use AliasCSS

If you know CSS , then you already know AliasCSS. AliasCSS uses class attribute of element for styling. And use your existing knowledge of core css in different way.It allow you to style you webpage without leaving the page your are working on. It allows you to apply css property and value in the form of class name. And you can also use aliascss along with your custom css or css frameworks like bootstrap.

Two className Category concept in AliasCSS

In aliasCSS conceptually we can divide className is two categories.

1. Static Classnames These are the classnames which are created out of property which have fixed set of predefined values E.g display-flex, font-weight-900, align-items-center etc
2. Dynamic Classnames These are classnames which property has virtually unlimited number of possible values, such as colors, length, number, content.. E.g margin-200px, color-green, font-size-1.2em , border-1px-solid-e3e3e3

How to create AliasCSS classname out of your core css knowledge?

1. Static ClassName:

   To create a valid static aliascss classnames you simply replace ’:’ with ’-’ between property and value pairs. display:flex => display-flex , flex-direction:row => flex-direction-row , text-align: center => text-align-center font-weight:900 => font-went-900, text-decoration: var(--text-modify) => text-decoration--text-modify

   Shorthands/Alias(Any of given two method can be used)

   1. Generic Shorthand rules:for fast prototyping(Valid Only for static-classnames)

      To create a shorthand ,just take the first character from all words used in property-value pair and join them without ’-’, in property-value pair word can separated by ’-’ like in display:inline-flex and font-weight:900 or by space as in background-position: right bottom. we simply take first character of each word and make a classname. E.g display:flex => df , flex-direction:row => fdr , text-align: center => tac font-weight:900 => fw9, text-decoration: var(--text-modify) => td--text-modify //this is no longer static classname Every full semantic static classname have their corresponding shorthand classname in this method. when there is conflict for example align-content: stretch and align-content: start both can claim acs as their shorthand property, in this case we have acs for one and (acs2 or acs-2) next one , similarly if we have 3 or 4 we just add 3,4 to resolve the conflict. Please note there is vey negligible number of conflict and 99% of the time you wil never encounter that. And we always have our full semantic backup with 0% conflict in such cases.

   2. Another Method: Easy for reader and Maintainer (applicable for Dynamic classname also)

      This system is not applicable to every property-value pair , however cover almost all and most used ones. In this system we separate property value pair with - where left side of the ’-’ represent property and right side of ’-’ represent value. we then either use property alias or value alias or combine both.
      E.g display:flex => display-f, d-f,d-flex align-items:center => ai-c , ai-center, align-items-c flex-direction:column =>flex-direction-c ,fd-column, fd-c

   We recommend to use second method as much as possible for production, cause it is more readable and give some semi-semantic class-naming approach. You can use first method shorthand approach for quick testing and prototyping. However its upto you whichever suits your design pattern you can use it.

2. Dynamic ClassName:

   It similar to static classname , you have to keep value as it is and in some cases you need to know the writing rules of complex value such as color with alpha scale, custom color and other custom values. Few import Rules:-

   1. use ’—’ before the numeric value to make it negative. Eg margin--12px => margin:-12px, box-shadow--1px-1px-1px-black => box-shadow:-1px 1px 1px black

   2. '.' should always between digits. use 0.1rem not .1rem // it might create some issue.

   3. Try '0' and unit rather that just '0'. padding-0-0-12px-12px use padding-0px-0px-12px-12px , both will work in this case but always good practice to use 0 with unit.

   4. Every property in aliasCSS accepts css-vars eg. background--background-color-or-bg--background-color, font-size--text-xl -or-fs--text-xl. Try to use css-variables for complex values. you can always define css-variable in style attribute of the class containing element.

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

Lets take an Example
Lets say , you want h1 element to have color blue and font-size 3rem. we simply write class names to tell aliascss what property and value we want to apply using the class attribute of h1 tag as given below.

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

Here, we are applying style with class name, these class name also hold the property and value we want to apply. In short we are making class name out of css property and value we want to apply. e.g

    color:blue  => color-blue is a valid aliascss class name

Similarly we can also use short hand , we can replace color by c and fs for font-size, to make it short hand.

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

Both classnames(full-semantic classname and shorthand className) in the above example are doing exactly same thing and have same style applied.

Here are other example class name definition.

Basic Guideline to use aliascss.

1. Every AliasCSS class name have single property but can have one or more values. margin-1px-20px =>margin:10px 20px.
2. widely used properties like height, length, color, padding, margin, border etc has its corresponding shorthand or alias. display-flex and df or ‘d-f’ are exactly same. You can use both at same time. Use combination of shorthand for popular property and full semantic for rare used property when creating classnames.
3. You grouping feature to use re-usable utility classname and create component and variant on the go.
4. Take help of css-variable , for complex value and when you need to make value dynamic which can be updated or modify using javascript or other server side language.
5. Using aliascss.config.js and frontend tools, you can virtually create you own unique design system.

Some widely Examples

display:flex=> display-flex or d-f or df or display-f or d-flex
background-position: right bottom => background-position-right-bottom or background-position-rb or bgp-right-bottom or bgprb or bgp-rb
animation-timing-function: ease-in-out => animation-timing-function-ease-in-out or atf-ease-in-out or atf-eio or atfeio 

🚀 AliasCSS Brief Feature Guide

🧠 1. Philosophy

AliasCSS is built on 3 principles:

1. Atomic → one class = one property
2. Composable → combine everything
3. Deterministic → strict grammar → predictable output

⚙️ 2. Core Grammar (CRITICAL)

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

👉 Every class is parsed in this exact order.

🧩 3. Utility System (Atomic Core)

✅ HTML

<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

📏 4. Value System (Strict Parsing)

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 via Variables

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

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

🎨 5. Color System (Optimized Syntax)

Hex 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

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

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

🔤 6. Property Alias System

🧠 Concept

AliasCSS maps: use full property for unsure or confuse alias

alias → full CSS property

Examples

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

.p-20px { padding: 20px; }
.fs-16px { font-size: 16px; }
.bgc-red { background-color: red; }

Full Property Equivalent

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

.padding-20px { padding: 20px; }
.font-size-16px { font-size: 16px; }
.background-color-red { background-color: red; }

🔥 Rule

If alias unknown → Switch to full property name

⚠️ Best Practice

• Use alias for common properties
• Use full name for rare/complex

🔗 7. Selector System (VERY IMPORTANT)

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;
}

🎯 8. Magic & (Selector Positioning)

Default Behavior

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

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

With &

<div class="_.card&-c-blue"></div>

.card ._.card\&-c-blue {
  color: blue;
}

🔥 Rule

& controls where the class is inserted

⚡ 9. Pseudo System

Example

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

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

Chaining

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

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

🧠 10. Grouping System (VERY IMPORTANT)

Basic Group

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

.p-20px { padding: 20px; }
.c-red { color: red; }

Pseudo Group

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

.--hover-c-red:hover { color: red; }
.--hover-bgc-blue:hover { background-color: blue; }

🔥 Insight

Grouping expands into multiple classes internally

🧱 11. Component System (—as)

Example

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

Compiled CSS

.card div {
  padding: 20px;
}

Multi-Class Export

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

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

🔥 Rule

—as replaces class anchor, NOT selectors

🔁 12. Multi-Selector

<div class="_.someClass_div,_.ban_em[c-red]"></div>
<!-- use class="--is(_div,_ul)[c-red]" to select both selector under current className  -->

_.someClass_div,_.ban_ul[c-red] .someClass div, .ban em {
  color: red;
}

With —as

<div class="_div,_.ban_ul[c-red]--as-[menu-a,item-a]"></div>

.menu-a div,.ban ul {
  color: red;
}
.item-a div,.ban ul {
  color: red;
}

🎬 13. Keyframes System (Advanced)

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;
}

Group Keyframes

<div keyframes-move="@[0,50]-[left-0,top-0] @100-[left-100px,top-100px]"></div>

@keyframes move {
  0%,50% { left: 0; top: 0; }
  100% { left: 100px; top: 100px; }
}

🧬 14. Layer System (DETAILED)

🧠 Concept

AliasCSS uses CSS @layer internally.

Example

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

Compiled CSS

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

Multiple Layers

<div class="@[base,xs]-d-flex"></div>

Compiled CSS

@layer base {
  @media (max-width: ...) {
    .class {
      display: flex;
    }
  }
}

🔥 Rule

Order defines nesting:
@[base,xs] → base → xs

🎛 15. Media System

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

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

🌍 16. Global Class System

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

.card {
  padding: 20px;
  background-color: blue;
}

🌐 17. Runtime (CDN)

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

Behavior

• scans DOM
• compiles classes
• injects CSS
• watches changes

🧠 18. Parsing Priority

1. @layer
2. media
3. pseudo
4. selector
5. property
6. value

🏁 Final Insight

AliasCSS is:

A full CSS language with compiler-level abstraction

🚀 Final Take

AliasCSS is :

• Atomic CSS ✅
• Selector engine ✅
• Component system ✅
• Animation DSL ✅
• Runtime compiler ✅
• Layer architecture ✅

🔥 Final Statement

AliasCSS is closer to a CSS programming language than a framework.