@fwkui/x-css

v1.0.3

Published

3 months ago

Auto generate css

Downloads

0High
0Medium
0Low

vuits24

css auto generate css

Hướng dẫn sử dụng x-css

x-css là một thư viện CSS-JavaScript nhỏ gọn và hiệu quả để xây dựng giao diện người dùng phản ứng (reactive user interfaces). Thư viện này cung cấp các công cụ để quản lý trạng thái (state management) và thao tác với DOM một cách tự động và hiệu quả.

Cài đặt

Để sử dụng x-css, bạn chỉ cần import nó vào dự án của mình:

<script type="module">
  import $ from "https://unpkg.com/@fwkui/[email protected]/index.js";
  $.cssObserve(document);
</script>

Hướng dẫn sử dụng xCSS

xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn và hiệu quả thông qua các class name đặc biệt. Sau khi học, bạn sẽ:

Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
Kiểm soát media query, @layer, !important, selector giả (pseudo) và tổ hợp nhiều thuộc tính trong một class

Lưu ý: Danh sách viết tắt thuộc tính và giá trị sẽ có ở phía dưới.

Thiết kế mới: Design Tokens (CSS Variables)

Mục đích: Giảm độ dài và phức tạp của giá trị CSS trong các class, đảm bảo nhất quán branding và dễ bảo trì khi màu sắc, spacing, shadow, gradient… thay đổi.
Cách khai báo:
- Đặt các biến trong thẻ style ở đầu tài liệu hoặc trong một file CSS được import trước khi dùng xCSS.
- Dùng cú pháp CSS biến bắt đầu bằng --, ví dụ: --bg-gradient-login, --panel, --shadow-card, --color-primary, --spacing-md, …
Cách dùng trong xCSS:
- Dùng trực tiếp qua braces: bg{var(--bg-gradient-login)} hoặc bxsh{var(--shadow-card)} hoặc p{var(--spacing-md)}.
- Dùng alias có sẵn để biến đổi nhanh: bgc--panel hoặc c--primary (nếu có alias tương ứng với token).
- Có thể có fallback bằng var(--name, fallbackValue) để tương thích với trình duyệt cũ.
Lưu ý: CSS biến phải được load trước khi render các class dùng biến đó.
Ví dụ khai báo tokens (thêm vào đầu tài liệu hoặc một file style được import sớm):

<style>
  :root {
    --bg-gradient-login: linear-gradient(#6a11cb, #2575fc);
    --panel: #ffffff;
    --shadow-card: 0 10px 20px rgba(0,0,0,.15);
    --radius-card: 12px;
    --color-primary: #0070f3;
    --space-md: 16px;
  }
</style>

Ví dụ dùng token trong trang login:

<body class="bg{var(--bg-gradient-login)} h100vh w100% dF jcC aiC">
  <main class="w360px md:w420px lg:w480px bgcWhite p28px bxsh{var(--shadow-card)} bdra12px">
    ...
    <button class="w100% p12px cWhite bdN bdra8px bxsh{var(--shadow-card)}" style="--color-primary: #0070f3;">
      Đăng nhập
    </button>
  </main>
</body>

Gợi ý migrates và alias:
- Nếu có alias như bgc--panel hoặc c--primary, bạn có thể định nghĩa token tương ứng và sử dụng đồng thời.
- Ví dụ: :root { --panel: #fff; } và dùng bgc--panel hoặc bgc{var(--panel)} tùy cách build.
Xem thêm trong phần ví dụ và trang Design Tokens dưới đây để tham khảo cách tích hợp.

Cú pháp tổng quát

[MQ:][layer]<property><value>[@selector]

Lưu ý quan trọng: <property><value> là bắt buộc - phải có cả thuộc tính CSS và giá trị CSS.

Ví dụ cú pháp đúng:

cRed - Màu đỏ (layer 0)
5cRed - Màu đỏ ở layer 5
md:cRed - Màu đỏ trên màn hình trung bình
md:5cRed - Màu đỏ ở layer 5 trên màn hình trung bình

Các thành phần:

1. Media Query (MQ) - Tùy chọn

xs: - Màn hình nhỏ (max-width: 575px)
sm: - Màn hình nhỏ (min-width: 576px)
md: - Màn hình trung bình (min-width: 768px)
lg: - Màn hình lớn (min-width: 992px)
xl: - Màn hình rất lớn (min-width: 1200px)
2xl: - Màn hình cực lớn (min-width: 1400px)
sma: - Màn hình nhỏ trở xuống (max-width: 768px)
mda: - Màn hình trung bình trở xuống (max-width: 992px)
lga: - Màn hình lớn trở xuống (max-width: 1200px)
xla: - Màn hình rất lớn trở xuống (max-width: 1400px)

2. Layer - Tùy chọn

1 đến 19 - Thứ tự ưu tiên CSS layer (số càng cao ưu tiên càng cao)
Mặc định: 0 (layer 0)
Mục đích: gom nhóm quy tắc theo tầng (base, component, utilities, overrides…)

3. Property (Thuộc tính) - BẮT BUỘC

Viết thường, có thể là tên đầy đủ hoặc viết tắt
Không có dấu - trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu -w
Ví dụ: w (width), h (height), c (color), bg (background)

4. Value (Giá trị) - BẮT BUỘC

Số: 10, -4.5, 0.5, có thể kèm đơn vị: 10px, 1.5rem, 100%
Giá trị đặt tên bắt đầu bằng chữ hoa: Red, Center, Block, Fixed, None
Giá trị trong ngoặc nhọn để ghi nguyên văn: c{rgb(255,0,0)}, bg{linear-gradient(...)}
Biến CSS: bắt đầu bằng --: c--primary → color: var(--primary)
Quan trọng: thêm ! ngay trước giá trị để ra !important: w!10px → width: 10px !important
Hàm: dùng dạng TitleCase + (...) và dùng dấu ; thay cho khoảng trắng:
- wCalc(100%;-;20px) → width: calc(100% - 20px)
- tTranslate(50%;,;-50%) → transform: translate(50% , -50%)

5. Selector - Tùy chọn

Bắt đầu bằng @
Dấu ; thay thế cho dấu cách
Có thể dùng giả lớp/giả phần tử, chọn phần tử con, hoặc kết hợp
Ví dụ: @:hover, @:focus, @:active, @>a, @.btn;:hover

Ví dụ sử dụng

Cơ bản

<!-- Màu đỏ -->
<div class="cRed">Văn bản màu đỏ</div>

<!-- Chiều rộng 100px -->
<div class="w100px">Chiều rộng 100px</div>

<!-- Padding 20px -->
<div class="p20px">Padding 20px</div>

<!-- Opacity 50% -->
<div class="opc50%">Độ trong suốt 50%</div>

<!-- Font size 14px -->
<div class="fns14px">Cỡ chữ 14px</div>

Với Media Query

<!-- Màu đỏ trên màn hình lớn -->
<div class="lg:cRed">Màu đỏ trên desktop</div>

<!-- Ẩn trên màn hình nhỏ -->
<div class="xs:vHidden">Ẩn trên mobile</div>

<!-- Responsive width -->
<div class="w100% md:w50% lg:w33%">Responsive width</div>

Với Layer

<!-- Layer ưu tiên cao -->
<div class="5cRed">Màu đỏ ưu tiên cao</div>

<!-- Layer ưu tiên thấp -->
<div class="1cBlue">Màu xanh ưu tiên thấp</div>

<!-- Kết hợp layer và media query -->
<div class="md:7cGreen">Màu xanh layer 7 trên desktop</div>

Với Selector

<!-- Hover effect -->
<div class="cRed@:hover">Đỏ khi hover</div>

<!-- Focus effect -->
<input class="bdw2px@:focus" placeholder="Border khi focus" />

<!-- Child selector -->
<div class="cBlue@>a">Màu xanh cho thẻ con a</div>

<!-- Complex selector -->
<div class="[email protected];:hover">Màu đỏ khi hover button</div>

Với giá trị đặc biệt

<!-- !important -->
<div class="c!red">Màu đỏ !important</div>

<!-- CSS Variable -->
<div class="c--primary">Màu từ CSS variable</div>

<!-- Giá trị tùy chỉnh -->
<div class="w{calc(100%;-;20px)}">Chiều rộng tính toán</div>

<!-- Hàm CSS -->
<div class="wClamp(280px;640px;100%)">Width với clamp</div>

<!-- Box shadow phức tạp -->
<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Shadow phức tạp</div>

Kết hợp nhiều thuộc tính với `&`

<!-- Nhiều thuộc tính cùng lúc -->
<div class="cRed&fw700&taC">Màu đỏ, font-weight 700, căn giữa</div>

<!-- Flexbox layout -->
<div class="dF&aiC&jcSp">Flexbox center và space-between</div>

<!-- Padding và margin -->
<div class="p8px&m0">Padding 8px và margin 0</div>

<!-- Kết hợp với selector -->
<div class="cRed&fw700@:hover">Màu đỏ và font-weight 700 khi hover</div>

Quy tắc ưu tiên & va chạm

@layer: lớp số lớn thắng lớp số nhỏ (khi cùng nguồn gốc/specificity)
Specificity của selector: selector cụ thể hơn thắng
Thứ tự xuất hiện trong cùng layer và cùng specificity
!important luôn thắng các quy tắc thường trong cùng phạm vi cascade

Ví dụ: 5cBlue vs 9cRed → 9cRed thắng. Nhưng 5cBlue! (viết c!Blue hoặc c!{blue}) có thể tiếp tục thắng nếu cùng layer/scope.

Quy tắc quan trọng

✅ Hợp lệ

cRed - Màu đỏ (property: c, value: Red)
w10px - Chiều rộng 10px (property: w, value: 10px)
md:cRed - Màu đỏ trên màn hình trung bình (MQ: md, property: c, value: Red)
2w100px - Chiều rộng 100px ở layer 2 (layer: 2, property: w, value: 100px)
cRed@:hover - Màu đỏ khi hover (property: c, value: Red, selector: @:hover)
w!100px - Chiều rộng 100px !important (property: w, value: !100px)
c{red} - Màu đỏ với giá trị tùy chỉnh (property: c, value: {red})
cRed&w700 - Kết hợp nhiều thuộc tính (property: c, value: Red, property: w, value: 700)
wCalc(100%;-;20px) - Hàm CSS với dấu ; (property: w, value: Calc(100%;-;20px))

❌ Không hợp lệ

Cred - Chữ C viết hoa ở thuộc tính (property phải viết thường)
C{red} - Chữ C viết hoa ở thuộc tính (property phải viết thường)
cRed} - Thiếu dấu mở ngoặc (syntax lỗi)
c-red - Dấu gạch ngang không được phép (property không được có dấu -)
W-10px - Chữ W viết hoa và dấu gạch ngang (property phải viết thường)
w-!10px - Dấu gạch ngang không được phép (property không được có dấu -)
cRed @:hover - Có dấu cách trong class name (không được có dấu cách)
c - Thiếu value (bắt buộc phải có cả property và value)
Red - Thiếu property (bắt buộc phải có cả property và value)

Lỗi phổ biến & cách tránh

Dùng chữ hoa ở đầu thuộc tính → sai. Thuộc tính (property) phải là chữ thường hoặc --var
Thiếu property hoặc value → sai. Cả hai đều bắt buộc phải có
Nhầm dấu - và !: w-!10px là lỗi. Hãy dùng w!10px
Quên ; trong giá trị có khoảng trắng: ff{Courier New} → nên viết ff{Courier;New}
Selector có khoảng trắng phải dùng ; và sẽ được đổi lại khi xuất
Không có bảng viết tắt → trình biên dịch không biết dịch ta thành text-align

Lưu ý

Property và Value bắt buộc - Mỗi class phải có cả thuộc tính và giá trị CSS
Tên class phải viết thường - Chỉ property viết thường, value có thể có ký tự HOA
Không dùng dấu cách - Dùng dấu ; thay thế
CSS.supports validation - Tất cả class phải được CSS hỗ trợ
Thứ tự ưu tiên - Layer số cao hơn sẽ có ưu tiên cao hơn
Media Query - Chỉ áp dụng trong khoảng màn hình tương ứng
Khoảng trắng trong giá trị dùng dấu ;. Ví dụ: ff{Courier;New;monospace} → font-family: Courier New, monospace

Lời khuyên từ kinh nghiệm thực tế

🎯 Nguyên tắc đặt tên class

✅ Nên làm:

Ngắn gọn, dễ đọc: cRed, w100px, p16px
Sử dụng viết tắt chuẩn: dF thay vì displayFlex (d: display, F: Flex)

❌ Tránh:

Tên quá dài: wCalc(100%;-;20px;-;30px;-;10px) → nên dùng CSS variable
Giá trị phức tạp: bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset} → nên định nghĩa qua biến
Thuộc tính lặp lại: cRed, cBlue, cGreen → nên dùng color palette

🎨 Quản lý giá trị phức tạp

Sử dụng CSS Variables cho giá trị dài:

:root {
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
  --border-radius: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

<!-- Thay vì viết dài -->
<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
  <!-- Nên dùng biến -->
  <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
</div>

Tạo component classes cho pattern thường dùng:

<!-- Thay vì lặp lại nhiều lần -->
<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
  <!-- Nên tạo component class -->
  <div class="card"></div>
</div>

📱 Responsive Design Best Practices

Sử dụng mobile-first approach:

<!-- Base styles cho mobile -->
<div class="w100% p8px">
  <!-- Override cho desktop -->
  <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
</div>

Nhóm breakpoints logic:

<!-- Layout chính -->
<div class="dB md:dF">
  <!-- Spacing responsive -->
  <div class="p8px md:p16px lg:p24px">
    <!-- Typography responsive -->
    <div class="fns14px md:fns16px lg:fns18px"></div>
  </div>
</div>

🎭 Layer Management

Tổ chức layers theo hierarchy:

<!-- Base styles (0) -->
<div class="cBlack fns16px">
  <!-- Component styles (1-5) -->
  <div class="2btnPrimary">
    <!-- Utility styles (6-10) -->
    <div class="8m16px">
      <!-- Override styles (11-19) -->
      <div class="15cRed"></div>
    </div>
  </div>
</div>

🔧 Performance Tips

Tránh over-engineering:

<!-- Đơn giản và hiệu quả -->
<div class="dF&aiC&p16px">
  <!-- Thay vì phức tạp không cần thiết -->
  <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
</div>

Sử dụng shorthand khi có thể:

<!-- Margin shorthand -->
<div class="m16px">
  <!-- margin: 16px -->
  <div class="mt8px&mb8px">
    <!-- margin-top: 8px; margin-bottom: 8px -->

    <!-- Padding shorthand -->
    <div class="p16px">
      <!-- padding: 16px -->
      <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
    </div>
  </div>
</div>

🎨 Design System Integration

Tạo design tokens:

:root {
  /* Colors */
  --color-primary: #0070f3;
  --color-secondary: #7928ca;
  --color-success: #0070f3;
  --color-warning: #f5a623;
  --color-error: #e00;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Typography scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
}

Sử dụng semantic naming:

<!-- Thay vì màu cụ thể -->
<div class="cBlue">
  <!-- Nên dùng semantic -->
  <div class="cPrimary">
    <div class="cSuccess">
      <div class="cError"></div>
    </div>
  </div>
</div>

🚀 Maintenance Tips

Documentation cho team:

<!-- Component: Button Primary -->
<!-- Usage: <button class="btnPrimary">Click me</button> -->
<!-- Variants: btnSecondary, btnDanger, btnGhost -->
<button class="btnPrimary">Click me</button>

Consistent naming convention:

<!-- Layout -->
<div class="container">
  <div class="row">
    <div class="col">
      <!-- Components -->
      <div class="card">
        <div class="btn">
          <div class="input">
            <!-- Utilities -->
            <div class="textCenter">
              <div class="mAuto">
                <div class="dNone"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

💡 Pro Tips

Luôn test trên mobile trước - Mobile-first approach
Sử dụng browser dev tools - Kiểm tra CSS output
Tạo style guide - Document các pattern thường dùng
Code review - Đảm bảo consistency trong team
Performance monitoring - Theo dõi CSS bundle size
Accessibility first - Luôn nghĩ đến người dùng khuyết tật

Ví dụ tổng hợp

HTML

<div
  class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
>
  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
</div>

CSS (phát sinh ý tưởng)

@media (min-width: 768px) {
  @layer l7 {
    .md\:7\.dF\&aiC\&jcSp\:where(*) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      background-color: var(--panel);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
      color: var(--fg);
    }
    .md\:7\.wClamp\(120px\;240px\;100\%\) {
      width: clamp(120px, 240px, 100%);
    }
  }
}
.cBlue {
  color: blue;
}
.w\!120px {
  width: 120px !important;
}
.h40px {
  height: 40px;
}
.bdra8px {
  border-radius: 8px;
}
.cWhite {
  color: #fff;
}
.bgc\#0070f3 {
  background-color: #0070f3;
}

Bảng tra cứu nhanh

Media Query

| Ký hiệu | Kích thước màn hình | | ------- | ------------------- | | xs: | ≤ 575px | | sm: | ≥ 576px | | md: | ≥ 768px | | lg: | ≥ 992px | | xl: | ≥ 1200px | | 2xl: | ≥ 1400px |

Layer

| Ký hiệu | Mô tả | | ------- | ---------------------------------------------- | | 0 | Layer mặc định (ưu tiên thấp) | | 1-19 | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |

Giá trị đặc biệt

| Ký hiệu | Ý nghĩa | | ------- | ----------------- | | ! | !important | | -- | CSS Variable | | {} | Giá trị tùy chỉnh | | ; | Thay thế dấu cách |

Câu hỏi thường gặp (FAQ)

Hỏi: Tại sao phải viết hoa chữ cái đầu giá trị dạng từ khoá?

Đáp: Để phân biệt p (thuộc tính viết thường) và v (giá trị đặt tên). Tránh nhầm red (giá trị) với một thuộc tính giả định.

Hỏi: Dùng dấu gì cho khoảng trắng?

Đáp: Dùng dấu ; trong giá trị và selector để không phá vỡ tên class.

Hỏi: Tôi muốn thêm breakpoint mới?

Đáp: Bổ sung mã tiền tố (ví dụ xxl:) và map sang @media (min-width: …) trong cấu hình biên dịch.

Hỏi: Có cần escape khi viết trong HTML?

Đáp: Không. Bạn viết thô như quy ước. Bộ biên dịch sẽ escape khi phát sinh CSS.

Bảng tra cứu đầy đủ thuộc tính và giá trị xCSS

Cấu trúc dữ liệu

Viết tắt: Ký hiệu ngắn gọn để sử dụng trong class
Thuộc tính CSS: Tên đầy đủ của thuộc tính CSS
Giá trị viết tắt: Mapping từ ký hiệu sang giá trị CSS (nếu có)

1. Layout & Display

Display

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | d | display | b:block, ib:inline-block, i:inline, f:flex, if:inline-flex, t:table, it:inline-table, tcp:table-caption, tcell:table-cell, tcol:table-column, tcolg:table-column-group, tfg:table-footer-group, thg:table-header-group, trg:table-row-group, tr:table-row, fr:flow-root, g:grid, ig:inline-grid, c:contents, li:list-item |

Position

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------- | -------------------------------------------------------------- | | pos | position | s:static, f:fixed, a:absolute, r:relative, st:sticky |

Sizing

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------- | ---------------------------------------------------------------- | | w | width | mic:min-content, mac:max-content, fc:fit-content, f:100% | | h | height | mic:min-content, mac:max-content, fc:fit-content | | mw | max-width | - | | mxw | max-width | - | | mh | max-height | - | | miw | min-width | f:100%, mic:min-content, mac:max-content, fc:fit-content | | mih | min-height | f:100%, mic:min-content, mac:max-content, fc:fit-content | | blks | block-size | - | | ins | inline-size | - | | mbs | max-block-size | - | | mis | max-inline-size | - | | mibs | min-block-size | - | | misz | min-inline-size | - |

Positioning

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | -------------------- | ---------------- | | t | top | - | | r | right | - | | b | bottom | - | | l | left | - | | i | inset | - | | iblk | inset-block | - | | ibe | inset-block-end | - | | ibsta | inset-block-start | - | | ii | inset-inline | - | | iie | inset-inline-end | - | | iis | inset-inline-start | - |

2. Spacing

Margin

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------------- | ---------------- | | m | margin | - | | mt | margin-top | - | | mr | margin-right | - | | mb | margin-bottom | - | | ml | margin-left | - | | mblk | margin-block | - | | mbe | margin-block-end | - | | mbsta | margin-block-start | - | | min | margin-inline | - | | mie | margin-inline-end | - | | mista | margin-inline-start | - |

Padding

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------------- | ---------------------------------------------------------- | | p | padding | - | | pt | padding-top | - | | pr | padding-right | - | | pb | padding-bottom | - | | pl | padding-left | - | | pblk | padding-block | - | | pbe | padding-block-end | - | | pbs | padding-block-start | - | | pi | padding-inline | s:start, c:center, e:end, b:baseline, st:stretch | | pie | padding-inline-end | - | | pis | padding-inline-start | - |

3. Colors & Background

Color

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------- | ---------------------------- | | c | color | i:inherit, t:transparent |

Background

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | bg | background | - | | bgc | background-color | t:transparent, c:currentcolor | | bgi | background-image | - | | bgp | background-position | t:top, b:bottom, l:left, r:right, c:center, lt:left top, ct:center top, rt:right top, lc:left center, cc:center center, rc:right center, lb:left bottom, cb:center bottom, rb:right bottom | | bgpx | background-position-x | l:left, r:right, c:center | | bgpy | background-position-y | t:top, b:bottom, c:center | | bgr | background-repeat | r:repeat, x:repeat-x, y:repeat-y, s:space, rn:round, n:no-repeat, rs: repeat space, rr:repeat repeat, nr:no-repeat round | | bgs | background-size | c:contain | | bga | background-attachment | s:scroll, f:fixed, l:local | | bgbm | background-blend-mode | n:normal, m:multiply, s:screen, o:overlay, d:darken, l:lighten, cd:color-dodge, i:color-burn, hl:hard-light, sl:soft-light, di:difference, e:exclusion, h:hue, sa:saturation, c:color, lu:luminosity | | bgcl | background-clip | bb:border-box, pb:padding-box, cb:content-box, t:text | | bgo | background-origin | bb:border-box, pb:padding-box, cb:content-box |

4. Border

Border General

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | -------------- | ------------------------------------------------------------------------------------------------- | | bd | border | d:dotted, ds:dashed, db:double, g:groove, r:ridge, i:inset, o:outset | | bds | border-style | dt:dotted, ds:dashed, s:solid, db:double, g:groove, r:ridge, in:inset, out:outset | | bdc | border-color | - | | bdw | border-width | t:thin, m:medium, th:thick |

Border Sides

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------- | ---------------- | | bdt | border-top | - | | bdr | border-right | - | | bdb | border-bottom | - | | bdl | border-left | - |

Border Radius

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------------------- | ---------------- | | bda | border-radius | - | | bdra | border-radius | - | | bdtlr | border-top-left-radius | - | | bdtrr | border-top-right-radius | - | | bdblr | border-bottom-left-radius | - | | bdbrr | border-bottom-right-radius | - | | bdeer | border-end-end-radius | - | | bdesr | border-end-start-radius | - | | bdser | border-start-end-radius | - | | bdssr | border-start-start-radius | - |

Border Block/Inline

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------------- | ---------------------------------------------------------------------------------- | | bdblk | border-block | - | | bdblc | border-block-color | - | | bdble | border-block-end | - | | bdbls | border-block-start | - | | bdblst | border-block-style | d:dotted, ds:dashed, db:double, g:groove, r:ridge, i:inset, o:outset | | bdblwi | border-block-width | - | | bdi | border-inline | - | | bdic | border-inline-color | - | | bdie | border-inline-end | - | | bdista | border-inline-start | - | | bdistl | border-inline-style | - | | bdinw | border-inline-width | - |

5. Typography

Font

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fn | font | - | | ff | font-family | a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif, m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | | fnf | font-family | - | | fns | font-size | - | | fw | font-weight | - | | fnw | font-weight | - | | fnsty | font-style | - | | fnstr | font-stretch | - | | fnfs | font-feature-settings | - | | fnk | font-kerning | - | | fnlo | font-language-override | - | | fnos | font-optical-sizing | - | | fnp | font-palette | - | | fnsa | font-size-adjust | - | | fnsyn | font-synthesis | - | | fnsp | font-synthesis-position | - | | fnssc | font-synthesis-small-caps | - | | fnss | font-synthesis-style | - | | fnsw | font-synthesis-weight | - | | fnv | font-variant | - | | fnva | font-variant-alternates | - | | fnvc | font-variant-caps | - | | fnvea | font-variant-east-asian | - | | fnve | font-variant-emoji | - | | fnvl | font-variant-ligatures | - | | fnvn | font-variant-numeric | - | | fnvp | font-variant-position | - | | fnvs | font-variation-settings | - |

Text

| Viết tắt | Thuộc tính | -------- | ta | tal | td | tdc | tdl | tds | tdt | tdsi | teph | tec | tep | tes | ti | tj | tor | tol | trd | tsh | ttr | tuo | tup | tw | Giá trị viết tắt | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | text-align | s:start, e:end, l:left, r:right, c:center, j:justify, mp:match-parent, mc:-moz-center, wc:-webkit-center | | text-align-last | s:start, e:end, l:left, r:right, c:center, j:justify | | text-decoration | u:underline | | text-decoration-color | - | | text-decoration-line | u:underline, o:overline, lt:line-through, b:blink | | text-decoration-style | db:double, dt:dotted, ds:dashed, w:wavy | | text-decoration-thickness | ff:from-font | | text-decoration-skip-ink | - | | text-emphasis | - | | text-emphasis-color | - | | text-emphasis-position | or:over right, ol:over left, ur:under right, ul:under left, lo:left over, ru:right under, lu:left under | | text-emphasis-style | - | | text-indent | - | | text-justify | iw:inter-word, ic:inter-character, d:distribute | | text-orientation | m:mixed, u:upright, sr:sideways-right, sl:sideways-left, s:sideways, ugo:use-glyph-orientation | | text-overflow | c:clip, e:ellipsis | | text-rendering | op:optimizeSpeed, ol:optimizeLegibility, g:geometricPrecision | | text-shadow | - | | text-transform | c:capitalize, u:uppercase, l:lowercase, fw:full-width, fsk:full-size-kana | | text-underline-offset | - | | text-underline-position | u:under, l:left, r:right, ul:under left, ru:right under | | text-wrap | w:wrap, n:nowrap, b:balance, p:pretty |

Line & Spacing

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------- | ---------------- | | lh | line-height | - | | lts | letter-spacing | n:normal | | wrs | word-spacing | - | | lbrk | line-break | - | | wrb | word-break | - | | wrtm | writing-mode | - |

6. Flexbox

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fx | flex | i:0 1 auto, a:1 1 auto | | fxb | flex-basis | - | | fxd | flex-direction | r:row, rr:row-reverse, c:column, cr:column-reverse | | fxf | flex-flow | - | | fxg | flex-grow | - | | fxs | flex-shrink | - | | fxw | flex-wrap | w:wrap, wr:wrap-reverse, n:nowrap | | jc | justify-content | c:center, s:start, e:end, fs:flex-start, fe:flex-end, l:left, r:right, n:normal, sp:space-between, sa:space-around, se:space-evenly, st:stretch, sc:safe center, uc:unsafe center | | ai | align-items | n:normal, c:center, s:start, e:end, fs:flex-start, fe:flex-end, ss:self-start, se:self-end, b:baseline, fb:first baseline, lb:last baseline, sc:safe center, uc:unsafe center | | as | align-self | n:normal, c:center, s:start, e:end, ss:self-start, se:self-end, fs:flex-start, fe:flex-end, b:baseline, fb:first baseline, lb:last baseline, st:stretch, sc:safe center, uc:unsafe center | | ac | align-content | s:start, e:end, fs:flex-start, fe:flex-end, n:normal, b:baseline, fb:first baseline, lb:last baseline, sp:space-between, sa:space-around, se:space-evenly, st:stretch, sc:safe center, uc:unsafe center |

7. Grid

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | g | grid | - | | ga | grid-area | - | | gc | grid-column | f:1 / -1 | | gce | grid-column-end | - | | gcs | grid-column-start | - | | gr | grid-row | f:1 / -1 | | gre | grid-row-end | - | | grs | grid-row-start | - | | gt | grid-template | - | | gta | grid-template-areas | - | | gtc | grid-template-columns | s:subgrid | | gtr | grid-template-rows | s:subgrid | | gac | grid-auto-columns | mic:min-content, mac:max-content, mm:minmax(0, 1fr) | | gar | grid-auto-rows | mic:min-content, mac:max-content, mm:minmax(0, 1fr) | | gaf | grid-auto-flow | r:row, c:column, d:dense, rd:row dense, cd:column dense | | gap | gap | - | | rgap | row-gap | - | | colg | column-gap | - | | ji | justify-items | n:normal, st:stretch, c:center, s:start, e:end, fs:flex-start, fe:flex-end, ss:self-start, se:self-end, l:left, r:right, b:baseline, fb:first baseline, lb:last baseline, lr:legacy right, ll:legacy left, lc:legacy center, sc:safe center, uc:unsafe center | | js | justify-self | n:normal, st:stretch, c:center, s:start, e:end, fs:flex-start, fe:flex-end, ss:self-start, se:self-end, l:left, r:right, b:baseline, sc:safe center, uc:unsafe center | | pli | place-items | - | | pls | place-self | - | | plc | place-content | - |

8. Effects & Filters

Opacity & Visibility

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ------------ | ---------------- | | opc | opacity | - | | v | visibility | c:collapse |

Filter & Backdrop

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------- | ---------------- | | flt | filter | - | | bkdf | backdrop-filter | - |

Blend Modes

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | mbd | mix-blend-mode | n:normal, m:multiply, s:screen, o:overlay, d:darken, l:lighten, cd:color-dodge, i:color-burn, hl:hard-light, sl:soft-light, di:difference, e:exclusion, h:hue, sa:saturation, c:color, lu:luminosity |

Box Shadow

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ------------ | ---------------- | | bxsh | box-shadow | - | | bxshd | box-shadow | - |

9. Transforms & Animations

Transform

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ------------------ | ---------------- | | tra | transform | - | | trab | transform-box | - | | trao | transform-origin | - | | tras | transform-style | - | | rot | rotate | - | | s | scale | - | | trl | translate | - |

Transition

| Viết tắt | Thuộc tính | Giá trị viết tắt | | --------- | ---------------------------- | ---------------- | | tran | transition | - | | tranb | transition-behavior | - | | trand | transition-delay | - | | trandur | transition-duration | - | | tranp | transition-property | - | | trantf | transition-timing-function | - |

Animation

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- | | ani | animation | - | | anic | animation-composition | r:replace, a:add, ac:accumulate, ra:replace, add, aac:add, accumulate, raac:replace, add, accumulate | | anide | animation-delay | - | | anidi | animation-direction | r:reverse, a:alternate, ar:alternate-reverse, nr:normal, reverse, arn:alternate, reverse, normal | | anidu | animation-duration | - | | anifm | animation-fill-mode | f:forwards, b:backwards, nb:none, backwards, fbn:both, forwards, none | | aniic | animation-iteration-count | - | | anin | animation-name | s:slide | | anips | animation-play-state | p:paused, r:running | | anitf | animation-timing-function | ei:ease-in, eo:ease-out, eio:ease-in-out, l:linear, ss:step-start, se:step-end |

10. Overflow & Scrolling

Overflow

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------------- | -------------------- | | ofl | overflow | - | | oflx | overflow-x | c:clip, s:scroll | | ofly | overflow-y | c:clip, s:scroll | | oflb | overflow-block | - | | ofli | overflow-inline | - | | ofla | overflow-anchor | - | | oflcm | overflow-clip-margin | - | | oflw | overflow-wrap | c:clip, s:scroll |

Scroll

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------------- | ---------------- | | scrb | scroll-behavior | - | | scrm | scroll-margin | - | | scrmb | scroll-margin-bottom | - | | scrml | scroll-margin-left | - | | scrmr | scroll-margin-right | - | | scrmt | scroll-margin-top | - | | scrp | scroll-padding | - | | scrpb | scroll-padding-bottom | - | | scrpl | scroll-padding-left | - | | scrpr | scroll-padding-right | - | | scrpt | scroll-padding-top | - | | scrsa | scroll-snap-align | - | | scrss | scroll-snap-stop | - | | scrst | scroll-snap-type | - | | sbc | scrollbar-color | - | | sbg | scrollbar-gutter | - | | sbw | scrollbar-width | - |

Overscroll

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ---------------------------- | ---------------- | | osrbh | overscroll-behavior | c:contain | | osrbb | overscroll-behavior-block | c:contain | | osrbi | overscroll-behavior-inline | c:contain | | osrbx | overscroll-behavior-x | c:contain | | orsby | overscroll-behavior-y | c:contain |

11. Lists & Tables

Lists

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- | | ls | list-style | i:inside, di:disc, c:circle, s:square, de:decimal, g:georgian, tci:trad-chinese-informal, k:kannada | | lsi | list-style-image | - | | lisp | list-style-position | i:inside, o:outside | | lst | list-style-type | di:disc, c:circle, s:square, de:decimal, g:georgian, tci:trad-chinese-informal, k:kannada |

Tables

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ----------------- | -------------------------- | | tbl | table-layout | - | | bdcl | border-collapse | s:separate, c:collapse | | bdsp | border-spacing | - | | empc | empty-cells | - | | caps | caption-side | - |

Columns

| Viết tắt | Thuộc tính | Giá trị viết tắt | | -------- | ------------------- | ---------------- | | col | columns | - | | colc | column-count | - | | colf | column-fill | - | | colg | column-gap | - | | colr | column-rule | -