@fwkui/x-css 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2212 -0
- package/index.d.ts +30 -0
- package/index.js +1 -0
- package/package.json +17 -0
package/README.md
ADDED
|
@@ -0,0 +1,2212 @@
|
|
|
1
|
+
# Hướng dẫn sử dụng x-css
|
|
2
|
+
|
|
3
|
+
`x-css` là một thư viện 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ả.
|
|
4
|
+
|
|
5
|
+
## Cài đặt
|
|
6
|
+
|
|
7
|
+
Để sử dụng `x-css`, bạn chỉ cần import nó vào dự án của mình:
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script type="module">
|
|
11
|
+
import $ from "/index.js";
|
|
12
|
+
$.cssObserve(document);
|
|
13
|
+
</script>
|
|
14
|
+
```
|
|
15
|
+
# Hướng dẫn sử dụng xCSS
|
|
16
|
+
|
|
17
|
+
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ẽ:
|
|
18
|
+
|
|
19
|
+
* Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
|
|
20
|
+
* 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**
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phần sau**.
|
|
24
|
+
|
|
25
|
+
## Cú pháp tổng quát
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
[MQ:][layer]<property><value>[@selector]
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**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.
|
|
32
|
+
|
|
33
|
+
**Ví dụ cú pháp đúng:**
|
|
34
|
+
- `cRed` - Màu đỏ (layer 0)
|
|
35
|
+
- `5cRed` - Màu đỏ ở layer 5
|
|
36
|
+
- `md:cRed` - Màu đỏ trên màn hình trung bình
|
|
37
|
+
- `md:5cRed` - Màu đỏ ở layer 5 trên màn hình trung bình
|
|
38
|
+
|
|
39
|
+
### Các thành phần:
|
|
40
|
+
|
|
41
|
+
#### 1. Media Query (MQ) - Tùy chọn
|
|
42
|
+
|
|
43
|
+
- `xs:` - Màn hình nhỏ (max-width: 575px)
|
|
44
|
+
- `sm:` - Màn hình nhỏ (min-width: 576px)
|
|
45
|
+
- `md:` - Màn hình trung bình (min-width: 768px)
|
|
46
|
+
- `lg:` - Màn hình lớn (min-width: 992px)
|
|
47
|
+
- `xl:` - Màn hình rất lớn (min-width: 1200px)
|
|
48
|
+
- `2xl:` - Màn hình cực lớn (min-width: 1400px)
|
|
49
|
+
- `sma:` - Màn hình nhỏ trở xuống (max-width: 768px)
|
|
50
|
+
- `mda:` - Màn hình trung bình trở xuống (max-width: 992px)
|
|
51
|
+
- `lga:` - Màn hình lớn trở xuống (max-width: 1200px)
|
|
52
|
+
- `xla:` - Màn hình rất lớn trở xuống (max-width: 1400px)
|
|
53
|
+
|
|
54
|
+
#### 2. Layer - Tùy chọn
|
|
55
|
+
|
|
56
|
+
- `1` đến `19` - Thứ tự ưu tiên CSS layer (số càng cao ưu tiên càng cao)
|
|
57
|
+
- Mặc định: `0` (layer 0)
|
|
58
|
+
- Mục đích: gom nhóm quy tắc theo tầng (base, component, utilities, overrides…)
|
|
59
|
+
|
|
60
|
+
#### 3. Property (Thuộc tính) - **BẮT BUỘC**
|
|
61
|
+
|
|
62
|
+
- Viết thường, có thể là tên đầy đủ hoặc viết tắt
|
|
63
|
+
- 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`
|
|
64
|
+
- Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
|
|
65
|
+
|
|
66
|
+
#### 4. Value (Giá trị) - **BẮT BUỘC**
|
|
67
|
+
|
|
68
|
+
- **Số**: `10`, `-4.5`, `0.5`, có thể kèm **đơn vị**: `10px`, `1.5rem`, `100%`
|
|
69
|
+
- **Giá trị đặt tên** bắt đầu bằng **chữ hoa**: `Red`, `Center`, `Block`, `Fixed`, `None`
|
|
70
|
+
- **Giá trị trong ngoặc nhọn** để ghi **nguyên văn**: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
|
|
71
|
+
- **Biến CSS**: bắt đầu bằng `--`: `c--primary` → `color: var(--primary)`
|
|
72
|
+
- **Quan trọng**: thêm `!` ngay trước giá trị để ra `!important`: `w!10px` → `width: 10px !important`
|
|
73
|
+
- **Hàm**: dùng dạng **TitleCase** + `(...)` và dùng dấu `;` thay cho khoảng trắng:
|
|
74
|
+
- `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
|
|
75
|
+
- `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
|
|
76
|
+
|
|
77
|
+
#### 5. Selector - Tùy chọn
|
|
78
|
+
|
|
79
|
+
- Bắt đầu bằng `@`
|
|
80
|
+
- Dấu `;` thay thế cho dấu cách
|
|
81
|
+
- Có thể dùng giả lớp/giả phần tử, chọn phần tử con, hoặc kết hợp
|
|
82
|
+
- Ví dụ: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
|
|
83
|
+
|
|
84
|
+
## Ví dụ sử dụng
|
|
85
|
+
|
|
86
|
+
### Cơ bản
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<!-- Màu đỏ -->
|
|
90
|
+
<div class="cRed">Văn bản màu đỏ</div>
|
|
91
|
+
|
|
92
|
+
<!-- Chiều rộng 100px -->
|
|
93
|
+
<div class="w100px">Chiều rộng 100px</div>
|
|
94
|
+
|
|
95
|
+
<!-- Padding 20px -->
|
|
96
|
+
<div class="p20px">Padding 20px</div>
|
|
97
|
+
|
|
98
|
+
<!-- Opacity 50% -->
|
|
99
|
+
<div class="opc50%">Độ trong suốt 50%</div>
|
|
100
|
+
|
|
101
|
+
<!-- Font size 14px -->
|
|
102
|
+
<div class="fns14px">Cỡ chữ 14px</div>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Với Media Query
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<!-- Màu đỏ trên màn hình lớn -->
|
|
109
|
+
<div class="lg:cRed">Màu đỏ trên desktop</div>
|
|
110
|
+
|
|
111
|
+
<!-- Ẩn trên màn hình nhỏ -->
|
|
112
|
+
<div class="xs:vHidden">Ẩn trên mobile</div>
|
|
113
|
+
|
|
114
|
+
<!-- Responsive width -->
|
|
115
|
+
<div class="w100% md:w50% lg:w33%">Responsive width</div>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Với Layer
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<!-- Layer ưu tiên cao -->
|
|
122
|
+
<div class="5cRed">Màu đỏ ưu tiên cao</div>
|
|
123
|
+
|
|
124
|
+
<!-- Layer ưu tiên thấp -->
|
|
125
|
+
<div class="1cBlue">Màu xanh ưu tiên thấp</div>
|
|
126
|
+
|
|
127
|
+
<!-- Kết hợp layer và media query -->
|
|
128
|
+
<div class="md:7cGreen">Màu xanh layer 7 trên desktop</div>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Với Selector
|
|
132
|
+
|
|
133
|
+
```html
|
|
134
|
+
<!-- Hover effect -->
|
|
135
|
+
<div class="cRed@:hover">Đỏ khi hover</div>
|
|
136
|
+
|
|
137
|
+
<!-- Focus effect -->
|
|
138
|
+
<input class="bdw2px@:focus" placeholder="Border khi focus">
|
|
139
|
+
|
|
140
|
+
<!-- Child selector -->
|
|
141
|
+
<div class="cBlue@>a">Màu xanh cho thẻ con a</div>
|
|
142
|
+
|
|
143
|
+
<!-- Complex selector -->
|
|
144
|
+
<div class="cRed@.btn;:hover">Màu đỏ khi hover button</div>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### Với giá trị đặc biệt
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
<!-- !important -->
|
|
151
|
+
<div class="c!red">Màu đỏ !important</div>
|
|
152
|
+
|
|
153
|
+
<!-- CSS Variable -->
|
|
154
|
+
<div class="c--primary">Màu từ CSS variable</div>
|
|
155
|
+
|
|
156
|
+
<!-- Giá trị tùy chỉnh -->
|
|
157
|
+
<div class="w{calc(100%;-;20px)}">Chiều rộng tính toán</div>
|
|
158
|
+
|
|
159
|
+
<!-- Hàm CSS -->
|
|
160
|
+
<div class="wClamp(280px;640px;100%)">Width với clamp</div>
|
|
161
|
+
|
|
162
|
+
<!-- Box shadow phức tạp -->
|
|
163
|
+
<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Shadow phức tạp</div>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Kết hợp nhiều thuộc tính với `&`
|
|
167
|
+
|
|
168
|
+
```html
|
|
169
|
+
<!-- Nhiều thuộc tính cùng lúc -->
|
|
170
|
+
<div class="cRed&fw700&taC">Màu đỏ, font-weight 700, căn giữa</div>
|
|
171
|
+
|
|
172
|
+
<!-- Flexbox layout -->
|
|
173
|
+
<div class="dF&aiC&jcSp">Flexbox center và space-between</div>
|
|
174
|
+
|
|
175
|
+
<!-- Padding và margin -->
|
|
176
|
+
<div class="p8px&m0">Padding 8px và margin 0</div>
|
|
177
|
+
|
|
178
|
+
<!-- Kết hợp với selector -->
|
|
179
|
+
<div class="cRed&fw700@:hover">Màu đỏ và font-weight 700 khi hover</div>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Quy tắc ưu tiên & va chạm
|
|
183
|
+
|
|
184
|
+
1. **@layer**: lớp số lớn thắng lớp số nhỏ (khi cùng nguồn gốc/specificity)
|
|
185
|
+
2. **Specificity** của selector: selector cụ thể hơn thắng
|
|
186
|
+
3. **Thứ tự xuất hiện** trong cùng layer và cùng specificity
|
|
187
|
+
4. **!important** luôn thắng các quy tắc thường trong cùng phạm vi cascade
|
|
188
|
+
|
|
189
|
+
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.
|
|
190
|
+
|
|
191
|
+
## Quy tắc quan trọng
|
|
192
|
+
|
|
193
|
+
### ✅ Hợp lệ
|
|
194
|
+
|
|
195
|
+
- `cRed` - Màu đỏ (property: `c`, value: `Red`)
|
|
196
|
+
- `w10px` - Chiều rộng 10px (property: `w`, value: `10px`)
|
|
197
|
+
- `md:cRed` - Màu đỏ trên màn hình trung bình (MQ: `md`, property: `c`, value: `Red`)
|
|
198
|
+
- `2w100px` - Chiều rộng 100px ở layer 2 (layer: `2`, property: `w`, value: `100px`)
|
|
199
|
+
- `cRed@:hover` - Màu đỏ khi hover (property: `c`, value: `Red`, selector: `@:hover`)
|
|
200
|
+
- `w!100px` - Chiều rộng 100px !important (property: `w`, value: `!100px`)
|
|
201
|
+
- `c{red}` - Màu đỏ với giá trị tùy chỉnh (property: `c`, value: `{red}`)
|
|
202
|
+
- `cRed&w700` - Kết hợp nhiều thuộc tính (property: `c`, value: `Red`, property: `w`, value: `700`)
|
|
203
|
+
- `wCalc(100%;-;20px)` - Hàm CSS với dấu `;` (property: `w`, value: `Calc(100%;-;20px)`)
|
|
204
|
+
|
|
205
|
+
### ❌ Không hợp lệ
|
|
206
|
+
|
|
207
|
+
- `Cred` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
|
|
208
|
+
- `C{red}` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
|
|
209
|
+
- `cRed}` - Thiếu dấu mở ngoặc (syntax lỗi)
|
|
210
|
+
- `c-red` - Dấu gạch ngang không được phép (property không được có dấu `-`)
|
|
211
|
+
- `W-10px` - Chữ W viết hoa và dấu gạch ngang (property phải viết thường)
|
|
212
|
+
- `w-!10px` - Dấu gạch ngang không được phép (property không được có dấu `-`)
|
|
213
|
+
- `cRed @:hover` - Có dấu cách trong class name (không được có dấu cách)
|
|
214
|
+
- `c` - Thiếu value (bắt buộc phải có cả property và value)
|
|
215
|
+
- `Red` - Thiếu property (bắt buộc phải có cả property và value)
|
|
216
|
+
|
|
217
|
+
## Lỗi phổ biến & cách tránh
|
|
218
|
+
|
|
219
|
+
* **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
|
|
220
|
+
* **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
|
|
221
|
+
* **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
|
|
222
|
+
* **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
|
|
223
|
+
* **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
|
|
224
|
+
* **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`
|
|
225
|
+
|
|
226
|
+
## Lưu ý
|
|
227
|
+
|
|
228
|
+
1. **Property và Value bắt buộc** - Mỗi class phải có cả thuộc tính và giá trị CSS
|
|
229
|
+
2. **Tên class phải viết thường** - Chỉ property viết thường, value có thể có ký tự HOA
|
|
230
|
+
3. **Không dùng dấu cách** - Dùng dấu `;` thay thế
|
|
231
|
+
4. **CSS.supports validation** - Tất cả class phải được CSS hỗ trợ
|
|
232
|
+
5. **Thứ tự ưu tiên** - Layer số cao hơn sẽ có ưu tiên cao hơn
|
|
233
|
+
6. **Media Query** - Chỉ áp dụng trong khoảng màn hình tương ứng
|
|
234
|
+
7. **Khoảng trắng trong giá trị** dùng dấu `;`. Ví dụ: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
|
|
235
|
+
|
|
236
|
+
## Lời khuyên từ kinh nghiệm thực tế
|
|
237
|
+
|
|
238
|
+
### 🎯 **Nguyên tắc đặt tên class**
|
|
239
|
+
|
|
240
|
+
#### ✅ **Nên làm:**
|
|
241
|
+
- **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
|
|
242
|
+
- **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
|
|
243
|
+
|
|
244
|
+
#### ❌ **Tránh:**
|
|
245
|
+
- **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
|
|
246
|
+
- **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
|
|
247
|
+
- **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
|
|
248
|
+
|
|
249
|
+
### 🎨 **Quản lý giá trị phức tạp**
|
|
250
|
+
|
|
251
|
+
#### **Sử dụng CSS Variables cho giá trị dài:**
|
|
252
|
+
```css
|
|
253
|
+
:root {
|
|
254
|
+
--shadow-card: 0 4px 8px rgba(0,0,0,0.1);
|
|
255
|
+
--shadow-hover: 0 8px 16px rgba(0,0,0,0.15);
|
|
256
|
+
--border-radius: 8px;
|
|
257
|
+
--spacing-sm: 8px;
|
|
258
|
+
--spacing-md: 16px;
|
|
259
|
+
--spacing-lg: 24px;
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
```html
|
|
264
|
+
<!-- Thay vì viết dài -->
|
|
265
|
+
<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
|
|
266
|
+
|
|
267
|
+
<!-- Nên dùng biến -->
|
|
268
|
+
<div class="bxsh--shadow-card bdra--border-radius p--spacing-md">
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
#### **Tạo component classes cho pattern thường dùng:**
|
|
272
|
+
```html
|
|
273
|
+
<!-- Thay vì lặp lại nhiều lần -->
|
|
274
|
+
<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
|
|
275
|
+
|
|
276
|
+
<!-- Nên tạo component class -->
|
|
277
|
+
<div class="card">
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
### 📱 **Responsive Design Best Practices**
|
|
281
|
+
|
|
282
|
+
#### **Sử dụng mobile-first approach:**
|
|
283
|
+
```html
|
|
284
|
+
<!-- Base styles cho mobile -->
|
|
285
|
+
<div class="w100% p8px">
|
|
286
|
+
|
|
287
|
+
<!-- Override cho desktop -->
|
|
288
|
+
<div class="md:w50% md:p16px lg:w33% lg:p24px">
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### **Nhóm breakpoints logic:**
|
|
292
|
+
```html
|
|
293
|
+
<!-- Layout chính -->
|
|
294
|
+
<div class="dB md:dF">
|
|
295
|
+
|
|
296
|
+
<!-- Spacing responsive -->
|
|
297
|
+
<div class="p8px md:p16px lg:p24px">
|
|
298
|
+
|
|
299
|
+
<!-- Typography responsive -->
|
|
300
|
+
<div class="fns14px md:fns16px lg:fns18px">
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### 🎭 **Layer Management**
|
|
304
|
+
|
|
305
|
+
#### **Tổ chức layers theo hierarchy:**
|
|
306
|
+
```html
|
|
307
|
+
<!-- Base styles (0) -->
|
|
308
|
+
<div class="cBlack fns16px">
|
|
309
|
+
|
|
310
|
+
<!-- Component styles (1-5) -->
|
|
311
|
+
<div class="2btnPrimary">
|
|
312
|
+
|
|
313
|
+
<!-- Utility styles (6-10) -->
|
|
314
|
+
<div class="8m16px">
|
|
315
|
+
|
|
316
|
+
<!-- Override styles (11-19) -->
|
|
317
|
+
<div class="15cRed">
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
### 🔧 **Performance Tips**
|
|
321
|
+
|
|
322
|
+
#### **Tránh over-engineering:**
|
|
323
|
+
```html
|
|
324
|
+
<!-- Đơn giản và hiệu quả -->
|
|
325
|
+
<div class="dF&aiC&p16px">
|
|
326
|
+
|
|
327
|
+
<!-- Thay vì phức tạp không cần thiết -->
|
|
328
|
+
<div class="dF&aiC&jcC&p16px&m0&b0&bgcT">
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
#### **Sử dụng shorthand khi có thể:**
|
|
332
|
+
```html
|
|
333
|
+
<!-- Margin shorthand -->
|
|
334
|
+
<div class="m16px"> <!-- margin: 16px -->
|
|
335
|
+
<div class="mt8px&mb8px"> <!-- margin-top: 8px; margin-bottom: 8px -->
|
|
336
|
+
|
|
337
|
+
<!-- Padding shorthand -->
|
|
338
|
+
<div class="p16px"> <!-- padding: 16px -->
|
|
339
|
+
<div class="px16px&py8px"> <!-- padding: 8px 16px -->
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
### 🎨 **Design System Integration**
|
|
343
|
+
|
|
344
|
+
#### **Tạo design tokens:**
|
|
345
|
+
```css
|
|
346
|
+
:root {
|
|
347
|
+
/* Colors */
|
|
348
|
+
--color-primary: #0070f3;
|
|
349
|
+
--color-secondary: #7928ca;
|
|
350
|
+
--color-success: #0070f3;
|
|
351
|
+
--color-warning: #f5a623;
|
|
352
|
+
--color-error: #e00;
|
|
353
|
+
|
|
354
|
+
/* Spacing scale */
|
|
355
|
+
--space-1: 4px;
|
|
356
|
+
--space-2: 8px;
|
|
357
|
+
--space-3: 12px;
|
|
358
|
+
--space-4: 16px;
|
|
359
|
+
--space-5: 20px;
|
|
360
|
+
--space-6: 24px;
|
|
361
|
+
|
|
362
|
+
/* Typography scale */
|
|
363
|
+
--text-xs: 12px;
|
|
364
|
+
--text-sm: 14px;
|
|
365
|
+
--text-base: 16px;
|
|
366
|
+
--text-lg: 18px;
|
|
367
|
+
--text-xl: 20px;
|
|
368
|
+
}
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
#### **Sử dụng semantic naming:**
|
|
372
|
+
```html
|
|
373
|
+
<!-- Thay vì màu cụ thể -->
|
|
374
|
+
<div class="cBlue">
|
|
375
|
+
|
|
376
|
+
<!-- Nên dùng semantic -->
|
|
377
|
+
<div class="cPrimary">
|
|
378
|
+
<div class="cSuccess">
|
|
379
|
+
<div class="cError">
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
### 🚀 **Maintenance Tips**
|
|
383
|
+
|
|
384
|
+
#### **Documentation cho team:**
|
|
385
|
+
```html
|
|
386
|
+
<!-- Component: Button Primary -->
|
|
387
|
+
<!-- Usage: <button class="btnPrimary">Click me</button> -->
|
|
388
|
+
<!-- Variants: btnSecondary, btnDanger, btnGhost -->
|
|
389
|
+
<button class="btnPrimary">Click me</button>
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
#### **Consistent naming convention:**
|
|
393
|
+
```html
|
|
394
|
+
<!-- Layout -->
|
|
395
|
+
<div class="container">
|
|
396
|
+
<div class="row">
|
|
397
|
+
<div class="col">
|
|
398
|
+
|
|
399
|
+
<!-- Components -->
|
|
400
|
+
<div class="card">
|
|
401
|
+
<div class="btn">
|
|
402
|
+
<div class="input">
|
|
403
|
+
|
|
404
|
+
<!-- Utilities -->
|
|
405
|
+
<div class="textCenter">
|
|
406
|
+
<div class="mAuto">
|
|
407
|
+
<div class="dNone">
|
|
408
|
+
```
|
|
409
|
+
|
|
410
|
+
### 💡 **Pro Tips**
|
|
411
|
+
|
|
412
|
+
1. **Luôn test trên mobile trước** - Mobile-first approach
|
|
413
|
+
2. **Sử dụng browser dev tools** - Kiểm tra CSS output
|
|
414
|
+
3. **Tạo style guide** - Document các pattern thường dùng
|
|
415
|
+
4. **Code review** - Đảm bảo consistency trong team
|
|
416
|
+
5. **Performance monitoring** - Theo dõi CSS bundle size
|
|
417
|
+
6. **Accessibility first** - Luôn nghĩ đến người dùng khuyết tật
|
|
418
|
+
|
|
419
|
+
## Ví dụ tổng hợp
|
|
420
|
+
|
|
421
|
+
**HTML**
|
|
422
|
+
|
|
423
|
+
```html
|
|
424
|
+
<div class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover">
|
|
425
|
+
<a class="cBlue wClamp(120px;240px;100%)">Link</a>
|
|
426
|
+
<button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
|
|
427
|
+
</div>
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
**CSS (phát sinh ý tưởng)**
|
|
431
|
+
|
|
432
|
+
```css
|
|
433
|
+
@media (min-width: 768px){
|
|
434
|
+
@layer l7{
|
|
435
|
+
.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,.1) }
|
|
436
|
+
.md\:7\.c\-\-fg\@\>a\;\:hover > a:hover{ color: var(--fg) }
|
|
437
|
+
.md\:7\.wClamp\(120px\;240px\;100\%\){ width: clamp(120px,240px,100%) }
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
.cBlue{ color: blue }
|
|
441
|
+
.w\!120px{ width: 120px !important }
|
|
442
|
+
.h40px{ height: 40px }
|
|
443
|
+
.bdra8px{ border-radius: 8px }
|
|
444
|
+
.cWhite{ color: #fff }
|
|
445
|
+
.bgc\#0070f3{ background-color: #0070f3 }
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
## Bảng tra cứu nhanh
|
|
449
|
+
|
|
450
|
+
### Media Query
|
|
451
|
+
|
|
452
|
+
| Ký hiệu | Kích thước màn hình |
|
|
453
|
+
| --------- | ------------------------ |
|
|
454
|
+
| `xs:` | ≤ 575px |
|
|
455
|
+
| `sm:` | ≥ 576px |
|
|
456
|
+
| `md:` | ≥ 768px |
|
|
457
|
+
| `lg:` | ≥ 992px |
|
|
458
|
+
| `xl:` | ≥ 1200px |
|
|
459
|
+
| `2xl:` | ≥ 1400px |
|
|
460
|
+
|
|
461
|
+
### Layer
|
|
462
|
+
|
|
463
|
+
| Ký hiệu | Mô tả |
|
|
464
|
+
| ---------- | ----------------------------------------------------- |
|
|
465
|
+
| `0` | Layer mặc định (ưu tiên thấp) |
|
|
466
|
+
| `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
|
|
467
|
+
|
|
468
|
+
### Giá trị đặc biệt
|
|
469
|
+
|
|
470
|
+
| Ký hiệu | Ý nghĩa |
|
|
471
|
+
| --------- | --------------------- |
|
|
472
|
+
| `!` | !important |
|
|
473
|
+
| `--` | CSS Variable |
|
|
474
|
+
| `{}` | Giá trị tùy chỉnh |
|
|
475
|
+
| `;` | Thay thế dấu cách |
|
|
476
|
+
|
|
477
|
+
## Câu hỏi thường gặp (FAQ)
|
|
478
|
+
|
|
479
|
+
**Hỏi:** Tại sao phải viết hoa chữ cái đầu giá trị dạng từ khoá?
|
|
480
|
+
|
|
481
|
+
**Đá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.
|
|
482
|
+
|
|
483
|
+
**Hỏi:** Dùng dấu gì cho khoảng trắng?
|
|
484
|
+
|
|
485
|
+
**Đáp:** Dùng dấu `;` trong **giá trị** và **selector** để không phá vỡ tên class.
|
|
486
|
+
|
|
487
|
+
**Hỏi:** Tôi muốn thêm breakpoint mới?
|
|
488
|
+
|
|
489
|
+
**Đá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.
|
|
490
|
+
|
|
491
|
+
**Hỏi:** Có cần escape khi viết trong HTML?
|
|
492
|
+
|
|
493
|
+
**Đáp:** Không. Bạn viết thô như quy ước. Bộ biên dịch sẽ escape khi phát sinh CSS.
|
|
494
|
+
|
|
495
|
+
---
|
|
496
|
+
|
|
497
|
+
# Bảng tra cứu đầy đủ thuộc tính và giá trị xCSS
|
|
498
|
+
|
|
499
|
+
## Cấu trúc dữ liệu
|
|
500
|
+
|
|
501
|
+
- **Viết tắt**: Ký hiệu ngắn gọn để sử dụng trong class
|
|
502
|
+
- **Thuộc tính CSS**: Tên đầy đủ của thuộc tính CSS
|
|
503
|
+
- **Giá trị viết tắt**: Mapping từ ký hiệu sang giá trị CSS (nếu có)
|
|
504
|
+
|
|
505
|
+
---
|
|
506
|
+
|
|
507
|
+
## 1. Layout & Display
|
|
508
|
+
|
|
509
|
+
### Display
|
|
510
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
511
|
+
|----------|------------|------------------|
|
|
512
|
+
| `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` |
|
|
513
|
+
|
|
514
|
+
### Position
|
|
515
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
516
|
+
|----------|------------|------------------|
|
|
517
|
+
| `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
|
|
518
|
+
|
|
519
|
+
### Sizing
|
|
520
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
521
|
+
|----------|------------|------------------|
|
|
522
|
+
| `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
|
|
523
|
+
| `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
524
|
+
| `mw` | `max-width` | - |
|
|
525
|
+
| `mxw` | `max-width` | - |
|
|
526
|
+
| `mh` | `max-height` | - |
|
|
527
|
+
| `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
528
|
+
| `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
529
|
+
| `blks` | `block-size` | - |
|
|
530
|
+
| `ins` | `inline-size` | - |
|
|
531
|
+
| `mbs` | `max-block-size` | - |
|
|
532
|
+
| `mis` | `max-inline-size` | - |
|
|
533
|
+
| `mibs` | `min-block-size` | - |
|
|
534
|
+
| `misz` | `min-inline-size` | - |
|
|
535
|
+
|
|
536
|
+
### Positioning
|
|
537
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
538
|
+
|----------|------------|------------------|
|
|
539
|
+
| `t` | `top` | - |
|
|
540
|
+
| `r` | `right` | - |
|
|
541
|
+
| `b` | `bottom` | - |
|
|
542
|
+
| `l` | `left` | - |
|
|
543
|
+
| `i` | `inset` | - |
|
|
544
|
+
| `iblk` | `inset-block` | - |
|
|
545
|
+
| `ibe` | `inset-block-end` | - |
|
|
546
|
+
| `ibsta` | `inset-block-start` | - |
|
|
547
|
+
| `ii` | `inset-inline` | - |
|
|
548
|
+
| `iie` | `inset-inline-end` | - |
|
|
549
|
+
| `iis` | `inset-inline-start` | - |
|
|
550
|
+
|
|
551
|
+
---
|
|
552
|
+
|
|
553
|
+
## 2. Spacing
|
|
554
|
+
|
|
555
|
+
### Margin
|
|
556
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
557
|
+
|----------|------------|------------------|
|
|
558
|
+
| `m` | `margin` | - |
|
|
559
|
+
| `mt` | `margin-top` | - |
|
|
560
|
+
| `mr` | `margin-right` | - |
|
|
561
|
+
| `mb` | `margin-bottom` | - |
|
|
562
|
+
| `ml` | `margin-left` | - |
|
|
563
|
+
| `mblk` | `margin-block` | - |
|
|
564
|
+
| `mbe` | `margin-block-end` | - |
|
|
565
|
+
| `mbsta` | `margin-block-start` | - |
|
|
566
|
+
| `min` | `margin-inline` | - |
|
|
567
|
+
| `mie` | `margin-inline-end` | - |
|
|
568
|
+
| `mista` | `margin-inline-start` | - |
|
|
569
|
+
|
|
570
|
+
### Padding
|
|
571
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
572
|
+
|----------|------------|------------------|
|
|
573
|
+
| `p` | `padding` | - |
|
|
574
|
+
| `pt` | `padding-top` | - |
|
|
575
|
+
| `pr` | `padding-right` | - |
|
|
576
|
+
| `pb` | `padding-bottom` | - |
|
|
577
|
+
| `pl` | `padding-left` | - |
|
|
578
|
+
| `pblk` | `padding-block` | - |
|
|
579
|
+
| `pbe` | `padding-block-end` | - |
|
|
580
|
+
| `pbs` | `padding-block-start` | - |
|
|
581
|
+
| `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
|
|
582
|
+
| `pie` | `padding-inline-end` | - |
|
|
583
|
+
| `pis` | `padding-inline-start` | - |
|
|
584
|
+
|
|
585
|
+
---
|
|
586
|
+
|
|
587
|
+
## 3. Colors & Background
|
|
588
|
+
|
|
589
|
+
### Color
|
|
590
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
591
|
+
|----------|------------|------------------|
|
|
592
|
+
| `c` | `color` | `i:inherit`, `t:transparent` |
|
|
593
|
+
|
|
594
|
+
### Background
|
|
595
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
596
|
+
|----------|------------|------------------|
|
|
597
|
+
| `bg` | `background` | - |
|
|
598
|
+
| `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
|
|
599
|
+
| `bgi` | `background-image` | - |
|
|
600
|
+
| `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` |
|
|
601
|
+
| `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
|
|
602
|
+
| `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
|
|
603
|
+
| `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` |
|
|
604
|
+
| `bgs` | `background-size` | `c:contain` |
|
|
605
|
+
| `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
|
|
606
|
+
| `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` |
|
|
607
|
+
| `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
|
|
608
|
+
| `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
|
|
609
|
+
|
|
610
|
+
---
|
|
611
|
+
|
|
612
|
+
## 4. Border
|
|
613
|
+
|
|
614
|
+
### Border General
|
|
615
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
616
|
+
|----------|------------|------------------|
|
|
617
|
+
| `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
618
|
+
| `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
|
|
619
|
+
| `bdc` | `border-color` | - |
|
|
620
|
+
| `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
|
|
621
|
+
|
|
622
|
+
### Border Sides
|
|
623
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
624
|
+
|----------|------------|------------------|
|
|
625
|
+
| `bdt` | `border-top` | - |
|
|
626
|
+
| `bdr` | `border-right` | - |
|
|
627
|
+
| `bdb` | `border-bottom` | - |
|
|
628
|
+
| `bdl` | `border-left` | - |
|
|
629
|
+
|
|
630
|
+
### Border Radius
|
|
631
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
632
|
+
|----------|------------|------------------|
|
|
633
|
+
| `bda` | `border-radius` | - |
|
|
634
|
+
| `bdra` | `border-radius` | - |
|
|
635
|
+
| `bdtlr` | `border-top-left-radius` | - |
|
|
636
|
+
| `bdtrr` | `border-top-right-radius` | - |
|
|
637
|
+
| `bdblr` | `border-bottom-left-radius` | - |
|
|
638
|
+
| `bdbrr` | `border-bottom-right-radius` | - |
|
|
639
|
+
| `bdeer` | `border-end-end-radius` | - |
|
|
640
|
+
| `bdesr` | `border-end-start-radius` | - |
|
|
641
|
+
| `bdser` | `border-start-end-radius` | - |
|
|
642
|
+
| `bdssr` | `border-start-start-radius` | - |
|
|
643
|
+
|
|
644
|
+
### Border Block/Inline
|
|
645
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
646
|
+
|----------|------------|------------------|
|
|
647
|
+
| `bdblk` | `border-block` | - |
|
|
648
|
+
| `bdblc` | `border-block-color` | - |
|
|
649
|
+
| `bdble` | `border-block-end` | - |
|
|
650
|
+
| `bdbls` | `border-block-start` | - |
|
|
651
|
+
| `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
652
|
+
| `bdblwi` | `border-block-width` | - |
|
|
653
|
+
| `bdi` | `border-inline` | - |
|
|
654
|
+
| `bdic` | `border-inline-color` | - |
|
|
655
|
+
| `bdie` | `border-inline-end` | - |
|
|
656
|
+
| `bdista` | `border-inline-start` | - |
|
|
657
|
+
| `bdistl` | `border-inline-style` | - |
|
|
658
|
+
| `bdinw` | `border-inline-width` | - |
|
|
659
|
+
|
|
660
|
+
---
|
|
661
|
+
|
|
662
|
+
## 5. Typography
|
|
663
|
+
|
|
664
|
+
### Font
|
|
665
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
666
|
+
|----------|------------|------------------|
|
|
667
|
+
| `fn` | `font` | - |
|
|
668
|
+
| `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` |
|
|
669
|
+
| `fnf` | `font-family` | - |
|
|
670
|
+
| `fns` | `font-size` | - |
|
|
671
|
+
| `fw` | `font-weight` | - |
|
|
672
|
+
| `fnw` | `font-weight` | - |
|
|
673
|
+
| `fnsty` | `font-style` | - |
|
|
674
|
+
| `fnstr` | `font-stretch` | - |
|
|
675
|
+
| `fnfs` | `font-feature-settings` | - |
|
|
676
|
+
| `fnk` | `font-kerning` | - |
|
|
677
|
+
| `fnlo` | `font-language-override` | - |
|
|
678
|
+
| `fnos` | `font-optical-sizing` | - |
|
|
679
|
+
| `fnp` | `font-palette` | - |
|
|
680
|
+
| `fnsa` | `font-size-adjust` | - |
|
|
681
|
+
| `fnsyn` | `font-synthesis` | - |
|
|
682
|
+
| `fnsp` | `font-synthesis-position` | - |
|
|
683
|
+
| `fnssc` | `font-synthesis-small-caps` | - |
|
|
684
|
+
| `fnss` | `font-synthesis-style` | - |
|
|
685
|
+
| `fnsw` | `font-synthesis-weight` | - |
|
|
686
|
+
| `fnv` | `font-variant` | - |
|
|
687
|
+
| `fnva` | `font-variant-alternates` | - |
|
|
688
|
+
| `fnvc` | `font-variant-caps` | - |
|
|
689
|
+
| `fnvea` | `font-variant-east-asian` | - |
|
|
690
|
+
| `fnve` | `font-variant-emoji` | - |
|
|
691
|
+
| `fnvl` | `font-variant-ligatures` | - |
|
|
692
|
+
| `fnvn` | `font-variant-numeric` | - |
|
|
693
|
+
| `fnvp` | `font-variant-position` | - |
|
|
694
|
+
| `fnvs` | `font-variation-settings` | - |
|
|
695
|
+
|
|
696
|
+
### Text
|
|
697
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
698
|
+
|----------|------------|------------------|
|
|
699
|
+
| `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
|
|
700
|
+
| `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
|
|
701
|
+
| `td` | `text-decoration` | `u:underline` |
|
|
702
|
+
| `tdc` | `text-decoration-color` | - |
|
|
703
|
+
| `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
|
|
704
|
+
| `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
|
|
705
|
+
| `tdt` | `text-decoration-thickness` | `ff:from-font` |
|
|
706
|
+
| `tdsi` | `text-decoration-skip-ink` | - |
|
|
707
|
+
| `teph` | `text-emphasis` | - |
|
|
708
|
+
| `tec` | `text-emphasis-color` | - |
|
|
709
|
+
| `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
|
|
710
|
+
| `tes` | `text-emphasis-style` | - |
|
|
711
|
+
| `ti` | `text-indent` | - |
|
|
712
|
+
| `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
|
|
713
|
+
| `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
|
|
714
|
+
| `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
|
|
715
|
+
| `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
|
|
716
|
+
| `tsh` | `text-shadow` | - |
|
|
717
|
+
| `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
|
|
718
|
+
| `tuo` | `text-underline-offset` | - |
|
|
719
|
+
| `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
|
|
720
|
+
| `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
|
|
721
|
+
|
|
722
|
+
### Line & Spacing
|
|
723
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
724
|
+
|----------|------------|------------------|
|
|
725
|
+
| `lh` | `line-height` | - |
|
|
726
|
+
| `lts` | `letter-spacing` | `n:normal` |
|
|
727
|
+
| `wrs` | `word-spacing` | - |
|
|
728
|
+
| `lbrk` | `line-break` | - |
|
|
729
|
+
| `wrb` | `word-break` | - |
|
|
730
|
+
| `wrtm` | `writing-mode` | - |
|
|
731
|
+
|
|
732
|
+
---
|
|
733
|
+
|
|
734
|
+
## 6. Flexbox
|
|
735
|
+
|
|
736
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
737
|
+
|----------|------------|------------------|
|
|
738
|
+
| `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
|
|
739
|
+
| `fxb` | `flex-basis` | - |
|
|
740
|
+
| `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
|
|
741
|
+
| `fxf` | `flex-flow` | - |
|
|
742
|
+
| `fxg` | `flex-grow` | - |
|
|
743
|
+
| `fxs` | `flex-shrink` | - |
|
|
744
|
+
| `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
|
|
745
|
+
| `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` |
|
|
746
|
+
| `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` |
|
|
747
|
+
| `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` |
|
|
748
|
+
| `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` |
|
|
749
|
+
|
|
750
|
+
---
|
|
751
|
+
|
|
752
|
+
## 7. Grid
|
|
753
|
+
|
|
754
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
755
|
+
|----------|------------|------------------|
|
|
756
|
+
| `g` | `grid` | - |
|
|
757
|
+
| `ga` | `grid-area` | - |
|
|
758
|
+
| `gc` | `grid-column` | `f:1 / -1` |
|
|
759
|
+
| `gce` | `grid-column-end` | - |
|
|
760
|
+
| `gcs` | `grid-column-start` | - |
|
|
761
|
+
| `gr` | `grid-row` | `f:1 / -1` |
|
|
762
|
+
| `gre` | `grid-row-end` | - |
|
|
763
|
+
| `grs` | `grid-row-start` | - |
|
|
764
|
+
| `gt` | `grid-template` | - |
|
|
765
|
+
| `gta` | `grid-template-areas` | - |
|
|
766
|
+
| `gtc` | `grid-template-columns` | `s:subgrid` |
|
|
767
|
+
| `gtr` | `grid-template-rows` | `s:subgrid` |
|
|
768
|
+
| `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
|
|
769
|
+
| `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
|
|
770
|
+
| `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
|
|
771
|
+
| `gap` | `gap` | - |
|
|
772
|
+
| `rgap` | `row-gap` | - |
|
|
773
|
+
| `colg` | `column-gap` | - |
|
|
774
|
+
| `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` |
|
|
775
|
+
| `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` |
|
|
776
|
+
| `pli` | `place-items` | - |
|
|
777
|
+
| `pls` | `place-self` | - |
|
|
778
|
+
| `plc` | `place-content` | - |
|
|
779
|
+
|
|
780
|
+
---
|
|
781
|
+
|
|
782
|
+
## 8. Effects & Filters
|
|
783
|
+
|
|
784
|
+
### Opacity & Visibility
|
|
785
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
786
|
+
|----------|------------|------------------|
|
|
787
|
+
| `opc` | `opacity` | - |
|
|
788
|
+
| `v` | `visibility` | `c:collapse` |
|
|
789
|
+
|
|
790
|
+
### Filter & Backdrop
|
|
791
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
792
|
+
|----------|------------|------------------|
|
|
793
|
+
| `flt` | `filter` | - |
|
|
794
|
+
| `bkdf` | `backdrop-filter` | - |
|
|
795
|
+
|
|
796
|
+
### Blend Modes
|
|
797
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
798
|
+
|----------|------------|------------------|
|
|
799
|
+
| `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` |
|
|
800
|
+
|
|
801
|
+
### Box Shadow
|
|
802
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
803
|
+
|----------|------------|------------------|
|
|
804
|
+
| `bxsh` | `box-shadow` | - |
|
|
805
|
+
| `bxshd` | `box-shadow` | - |
|
|
806
|
+
|
|
807
|
+
---
|
|
808
|
+
|
|
809
|
+
## 9. Transforms & Animations
|
|
810
|
+
|
|
811
|
+
### Transform
|
|
812
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
813
|
+
|----------|------------|------------------|
|
|
814
|
+
| `tra` | `transform` | - |
|
|
815
|
+
| `trab` | `transform-box` | - |
|
|
816
|
+
| `trao` | `transform-origin` | - |
|
|
817
|
+
| `tras` | `transform-style` | - |
|
|
818
|
+
| `rot` | `rotate` | - |
|
|
819
|
+
| `s` | `scale` | - |
|
|
820
|
+
| `trl` | `translate` | - |
|
|
821
|
+
|
|
822
|
+
### Transition
|
|
823
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
824
|
+
|----------|------------|------------------|
|
|
825
|
+
| `tran` | `transition` | - |
|
|
826
|
+
| `tranb` | `transition-behavior` | - |
|
|
827
|
+
| `trand` | `transition-delay` | - |
|
|
828
|
+
| `trandur` | `transition-duration` | - |
|
|
829
|
+
| `tranp` | `transition-property` | - |
|
|
830
|
+
| `trantf` | `transition-timing-function` | - |
|
|
831
|
+
|
|
832
|
+
### Animation
|
|
833
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
834
|
+
|----------|------------|------------------|
|
|
835
|
+
| `ani` | `animation` | - |
|
|
836
|
+
| `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
|
|
837
|
+
| `anide` | `animation-delay` | - |
|
|
838
|
+
| `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
|
|
839
|
+
| `anidu` | `animation-duration` | - |
|
|
840
|
+
| `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
|
|
841
|
+
| `aniic` | `animation-iteration-count` | - |
|
|
842
|
+
| `anin` | `animation-name` | `s:slide` |
|
|
843
|
+
| `anips` | `animation-play-state` | `p:paused`, `r:running` |
|
|
844
|
+
| `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
|
|
845
|
+
|
|
846
|
+
---
|
|
847
|
+
|
|
848
|
+
## 10. Overflow & Scrolling
|
|
849
|
+
|
|
850
|
+
### Overflow
|
|
851
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
852
|
+
|----------|------------|------------------|
|
|
853
|
+
| `ofl` | `overflow` | - |
|
|
854
|
+
| `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
|
|
855
|
+
| `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
|
|
856
|
+
| `oflb` | `overflow-block` | - |
|
|
857
|
+
| `ofli` | `overflow-inline` | - |
|
|
858
|
+
| `ofla` | `overflow-anchor` | - |
|
|
859
|
+
| `oflcm` | `overflow-clip-margin` | - |
|
|
860
|
+
| `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
|
|
861
|
+
|
|
862
|
+
### Scroll
|
|
863
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
864
|
+
|----------|------------|------------------|
|
|
865
|
+
| `scrb` | `scroll-behavior` | - |
|
|
866
|
+
| `scrm` | `scroll-margin` | - |
|
|
867
|
+
| `scrmb` | `scroll-margin-bottom` | - |
|
|
868
|
+
| `scrml` | `scroll-margin-left` | - |
|
|
869
|
+
| `scrmr` | `scroll-margin-right` | - |
|
|
870
|
+
| `scrmt` | `scroll-margin-top` | - |
|
|
871
|
+
| `scrp` | `scroll-padding` | - |
|
|
872
|
+
| `scrpb` | `scroll-padding-bottom` | - |
|
|
873
|
+
| `scrpl` | `scroll-padding-left` | - |
|
|
874
|
+
| `scrpr` | `scroll-padding-right` | - |
|
|
875
|
+
| `scrpt` | `scroll-padding-top` | - |
|
|
876
|
+
| `scrsa` | `scroll-snap-align` | - |
|
|
877
|
+
| `scrss` | `scroll-snap-stop` | - |
|
|
878
|
+
| `scrst` | `scroll-snap-type` | - |
|
|
879
|
+
| `sbc` | `scrollbar-color` | - |
|
|
880
|
+
| `sbg` | `scrollbar-gutter` | - |
|
|
881
|
+
| `sbw` | `scrollbar-width` | - |
|
|
882
|
+
|
|
883
|
+
### Overscroll
|
|
884
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
885
|
+
|----------|------------|------------------|
|
|
886
|
+
| `osrbh` | `overscroll-behavior` | `c:contain` |
|
|
887
|
+
| `osrbb` | `overscroll-behavior-block` | `c:contain` |
|
|
888
|
+
| `osrbi` | `overscroll-behavior-inline` | `c:contain` |
|
|
889
|
+
| `osrbx` | `overscroll-behavior-x` | `c:contain` |
|
|
890
|
+
| `orsby` | `overscroll-behavior-y` | `c:contain` |
|
|
891
|
+
|
|
892
|
+
---
|
|
893
|
+
|
|
894
|
+
## 11. Lists & Tables
|
|
895
|
+
|
|
896
|
+
### Lists
|
|
897
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
898
|
+
|----------|------------|------------------|
|
|
899
|
+
| `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
|
|
900
|
+
| `lsi` | `list-style-image` | - |
|
|
901
|
+
| `lisp` | `list-style-position` | `i:inside`, `o:outside` |
|
|
902
|
+
| `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
|
|
903
|
+
|
|
904
|
+
### Tables
|
|
905
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
906
|
+
|----------|------------|------------------|
|
|
907
|
+
| `tbl` | `table-layout` | - |
|
|
908
|
+
| `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
|
|
909
|
+
| `bdsp` | `border-spacing` | - |
|
|
910
|
+
| `empc` | `empty-cells` | - |
|
|
911
|
+
| `caps` | `caption-side` | - |
|
|
912
|
+
|
|
913
|
+
### Columns
|
|
914
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
915
|
+
|----------|------------|------------------|
|
|
916
|
+
| `col` | `columns` | - |
|
|
917
|
+
| `colc` | `column-count` | - |
|
|
918
|
+
| `colf` | `column-fill` | - |
|
|
919
|
+
| `colg` | `column-gap` | - |
|
|
920
|
+
| `colr` | `column-rule` | - |
|
|
921
|
+
| `colrc` | `column-rule-color` | - |
|
|
922
|
+
| `colrs` | `column-rule-style` | - |
|
|
923
|
+
| `colrw` | `column-rule-width` | - |
|
|
924
|
+
| `cols` | `column-span` | - |
|
|
925
|
+
| `colw` | `column-width` | - |
|
|
926
|
+
|
|
927
|
+
---
|
|
928
|
+
|
|
929
|
+
## 12. Advanced Properties
|
|
930
|
+
|
|
931
|
+
### Containment
|
|
932
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
933
|
+
|----------|------------|------------------|
|
|
934
|
+
| `cnt` | `contain` | - |
|
|
935
|
+
| `cntibs` | `contain-intrinsic-block-size` | - |
|
|
936
|
+
| `cntih` | `contain-intrinsic-height` | - |
|
|
937
|
+
| `cntiis` | `contain-intrinsic-inline-size` | - |
|
|
938
|
+
| `cntis` | `contain-intrinsic-size` | - |
|
|
939
|
+
| `ciw` | `contain-intrinsic-width` | - |
|
|
940
|
+
|
|
941
|
+
### Container Queries
|
|
942
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
943
|
+
|----------|------------|------------------|
|
|
944
|
+
| `ctr` | `container` | - |
|
|
945
|
+
| `ctrn` | `container-name` | - |
|
|
946
|
+
| `ctrt` | `container-type` | - |
|
|
947
|
+
|
|
948
|
+
### Content & Counters
|
|
949
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
950
|
+
|----------|------------|------------------|
|
|
951
|
+
| `ctt` | `content` | - |
|
|
952
|
+
| `cntri` | `counter-increment` | - |
|
|
953
|
+
| `cntrr` | `counter-reset` | - |
|
|
954
|
+
| `cntrs` | `counter-set` | - |
|
|
955
|
+
|
|
956
|
+
### Page Breaks
|
|
957
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
958
|
+
|----------|------------|------------------|
|
|
959
|
+
| `pg` | `page` | - |
|
|
960
|
+
| `pgba` | `page-break-after` | - |
|
|
961
|
+
| `pgbb` | `page-break-before` | - |
|
|
962
|
+
| `pgbi` | `page-break-inside` | - |
|
|
963
|
+
| `brka` | `break-after` | - |
|
|
964
|
+
| `brkb` | `break-before` | - |
|
|
965
|
+
| `brki` | `break-inside` | - |
|
|
966
|
+
|
|
967
|
+
### Other Advanced
|
|
968
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
969
|
+
|----------|------------|------------------|
|
|
970
|
+
| `a` | `all` | - |
|
|
971
|
+
| `is` | `isolation` | `i:isolate` |
|
|
972
|
+
| `z` | `z-index` | - |
|
|
973
|
+
| `ord` | `order` | - |
|
|
974
|
+
| `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
|
|
975
|
+
| `clr` | `clear` | - |
|
|
976
|
+
| `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
|
|
977
|
+
| `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
|
|
978
|
+
| `pe` | `pointer-events` | - |
|
|
979
|
+
| `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
|
|
980
|
+
| `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
|
|
981
|
+
| `zo` | `zoom` | - |
|
|
982
|
+
|
|
983
|
+
---
|
|
984
|
+
|
|
985
|
+
## 13. WebKit Specific
|
|
986
|
+
|
|
987
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
988
|
+
|----------|------------|------------------|
|
|
989
|
+
| `wlc` | `-webkit-line-clamp` | - |
|
|
990
|
+
| `wtfc` | `-webkit-text-fill-color` | - |
|
|
991
|
+
| `wts` | `-webkit-text-stroke` | - |
|
|
992
|
+
| `wtsc` | `-webkit-text-stroke-color` | - |
|
|
993
|
+
| `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
|
|
994
|
+
|
|
995
|
+
---
|
|
996
|
+
|
|
997
|
+
|
|
998
|
+
## 14. Special Values
|
|
999
|
+
|
|
1000
|
+
### Common Values
|
|
1001
|
+
|
|
1002
|
+
- `n` = `none`
|
|
1003
|
+
- `nm` = `normal`
|
|
1004
|
+
- `a` = `auto`
|
|
1005
|
+
- `i` = `inherit`
|
|
1006
|
+
- `in` = `initial`
|
|
1007
|
+
- `is` = `inline-start`
|
|
1008
|
+
- `ie` = `inline-end`
|
|
1009
|
+
- `tr` = `transparent`
|
|
1010
|
+
- `c` = `center`
|
|
1011
|
+
- `cl` = `collapse`
|
|
1012
|
+
- `l` = `left`
|
|
1013
|
+
- `r` = `right`
|
|
1014
|
+
- `h` = `hidden`
|
|
1015
|
+
- `v` = `visible`
|
|
1016
|
+
- `s` = `start`
|
|
1017
|
+
- `e` = `end`
|
|
1018
|
+
- `t` = `top`
|
|
1019
|
+
- `b` = `bottom`
|
|
1020
|
+
- `bs` = `block-start`
|
|
1021
|
+
- `be` = `block-end`
|
|
1022
|
+
|
|
1023
|
+
### Size Values
|
|
1024
|
+
|
|
1025
|
+
- `t` = `thin`
|
|
1026
|
+
- `m` = `medium`
|
|
1027
|
+
- `th` = `thick`
|
|
1028
|
+
|
|
1029
|
+
### Style Values
|
|
1030
|
+
|
|
1031
|
+
- `s` = `solid`
|
|
1032
|
+
- `d` = `dotted`
|
|
1033
|
+
- `ds` = `dashed`
|
|
1034
|
+
- `db` = `double`
|
|
1035
|
+
- `g` = `groove`
|
|
1036
|
+
- `r` = `ridge`
|
|
1037
|
+
- `i` = `inset`
|
|
1038
|
+
- `o` = `outset`
|
|
1039
|
+
|
|
1040
|
+
---
|
|
1041
|
+
|
|
1042
|
+
*Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)*
|
|
1043
|
+
# Hướng dẫn sử dụng xCSS
|
|
1044
|
+
|
|
1045
|
+
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ẽ:
|
|
1046
|
+
|
|
1047
|
+
* Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
|
|
1048
|
+
* 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**
|
|
1049
|
+
|
|
1050
|
+
|
|
1051
|
+
> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phần sau**.
|
|
1052
|
+
|
|
1053
|
+
## Cú pháp tổng quát
|
|
1054
|
+
|
|
1055
|
+
```
|
|
1056
|
+
[MQ:][layer]<property><value>[@selector]
|
|
1057
|
+
```
|
|
1058
|
+
|
|
1059
|
+
**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.
|
|
1060
|
+
|
|
1061
|
+
**Ví dụ cú pháp đúng:**
|
|
1062
|
+
- `cRed` - Màu đỏ (layer 0)
|
|
1063
|
+
- `5cRed` - Màu đỏ ở layer 5
|
|
1064
|
+
- `md:cRed` - Màu đỏ trên màn hình trung bình
|
|
1065
|
+
- `md:5cRed` - Màu đỏ ở layer 5 trên màn hình trung bình
|
|
1066
|
+
|
|
1067
|
+
### Các thành phần:
|
|
1068
|
+
|
|
1069
|
+
#### 1. Media Query (MQ) - Tùy chọn
|
|
1070
|
+
|
|
1071
|
+
- `xs:` - Màn hình nhỏ (max-width: 575px)
|
|
1072
|
+
- `sm:` - Màn hình nhỏ (min-width: 576px)
|
|
1073
|
+
- `md:` - Màn hình trung bình (min-width: 768px)
|
|
1074
|
+
- `lg:` - Màn hình lớn (min-width: 992px)
|
|
1075
|
+
- `xl:` - Màn hình rất lớn (min-width: 1200px)
|
|
1076
|
+
- `2xl:` - Màn hình cực lớn (min-width: 1400px)
|
|
1077
|
+
- `sma:` - Màn hình nhỏ trở xuống (max-width: 768px)
|
|
1078
|
+
- `mda:` - Màn hình trung bình trở xuống (max-width: 992px)
|
|
1079
|
+
- `lga:` - Màn hình lớn trở xuống (max-width: 1200px)
|
|
1080
|
+
- `xla:` - Màn hình rất lớn trở xuống (max-width: 1400px)
|
|
1081
|
+
|
|
1082
|
+
#### 2. Layer - Tùy chọn
|
|
1083
|
+
|
|
1084
|
+
- `1` đến `19` - Thứ tự ưu tiên CSS layer (số càng cao ưu tiên càng cao)
|
|
1085
|
+
- Mặc định: `0` (layer 0)
|
|
1086
|
+
- Mục đích: gom nhóm quy tắc theo tầng (base, component, utilities, overrides…)
|
|
1087
|
+
|
|
1088
|
+
#### 3. Property (Thuộc tính) - **BẮT BUỘC**
|
|
1089
|
+
|
|
1090
|
+
- Viết thường, có thể là tên đầy đủ hoặc viết tắt
|
|
1091
|
+
- 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`
|
|
1092
|
+
- Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
|
|
1093
|
+
|
|
1094
|
+
#### 4. Value (Giá trị) - **BẮT BUỘC**
|
|
1095
|
+
|
|
1096
|
+
- **Số**: `10`, `-4.5`, `0.5`, có thể kèm **đơn vị**: `10px`, `1.5rem`, `100%`
|
|
1097
|
+
- **Giá trị đặt tên** bắt đầu bằng **chữ hoa**: `Red`, `Center`, `Block`, `Fixed`, `None`
|
|
1098
|
+
- **Giá trị trong ngoặc nhọn** để ghi **nguyên văn**: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
|
|
1099
|
+
- **Biến CSS**: bắt đầu bằng `--`: `c--primary` → `color: var(--primary)`
|
|
1100
|
+
- **Quan trọng**: thêm `!` ngay trước giá trị để ra `!important`: `w!10px` → `width: 10px !important`
|
|
1101
|
+
- **Hàm**: dùng dạng **TitleCase** + `(...)` và dùng dấu `;` thay cho khoảng trắng:
|
|
1102
|
+
- `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
|
|
1103
|
+
- `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
|
|
1104
|
+
|
|
1105
|
+
#### 5. Selector - Tùy chọn
|
|
1106
|
+
|
|
1107
|
+
- Bắt đầu bằng `@`
|
|
1108
|
+
- Dấu `;` thay thế cho dấu cách
|
|
1109
|
+
- Có thể dùng giả lớp/giả phần tử, chọn phần tử con, hoặc kết hợp
|
|
1110
|
+
- Ví dụ: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
|
|
1111
|
+
|
|
1112
|
+
## Ví dụ sử dụng
|
|
1113
|
+
|
|
1114
|
+
### Cơ bản
|
|
1115
|
+
|
|
1116
|
+
```html
|
|
1117
|
+
<!-- Màu đỏ -->
|
|
1118
|
+
<div class="cRed">Văn bản màu đỏ</div>
|
|
1119
|
+
|
|
1120
|
+
<!-- Chiều rộng 100px -->
|
|
1121
|
+
<div class="w100px">Chiều rộng 100px</div>
|
|
1122
|
+
|
|
1123
|
+
<!-- Padding 20px -->
|
|
1124
|
+
<div class="p20px">Padding 20px</div>
|
|
1125
|
+
|
|
1126
|
+
<!-- Opacity 50% -->
|
|
1127
|
+
<div class="opc50%">Độ trong suốt 50%</div>
|
|
1128
|
+
|
|
1129
|
+
<!-- Font size 14px -->
|
|
1130
|
+
<div class="fns14px">Cỡ chữ 14px</div>
|
|
1131
|
+
```
|
|
1132
|
+
|
|
1133
|
+
### Với Media Query
|
|
1134
|
+
|
|
1135
|
+
```html
|
|
1136
|
+
<!-- Màu đỏ trên màn hình lớn -->
|
|
1137
|
+
<div class="lg:cRed">Màu đỏ trên desktop</div>
|
|
1138
|
+
|
|
1139
|
+
<!-- Ẩn trên màn hình nhỏ -->
|
|
1140
|
+
<div class="xs:vHidden">Ẩn trên mobile</div>
|
|
1141
|
+
|
|
1142
|
+
<!-- Responsive width -->
|
|
1143
|
+
<div class="w100% md:w50% lg:w33%">Responsive width</div>
|
|
1144
|
+
```
|
|
1145
|
+
|
|
1146
|
+
### Với Layer
|
|
1147
|
+
|
|
1148
|
+
```html
|
|
1149
|
+
<!-- Layer ưu tiên cao -->
|
|
1150
|
+
<div class="5cRed">Màu đỏ ưu tiên cao</div>
|
|
1151
|
+
|
|
1152
|
+
<!-- Layer ưu tiên thấp -->
|
|
1153
|
+
<div class="1cBlue">Màu xanh ưu tiên thấp</div>
|
|
1154
|
+
|
|
1155
|
+
<!-- Kết hợp layer và media query -->
|
|
1156
|
+
<div class="md:7cGreen">Màu xanh layer 7 trên desktop</div>
|
|
1157
|
+
```
|
|
1158
|
+
|
|
1159
|
+
### Với Selector
|
|
1160
|
+
|
|
1161
|
+
```html
|
|
1162
|
+
<!-- Hover effect -->
|
|
1163
|
+
<div class="cRed@:hover">Đỏ khi hover</div>
|
|
1164
|
+
|
|
1165
|
+
<!-- Focus effect -->
|
|
1166
|
+
<input class="bdw2px@:focus" placeholder="Border khi focus">
|
|
1167
|
+
|
|
1168
|
+
<!-- Child selector -->
|
|
1169
|
+
<div class="cBlue@>a">Màu xanh cho thẻ con a</div>
|
|
1170
|
+
|
|
1171
|
+
<!-- Complex selector -->
|
|
1172
|
+
<div class="cRed@.btn;:hover">Màu đỏ khi hover button</div>
|
|
1173
|
+
```
|
|
1174
|
+
|
|
1175
|
+
### Với giá trị đặc biệt
|
|
1176
|
+
|
|
1177
|
+
```html
|
|
1178
|
+
<!-- !important -->
|
|
1179
|
+
<div class="c!red">Màu đỏ !important</div>
|
|
1180
|
+
|
|
1181
|
+
<!-- CSS Variable -->
|
|
1182
|
+
<div class="c--primary">Màu từ CSS variable</div>
|
|
1183
|
+
|
|
1184
|
+
<!-- Giá trị tùy chỉnh -->
|
|
1185
|
+
<div class="w{calc(100%;-;20px)}">Chiều rộng tính toán</div>
|
|
1186
|
+
|
|
1187
|
+
<!-- Hàm CSS -->
|
|
1188
|
+
<div class="wClamp(280px;640px;100%)">Width với clamp</div>
|
|
1189
|
+
|
|
1190
|
+
<!-- Box shadow phức tạp -->
|
|
1191
|
+
<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Shadow phức tạp</div>
|
|
1192
|
+
```
|
|
1193
|
+
|
|
1194
|
+
### Kết hợp nhiều thuộc tính với `&`
|
|
1195
|
+
|
|
1196
|
+
```html
|
|
1197
|
+
<!-- Nhiều thuộc tính cùng lúc -->
|
|
1198
|
+
<div class="cRed&fw700&taC">Màu đỏ, font-weight 700, căn giữa</div>
|
|
1199
|
+
|
|
1200
|
+
<!-- Flexbox layout -->
|
|
1201
|
+
<div class="dF&aiC&jcSp">Flexbox center và space-between</div>
|
|
1202
|
+
|
|
1203
|
+
<!-- Padding và margin -->
|
|
1204
|
+
<div class="p8px&m0">Padding 8px và margin 0</div>
|
|
1205
|
+
|
|
1206
|
+
<!-- Kết hợp với selector -->
|
|
1207
|
+
<div class="cRed&fw700@:hover">Màu đỏ và font-weight 700 khi hover</div>
|
|
1208
|
+
```
|
|
1209
|
+
|
|
1210
|
+
## Quy tắc ưu tiên & va chạm
|
|
1211
|
+
|
|
1212
|
+
1. **@layer**: lớp số lớn thắng lớp số nhỏ (khi cùng nguồn gốc/specificity)
|
|
1213
|
+
2. **Specificity** của selector: selector cụ thể hơn thắng
|
|
1214
|
+
3. **Thứ tự xuất hiện** trong cùng layer và cùng specificity
|
|
1215
|
+
4. **!important** luôn thắng các quy tắc thường trong cùng phạm vi cascade
|
|
1216
|
+
|
|
1217
|
+
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.
|
|
1218
|
+
|
|
1219
|
+
## Quy tắc quan trọng
|
|
1220
|
+
|
|
1221
|
+
### ✅ Hợp lệ
|
|
1222
|
+
|
|
1223
|
+
- `cRed` - Màu đỏ (property: `c`, value: `Red`)
|
|
1224
|
+
- `w10px` - Chiều rộng 10px (property: `w`, value: `10px`)
|
|
1225
|
+
- `md:cRed` - Màu đỏ trên màn hình trung bình (MQ: `md`, property: `c`, value: `Red`)
|
|
1226
|
+
- `2w100px` - Chiều rộng 100px ở layer 2 (layer: `2`, property: `w`, value: `100px`)
|
|
1227
|
+
- `cRed@:hover` - Màu đỏ khi hover (property: `c`, value: `Red`, selector: `@:hover`)
|
|
1228
|
+
- `w!100px` - Chiều rộng 100px !important (property: `w`, value: `!100px`)
|
|
1229
|
+
- `c{red}` - Màu đỏ với giá trị tùy chỉnh (property: `c`, value: `{red}`)
|
|
1230
|
+
- `cRed&w700` - Kết hợp nhiều thuộc tính (property: `c`, value: `Red`, property: `w`, value: `700`)
|
|
1231
|
+
- `wCalc(100%;-;20px)` - Hàm CSS với dấu `;` (property: `w`, value: `Calc(100%;-;20px)`)
|
|
1232
|
+
|
|
1233
|
+
### ❌ Không hợp lệ
|
|
1234
|
+
|
|
1235
|
+
- `Cred` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
|
|
1236
|
+
- `C{red}` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
|
|
1237
|
+
- `cRed}` - Thiếu dấu mở ngoặc (syntax lỗi)
|
|
1238
|
+
- `c-red` - Dấu gạch ngang không được phép (property không được có dấu `-`)
|
|
1239
|
+
- `W-10px` - Chữ W viết hoa và dấu gạch ngang (property phải viết thường)
|
|
1240
|
+
- `w-!10px` - Dấu gạch ngang không được phép (property không được có dấu `-`)
|
|
1241
|
+
- `cRed @:hover` - Có dấu cách trong class name (không được có dấu cách)
|
|
1242
|
+
- `c` - Thiếu value (bắt buộc phải có cả property và value)
|
|
1243
|
+
- `Red` - Thiếu property (bắt buộc phải có cả property và value)
|
|
1244
|
+
|
|
1245
|
+
## Lỗi phổ biến & cách tránh
|
|
1246
|
+
|
|
1247
|
+
* **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
|
|
1248
|
+
* **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
|
|
1249
|
+
* **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
|
|
1250
|
+
* **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
|
|
1251
|
+
* **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
|
|
1252
|
+
* **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`
|
|
1253
|
+
|
|
1254
|
+
## Lưu ý
|
|
1255
|
+
|
|
1256
|
+
1. **Property và Value bắt buộc** - Mỗi class phải có cả thuộc tính và giá trị CSS
|
|
1257
|
+
2. **Tên class phải viết thường** - Chỉ property viết thường, value có thể có ký tự HOA
|
|
1258
|
+
3. **Không dùng dấu cách** - Dùng dấu `;` thay thế
|
|
1259
|
+
4. **CSS.supports validation** - Tất cả class phải được CSS hỗ trợ
|
|
1260
|
+
5. **Thứ tự ưu tiên** - Layer số cao hơn sẽ có ưu tiên cao hơn
|
|
1261
|
+
6. **Media Query** - Chỉ áp dụng trong khoảng màn hình tương ứng
|
|
1262
|
+
7. **Khoảng trắng trong giá trị** dùng dấu `;`. Ví dụ: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
|
|
1263
|
+
|
|
1264
|
+
## Lời khuyên từ kinh nghiệm thực tế
|
|
1265
|
+
|
|
1266
|
+
### 🎯 **Nguyên tắc đặt tên class**
|
|
1267
|
+
|
|
1268
|
+
#### ✅ **Nên làm:**
|
|
1269
|
+
- **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
|
|
1270
|
+
- **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
|
|
1271
|
+
|
|
1272
|
+
#### ❌ **Tránh:**
|
|
1273
|
+
- **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
|
|
1274
|
+
- **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
|
|
1275
|
+
- **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
|
|
1276
|
+
|
|
1277
|
+
### 🎨 **Quản lý giá trị phức tạp**
|
|
1278
|
+
|
|
1279
|
+
#### **Sử dụng CSS Variables cho giá trị dài:**
|
|
1280
|
+
```css
|
|
1281
|
+
:root {
|
|
1282
|
+
--shadow-card: 0 4px 8px rgba(0,0,0,0.1);
|
|
1283
|
+
--shadow-hover: 0 8px 16px rgba(0,0,0,0.15);
|
|
1284
|
+
--border-radius: 8px;
|
|
1285
|
+
--spacing-sm: 8px;
|
|
1286
|
+
--spacing-md: 16px;
|
|
1287
|
+
--spacing-lg: 24px;
|
|
1288
|
+
}
|
|
1289
|
+
```
|
|
1290
|
+
|
|
1291
|
+
```html
|
|
1292
|
+
<!-- Thay vì viết dài -->
|
|
1293
|
+
<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
|
|
1294
|
+
|
|
1295
|
+
<!-- Nên dùng biến -->
|
|
1296
|
+
<div class="bxsh--shadow-card bdra--border-radius p--spacing-md">
|
|
1297
|
+
```
|
|
1298
|
+
|
|
1299
|
+
#### **Tạo component classes cho pattern thường dùng:**
|
|
1300
|
+
```html
|
|
1301
|
+
<!-- Thay vì lặp lại nhiều lần -->
|
|
1302
|
+
<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
|
|
1303
|
+
|
|
1304
|
+
<!-- Nên tạo component class -->
|
|
1305
|
+
<div class="card">
|
|
1306
|
+
```
|
|
1307
|
+
|
|
1308
|
+
### 📱 **Responsive Design Best Practices**
|
|
1309
|
+
|
|
1310
|
+
#### **Sử dụng mobile-first approach:**
|
|
1311
|
+
```html
|
|
1312
|
+
<!-- Base styles cho mobile -->
|
|
1313
|
+
<div class="w100% p8px">
|
|
1314
|
+
|
|
1315
|
+
<!-- Override cho desktop -->
|
|
1316
|
+
<div class="md:w50% md:p16px lg:w33% lg:p24px">
|
|
1317
|
+
```
|
|
1318
|
+
|
|
1319
|
+
#### **Nhóm breakpoints logic:**
|
|
1320
|
+
```html
|
|
1321
|
+
<!-- Layout chính -->
|
|
1322
|
+
<div class="dB md:dF">
|
|
1323
|
+
|
|
1324
|
+
<!-- Spacing responsive -->
|
|
1325
|
+
<div class="p8px md:p16px lg:p24px">
|
|
1326
|
+
|
|
1327
|
+
<!-- Typography responsive -->
|
|
1328
|
+
<div class="fns14px md:fns16px lg:fns18px">
|
|
1329
|
+
```
|
|
1330
|
+
|
|
1331
|
+
### 🎭 **Layer Management**
|
|
1332
|
+
|
|
1333
|
+
#### **Tổ chức layers theo hierarchy:**
|
|
1334
|
+
```html
|
|
1335
|
+
<!-- Base styles (0) -->
|
|
1336
|
+
<div class="cBlack fns16px">
|
|
1337
|
+
|
|
1338
|
+
<!-- Component styles (1-5) -->
|
|
1339
|
+
<div class="2btnPrimary">
|
|
1340
|
+
|
|
1341
|
+
<!-- Utility styles (6-10) -->
|
|
1342
|
+
<div class="8m16px">
|
|
1343
|
+
|
|
1344
|
+
<!-- Override styles (11-19) -->
|
|
1345
|
+
<div class="15cRed">
|
|
1346
|
+
```
|
|
1347
|
+
|
|
1348
|
+
### 🔧 **Performance Tips**
|
|
1349
|
+
|
|
1350
|
+
#### **Tránh over-engineering:**
|
|
1351
|
+
```html
|
|
1352
|
+
<!-- Đơn giản và hiệu quả -->
|
|
1353
|
+
<div class="dF&aiC&p16px">
|
|
1354
|
+
|
|
1355
|
+
<!-- Thay vì phức tạp không cần thiết -->
|
|
1356
|
+
<div class="dF&aiC&jcC&p16px&m0&b0&bgcT">
|
|
1357
|
+
```
|
|
1358
|
+
|
|
1359
|
+
#### **Sử dụng shorthand khi có thể:**
|
|
1360
|
+
```html
|
|
1361
|
+
<!-- Margin shorthand -->
|
|
1362
|
+
<div class="m16px"> <!-- margin: 16px -->
|
|
1363
|
+
<div class="mt8px&mb8px"> <!-- margin-top: 8px; margin-bottom: 8px -->
|
|
1364
|
+
|
|
1365
|
+
<!-- Padding shorthand -->
|
|
1366
|
+
<div class="p16px"> <!-- padding: 16px -->
|
|
1367
|
+
<div class="px16px&py8px"> <!-- padding: 8px 16px -->
|
|
1368
|
+
```
|
|
1369
|
+
|
|
1370
|
+
### 🎨 **Design System Integration**
|
|
1371
|
+
|
|
1372
|
+
#### **Tạo design tokens:**
|
|
1373
|
+
```css
|
|
1374
|
+
:root {
|
|
1375
|
+
/* Colors */
|
|
1376
|
+
--color-primary: #0070f3;
|
|
1377
|
+
--color-secondary: #7928ca;
|
|
1378
|
+
--color-success: #0070f3;
|
|
1379
|
+
--color-warning: #f5a623;
|
|
1380
|
+
--color-error: #e00;
|
|
1381
|
+
|
|
1382
|
+
/* Spacing scale */
|
|
1383
|
+
--space-1: 4px;
|
|
1384
|
+
--space-2: 8px;
|
|
1385
|
+
--space-3: 12px;
|
|
1386
|
+
--space-4: 16px;
|
|
1387
|
+
--space-5: 20px;
|
|
1388
|
+
--space-6: 24px;
|
|
1389
|
+
|
|
1390
|
+
/* Typography scale */
|
|
1391
|
+
--text-xs: 12px;
|
|
1392
|
+
--text-sm: 14px;
|
|
1393
|
+
--text-base: 16px;
|
|
1394
|
+
--text-lg: 18px;
|
|
1395
|
+
--text-xl: 20px;
|
|
1396
|
+
}
|
|
1397
|
+
```
|
|
1398
|
+
|
|
1399
|
+
#### **Sử dụng semantic naming:**
|
|
1400
|
+
```html
|
|
1401
|
+
<!-- Thay vì màu cụ thể -->
|
|
1402
|
+
<div class="cBlue">
|
|
1403
|
+
|
|
1404
|
+
<!-- Nên dùng semantic -->
|
|
1405
|
+
<div class="cPrimary">
|
|
1406
|
+
<div class="cSuccess">
|
|
1407
|
+
<div class="cError">
|
|
1408
|
+
```
|
|
1409
|
+
|
|
1410
|
+
### 🚀 **Maintenance Tips**
|
|
1411
|
+
|
|
1412
|
+
#### **Documentation cho team:**
|
|
1413
|
+
```html
|
|
1414
|
+
<!-- Component: Button Primary -->
|
|
1415
|
+
<!-- Usage: <button class="btnPrimary">Click me</button> -->
|
|
1416
|
+
<!-- Variants: btnSecondary, btnDanger, btnGhost -->
|
|
1417
|
+
<button class="btnPrimary">Click me</button>
|
|
1418
|
+
```
|
|
1419
|
+
|
|
1420
|
+
#### **Consistent naming convention:**
|
|
1421
|
+
```html
|
|
1422
|
+
<!-- Layout -->
|
|
1423
|
+
<div class="container">
|
|
1424
|
+
<div class="row">
|
|
1425
|
+
<div class="col">
|
|
1426
|
+
|
|
1427
|
+
<!-- Components -->
|
|
1428
|
+
<div class="card">
|
|
1429
|
+
<div class="btn">
|
|
1430
|
+
<div class="input">
|
|
1431
|
+
|
|
1432
|
+
<!-- Utilities -->
|
|
1433
|
+
<div class="textCenter">
|
|
1434
|
+
<div class="mAuto">
|
|
1435
|
+
<div class="dNone">
|
|
1436
|
+
```
|
|
1437
|
+
|
|
1438
|
+
### 💡 **Pro Tips**
|
|
1439
|
+
|
|
1440
|
+
1. **Luôn test trên mobile trước** - Mobile-first approach
|
|
1441
|
+
2. **Sử dụng browser dev tools** - Kiểm tra CSS output
|
|
1442
|
+
3. **Tạo style guide** - Document các pattern thường dùng
|
|
1443
|
+
4. **Code review** - Đảm bảo consistency trong team
|
|
1444
|
+
5. **Performance monitoring** - Theo dõi CSS bundle size
|
|
1445
|
+
6. **Accessibility first** - Luôn nghĩ đến người dùng khuyết tật
|
|
1446
|
+
|
|
1447
|
+
## Ví dụ tổng hợp
|
|
1448
|
+
|
|
1449
|
+
**HTML**
|
|
1450
|
+
|
|
1451
|
+
```html
|
|
1452
|
+
<div class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover">
|
|
1453
|
+
<a class="cBlue wClamp(120px;240px;100%)">Link</a>
|
|
1454
|
+
<button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
|
|
1455
|
+
</div>
|
|
1456
|
+
```
|
|
1457
|
+
|
|
1458
|
+
**CSS (phát sinh ý tưởng)**
|
|
1459
|
+
|
|
1460
|
+
```css
|
|
1461
|
+
@media (min-width: 768px){
|
|
1462
|
+
@layer l7{
|
|
1463
|
+
.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,.1) }
|
|
1464
|
+
.md\:7\.c\-\-fg\@\>a\;\:hover > a:hover{ color: var(--fg) }
|
|
1465
|
+
.md\:7\.wClamp\(120px\;240px\;100\%\){ width: clamp(120px,240px,100%) }
|
|
1466
|
+
}
|
|
1467
|
+
}
|
|
1468
|
+
.cBlue{ color: blue }
|
|
1469
|
+
.w\!120px{ width: 120px !important }
|
|
1470
|
+
.h40px{ height: 40px }
|
|
1471
|
+
.bdra8px{ border-radius: 8px }
|
|
1472
|
+
.cWhite{ color: #fff }
|
|
1473
|
+
.bgc\#0070f3{ background-color: #0070f3 }
|
|
1474
|
+
```
|
|
1475
|
+
|
|
1476
|
+
## Bảng tra cứu nhanh
|
|
1477
|
+
|
|
1478
|
+
### Media Query
|
|
1479
|
+
|
|
1480
|
+
| Ký hiệu | Kích thước màn hình |
|
|
1481
|
+
| --------- | ------------------------ |
|
|
1482
|
+
| `xs:` | ≤ 575px |
|
|
1483
|
+
| `sm:` | ≥ 576px |
|
|
1484
|
+
| `md:` | ≥ 768px |
|
|
1485
|
+
| `lg:` | ≥ 992px |
|
|
1486
|
+
| `xl:` | ≥ 1200px |
|
|
1487
|
+
| `2xl:` | ≥ 1400px |
|
|
1488
|
+
|
|
1489
|
+
### Layer
|
|
1490
|
+
|
|
1491
|
+
| Ký hiệu | Mô tả |
|
|
1492
|
+
| ---------- | ----------------------------------------------------- |
|
|
1493
|
+
| `0` | Layer mặc định (ưu tiên thấp) |
|
|
1494
|
+
| `1-19` | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
|
|
1495
|
+
|
|
1496
|
+
### Giá trị đặc biệt
|
|
1497
|
+
|
|
1498
|
+
| Ký hiệu | Ý nghĩa |
|
|
1499
|
+
| --------- | --------------------- |
|
|
1500
|
+
| `!` | !important |
|
|
1501
|
+
| `--` | CSS Variable |
|
|
1502
|
+
| `{}` | Giá trị tùy chỉnh |
|
|
1503
|
+
| `;` | Thay thế dấu cách |
|
|
1504
|
+
|
|
1505
|
+
## Câu hỏi thường gặp (FAQ)
|
|
1506
|
+
|
|
1507
|
+
**Hỏi:** Tại sao phải viết hoa chữ cái đầu giá trị dạng từ khoá?
|
|
1508
|
+
|
|
1509
|
+
**Đá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.
|
|
1510
|
+
|
|
1511
|
+
**Hỏi:** Dùng dấu gì cho khoảng trắng?
|
|
1512
|
+
|
|
1513
|
+
**Đáp:** Dùng dấu `;` trong **giá trị** và **selector** để không phá vỡ tên class.
|
|
1514
|
+
|
|
1515
|
+
**Hỏi:** Tôi muốn thêm breakpoint mới?
|
|
1516
|
+
|
|
1517
|
+
**Đá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.
|
|
1518
|
+
|
|
1519
|
+
**Hỏi:** Có cần escape khi viết trong HTML?
|
|
1520
|
+
|
|
1521
|
+
**Đáp:** Không. Bạn viết thô như quy ước. Bộ biên dịch sẽ escape khi phát sinh CSS.
|
|
1522
|
+
|
|
1523
|
+
---
|
|
1524
|
+
|
|
1525
|
+
# Bảng tra cứu đầy đủ thuộc tính và giá trị xCSS
|
|
1526
|
+
|
|
1527
|
+
## Cấu trúc dữ liệu
|
|
1528
|
+
|
|
1529
|
+
- **Viết tắt**: Ký hiệu ngắn gọn để sử dụng trong class
|
|
1530
|
+
- **Thuộc tính CSS**: Tên đầy đủ của thuộc tính CSS
|
|
1531
|
+
- **Giá trị viết tắt**: Mapping từ ký hiệu sang giá trị CSS (nếu có)
|
|
1532
|
+
|
|
1533
|
+
---
|
|
1534
|
+
|
|
1535
|
+
## 1. Layout & Display
|
|
1536
|
+
|
|
1537
|
+
### Display
|
|
1538
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1539
|
+
|----------|------------|------------------|
|
|
1540
|
+
| `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` |
|
|
1541
|
+
|
|
1542
|
+
### Position
|
|
1543
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1544
|
+
|----------|------------|------------------|
|
|
1545
|
+
| `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
|
|
1546
|
+
|
|
1547
|
+
### Sizing
|
|
1548
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1549
|
+
|----------|------------|------------------|
|
|
1550
|
+
| `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
|
|
1551
|
+
| `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
1552
|
+
| `mw` | `max-width` | - |
|
|
1553
|
+
| `mxw` | `max-width` | - |
|
|
1554
|
+
| `mh` | `max-height` | - |
|
|
1555
|
+
| `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
1556
|
+
| `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
1557
|
+
| `blks` | `block-size` | - |
|
|
1558
|
+
| `ins` | `inline-size` | - |
|
|
1559
|
+
| `mbs` | `max-block-size` | - |
|
|
1560
|
+
| `mis` | `max-inline-size` | - |
|
|
1561
|
+
| `mibs` | `min-block-size` | - |
|
|
1562
|
+
| `misz` | `min-inline-size` | - |
|
|
1563
|
+
|
|
1564
|
+
### Positioning
|
|
1565
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1566
|
+
|----------|------------|------------------|
|
|
1567
|
+
| `t` | `top` | - |
|
|
1568
|
+
| `r` | `right` | - |
|
|
1569
|
+
| `b` | `bottom` | - |
|
|
1570
|
+
| `l` | `left` | - |
|
|
1571
|
+
| `i` | `inset` | - |
|
|
1572
|
+
| `iblk` | `inset-block` | - |
|
|
1573
|
+
| `ibe` | `inset-block-end` | - |
|
|
1574
|
+
| `ibsta` | `inset-block-start` | - |
|
|
1575
|
+
| `ii` | `inset-inline` | - |
|
|
1576
|
+
| `iie` | `inset-inline-end` | - |
|
|
1577
|
+
| `iis` | `inset-inline-start` | - |
|
|
1578
|
+
|
|
1579
|
+
---
|
|
1580
|
+
|
|
1581
|
+
## 2. Spacing
|
|
1582
|
+
|
|
1583
|
+
### Margin
|
|
1584
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1585
|
+
|----------|------------|------------------|
|
|
1586
|
+
| `m` | `margin` | - |
|
|
1587
|
+
| `mt` | `margin-top` | - |
|
|
1588
|
+
| `mr` | `margin-right` | - |
|
|
1589
|
+
| `mb` | `margin-bottom` | - |
|
|
1590
|
+
| `ml` | `margin-left` | - |
|
|
1591
|
+
| `mblk` | `margin-block` | - |
|
|
1592
|
+
| `mbe` | `margin-block-end` | - |
|
|
1593
|
+
| `mbsta` | `margin-block-start` | - |
|
|
1594
|
+
| `min` | `margin-inline` | - |
|
|
1595
|
+
| `mie` | `margin-inline-end` | - |
|
|
1596
|
+
| `mista` | `margin-inline-start` | - |
|
|
1597
|
+
|
|
1598
|
+
### Padding
|
|
1599
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1600
|
+
|----------|------------|------------------|
|
|
1601
|
+
| `p` | `padding` | - |
|
|
1602
|
+
| `pt` | `padding-top` | - |
|
|
1603
|
+
| `pr` | `padding-right` | - |
|
|
1604
|
+
| `pb` | `padding-bottom` | - |
|
|
1605
|
+
| `pl` | `padding-left` | - |
|
|
1606
|
+
| `pblk` | `padding-block` | - |
|
|
1607
|
+
| `pbe` | `padding-block-end` | - |
|
|
1608
|
+
| `pbs` | `padding-block-start` | - |
|
|
1609
|
+
| `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
|
|
1610
|
+
| `pie` | `padding-inline-end` | - |
|
|
1611
|
+
| `pis` | `padding-inline-start` | - |
|
|
1612
|
+
|
|
1613
|
+
---
|
|
1614
|
+
|
|
1615
|
+
## 3. Colors & Background
|
|
1616
|
+
|
|
1617
|
+
### Color
|
|
1618
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1619
|
+
|----------|------------|------------------|
|
|
1620
|
+
| `c` | `color` | `i:inherit`, `t:transparent` |
|
|
1621
|
+
|
|
1622
|
+
### Background
|
|
1623
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1624
|
+
|----------|------------|------------------|
|
|
1625
|
+
| `bg` | `background` | - |
|
|
1626
|
+
| `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
|
|
1627
|
+
| `bgi` | `background-image` | - |
|
|
1628
|
+
| `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` |
|
|
1629
|
+
| `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
|
|
1630
|
+
| `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
|
|
1631
|
+
| `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` |
|
|
1632
|
+
| `bgs` | `background-size` | `c:contain` |
|
|
1633
|
+
| `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local` |
|
|
1634
|
+
| `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` |
|
|
1635
|
+
| `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
|
|
1636
|
+
| `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
|
|
1637
|
+
|
|
1638
|
+
---
|
|
1639
|
+
|
|
1640
|
+
## 4. Border
|
|
1641
|
+
|
|
1642
|
+
### Border General
|
|
1643
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1644
|
+
|----------|------------|------------------|
|
|
1645
|
+
| `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
1646
|
+
| `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
|
|
1647
|
+
| `bdc` | `border-color` | - |
|
|
1648
|
+
| `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
|
|
1649
|
+
|
|
1650
|
+
### Border Sides
|
|
1651
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1652
|
+
|----------|------------|------------------|
|
|
1653
|
+
| `bdt` | `border-top` | - |
|
|
1654
|
+
| `bdr` | `border-right` | - |
|
|
1655
|
+
| `bdb` | `border-bottom` | - |
|
|
1656
|
+
| `bdl` | `border-left` | - |
|
|
1657
|
+
|
|
1658
|
+
### Border Radius
|
|
1659
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1660
|
+
|----------|------------|------------------|
|
|
1661
|
+
| `bda` | `border-radius` | - |
|
|
1662
|
+
| `bdra` | `border-radius` | - |
|
|
1663
|
+
| `bdtlr` | `border-top-left-radius` | - |
|
|
1664
|
+
| `bdtrr` | `border-top-right-radius` | - |
|
|
1665
|
+
| `bdblr` | `border-bottom-left-radius` | - |
|
|
1666
|
+
| `bdbrr` | `border-bottom-right-radius` | - |
|
|
1667
|
+
| `bdeer` | `border-end-end-radius` | - |
|
|
1668
|
+
| `bdesr` | `border-end-start-radius` | - |
|
|
1669
|
+
| `bdser` | `border-start-end-radius` | - |
|
|
1670
|
+
| `bdssr` | `border-start-start-radius` | - |
|
|
1671
|
+
|
|
1672
|
+
### Border Block/Inline
|
|
1673
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1674
|
+
|----------|------------|------------------|
|
|
1675
|
+
| `bdblk` | `border-block` | - |
|
|
1676
|
+
| `bdblc` | `border-block-color` | - |
|
|
1677
|
+
| `bdble` | `border-block-end` | - |
|
|
1678
|
+
| `bdbls` | `border-block-start` | - |
|
|
1679
|
+
| `bdblst` | `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
1680
|
+
| `bdblwi` | `border-block-width` | - |
|
|
1681
|
+
| `bdi` | `border-inline` | - |
|
|
1682
|
+
| `bdic` | `border-inline-color` | - |
|
|
1683
|
+
| `bdie` | `border-inline-end` | - |
|
|
1684
|
+
| `bdista` | `border-inline-start` | - |
|
|
1685
|
+
| `bdistl` | `border-inline-style` | - |
|
|
1686
|
+
| `bdinw` | `border-inline-width` | - |
|
|
1687
|
+
|
|
1688
|
+
---
|
|
1689
|
+
|
|
1690
|
+
## 5. Typography
|
|
1691
|
+
|
|
1692
|
+
### Font
|
|
1693
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1694
|
+
|----------|------------|------------------|
|
|
1695
|
+
| `fn` | `font` | - |
|
|
1696
|
+
| `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` |
|
|
1697
|
+
| `fnf` | `font-family` | - |
|
|
1698
|
+
| `fns` | `font-size` | - |
|
|
1699
|
+
| `fw` | `font-weight` | - |
|
|
1700
|
+
| `fnw` | `font-weight` | - |
|
|
1701
|
+
| `fnsty` | `font-style` | - |
|
|
1702
|
+
| `fnstr` | `font-stretch` | - |
|
|
1703
|
+
| `fnfs` | `font-feature-settings` | - |
|
|
1704
|
+
| `fnk` | `font-kerning` | - |
|
|
1705
|
+
| `fnlo` | `font-language-override` | - |
|
|
1706
|
+
| `fnos` | `font-optical-sizing` | - |
|
|
1707
|
+
| `fnp` | `font-palette` | - |
|
|
1708
|
+
| `fnsa` | `font-size-adjust` | - |
|
|
1709
|
+
| `fnsyn` | `font-synthesis` | - |
|
|
1710
|
+
| `fnsp` | `font-synthesis-position` | - |
|
|
1711
|
+
| `fnssc` | `font-synthesis-small-caps` | - |
|
|
1712
|
+
| `fnss` | `font-synthesis-style` | - |
|
|
1713
|
+
| `fnsw` | `font-synthesis-weight` | - |
|
|
1714
|
+
| `fnv` | `font-variant` | - |
|
|
1715
|
+
| `fnva` | `font-variant-alternates` | - |
|
|
1716
|
+
| `fnvc` | `font-variant-caps` | - |
|
|
1717
|
+
| `fnvea` | `font-variant-east-asian` | - |
|
|
1718
|
+
| `fnve` | `font-variant-emoji` | - |
|
|
1719
|
+
| `fnvl` | `font-variant-ligatures` | - |
|
|
1720
|
+
| `fnvn` | `font-variant-numeric` | - |
|
|
1721
|
+
| `fnvp` | `font-variant-position` | - |
|
|
1722
|
+
| `fnvs` | `font-variation-settings` | - |
|
|
1723
|
+
|
|
1724
|
+
### Text
|
|
1725
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1726
|
+
|----------|------------|------------------|
|
|
1727
|
+
| `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
|
|
1728
|
+
| `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
|
|
1729
|
+
| `td` | `text-decoration` | `u:underline` |
|
|
1730
|
+
| `tdc` | `text-decoration-color` | - |
|
|
1731
|
+
| `tdl` | `text-decoration-line` | `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
|
|
1732
|
+
| `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
|
|
1733
|
+
| `tdt` | `text-decoration-thickness` | `ff:from-font` |
|
|
1734
|
+
| `tdsi` | `text-decoration-skip-ink` | - |
|
|
1735
|
+
| `teph` | `text-emphasis` | - |
|
|
1736
|
+
| `tec` | `text-emphasis-color` | - |
|
|
1737
|
+
| `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
|
|
1738
|
+
| `tes` | `text-emphasis-style` | - |
|
|
1739
|
+
| `ti` | `text-indent` | - |
|
|
1740
|
+
| `tj` | `text-justify` | `iw:inter-word`, `ic:inter-character`, `d:distribute` |
|
|
1741
|
+
| `tor` | `text-orientation` | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation` |
|
|
1742
|
+
| `tol` | `text-overflow` | `c:clip`, `e:ellipsis` |
|
|
1743
|
+
| `trd` | `text-rendering` | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision` |
|
|
1744
|
+
| `tsh` | `text-shadow` | - |
|
|
1745
|
+
| `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
|
|
1746
|
+
| `tuo` | `text-underline-offset` | - |
|
|
1747
|
+
| `tup` | `text-underline-position` | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under` |
|
|
1748
|
+
| `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
|
|
1749
|
+
|
|
1750
|
+
### Line & Spacing
|
|
1751
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1752
|
+
|----------|------------|------------------|
|
|
1753
|
+
| `lh` | `line-height` | - |
|
|
1754
|
+
| `lts` | `letter-spacing` | `n:normal` |
|
|
1755
|
+
| `wrs` | `word-spacing` | - |
|
|
1756
|
+
| `lbrk` | `line-break` | - |
|
|
1757
|
+
| `wrb` | `word-break` | - |
|
|
1758
|
+
| `wrtm` | `writing-mode` | - |
|
|
1759
|
+
|
|
1760
|
+
---
|
|
1761
|
+
|
|
1762
|
+
## 6. Flexbox
|
|
1763
|
+
|
|
1764
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1765
|
+
|----------|------------|------------------|
|
|
1766
|
+
| `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
|
|
1767
|
+
| `fxb` | `flex-basis` | - |
|
|
1768
|
+
| `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
|
|
1769
|
+
| `fxf` | `flex-flow` | - |
|
|
1770
|
+
| `fxg` | `flex-grow` | - |
|
|
1771
|
+
| `fxs` | `flex-shrink` | - |
|
|
1772
|
+
| `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
|
|
1773
|
+
| `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` |
|
|
1774
|
+
| `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` |
|
|
1775
|
+
| `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` |
|
|
1776
|
+
| `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` |
|
|
1777
|
+
|
|
1778
|
+
---
|
|
1779
|
+
|
|
1780
|
+
## 7. Grid
|
|
1781
|
+
|
|
1782
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1783
|
+
|----------|------------|------------------|
|
|
1784
|
+
| `g` | `grid` | - |
|
|
1785
|
+
| `ga` | `grid-area` | - |
|
|
1786
|
+
| `gc` | `grid-column` | `f:1 / -1` |
|
|
1787
|
+
| `gce` | `grid-column-end` | - |
|
|
1788
|
+
| `gcs` | `grid-column-start` | - |
|
|
1789
|
+
| `gr` | `grid-row` | `f:1 / -1` |
|
|
1790
|
+
| `gre` | `grid-row-end` | - |
|
|
1791
|
+
| `grs` | `grid-row-start` | - |
|
|
1792
|
+
| `gt` | `grid-template` | - |
|
|
1793
|
+
| `gta` | `grid-template-areas` | - |
|
|
1794
|
+
| `gtc` | `grid-template-columns` | `s:subgrid` |
|
|
1795
|
+
| `gtr` | `grid-template-rows` | `s:subgrid` |
|
|
1796
|
+
| `gac` | `grid-auto-columns` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
|
|
1797
|
+
| `gar` | `grid-auto-rows` | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)` |
|
|
1798
|
+
| `gaf` | `grid-auto-flow` | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense` |
|
|
1799
|
+
| `gap` | `gap` | - |
|
|
1800
|
+
| `rgap` | `row-gap` | - |
|
|
1801
|
+
| `colg` | `column-gap` | - |
|
|
1802
|
+
| `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` |
|
|
1803
|
+
| `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` |
|
|
1804
|
+
| `pli` | `place-items` | - |
|
|
1805
|
+
| `pls` | `place-self` | - |
|
|
1806
|
+
| `plc` | `place-content` | - |
|
|
1807
|
+
|
|
1808
|
+
---
|
|
1809
|
+
|
|
1810
|
+
## 8. Effects & Filters
|
|
1811
|
+
|
|
1812
|
+
### Opacity & Visibility
|
|
1813
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1814
|
+
|----------|------------|------------------|
|
|
1815
|
+
| `opc` | `opacity` | - |
|
|
1816
|
+
| `v` | `visibility` | `c:collapse` |
|
|
1817
|
+
|
|
1818
|
+
### Filter & Backdrop
|
|
1819
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1820
|
+
|----------|------------|------------------|
|
|
1821
|
+
| `flt` | `filter` | - |
|
|
1822
|
+
| `bkdf` | `backdrop-filter` | - |
|
|
1823
|
+
|
|
1824
|
+
### Blend Modes
|
|
1825
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1826
|
+
|----------|------------|------------------|
|
|
1827
|
+
| `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` |
|
|
1828
|
+
|
|
1829
|
+
### Box Shadow
|
|
1830
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1831
|
+
|----------|------------|------------------|
|
|
1832
|
+
| `bxsh` | `box-shadow` | - |
|
|
1833
|
+
| `bxshd` | `box-shadow` | - |
|
|
1834
|
+
|
|
1835
|
+
---
|
|
1836
|
+
|
|
1837
|
+
## 9. Transforms & Animations
|
|
1838
|
+
|
|
1839
|
+
### Transform
|
|
1840
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1841
|
+
|----------|------------|------------------|
|
|
1842
|
+
| `tra` | `transform` | - |
|
|
1843
|
+
| `trab` | `transform-box` | - |
|
|
1844
|
+
| `trao` | `transform-origin` | - |
|
|
1845
|
+
| `tras` | `transform-style` | - |
|
|
1846
|
+
| `rot` | `rotate` | - |
|
|
1847
|
+
| `s` | `scale` | - |
|
|
1848
|
+
| `trl` | `translate` | - |
|
|
1849
|
+
|
|
1850
|
+
### Transition
|
|
1851
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1852
|
+
|----------|------------|------------------|
|
|
1853
|
+
| `tran` | `transition` | - |
|
|
1854
|
+
| `tranb` | `transition-behavior` | - |
|
|
1855
|
+
| `trand` | `transition-delay` | - |
|
|
1856
|
+
| `trandur` | `transition-duration` | - |
|
|
1857
|
+
| `tranp` | `transition-property` | - |
|
|
1858
|
+
| `trantf` | `transition-timing-function` | - |
|
|
1859
|
+
|
|
1860
|
+
### Animation
|
|
1861
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1862
|
+
|----------|------------|------------------|
|
|
1863
|
+
| `ani` | `animation` | - |
|
|
1864
|
+
| `anic` | `animation-composition` | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
|
|
1865
|
+
| `anide` | `animation-delay` | - |
|
|
1866
|
+
| `anidi` | `animation-direction` | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal` |
|
|
1867
|
+
| `anidu` | `animation-duration` | - |
|
|
1868
|
+
| `anifm` | `animation-fill-mode` | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none` |
|
|
1869
|
+
| `aniic` | `animation-iteration-count` | - |
|
|
1870
|
+
| `anin` | `animation-name` | `s:slide` |
|
|
1871
|
+
| `anips` | `animation-play-state` | `p:paused`, `r:running` |
|
|
1872
|
+
| `anitf` | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
|
|
1873
|
+
|
|
1874
|
+
---
|
|
1875
|
+
|
|
1876
|
+
## 10. Overflow & Scrolling
|
|
1877
|
+
|
|
1878
|
+
### Overflow
|
|
1879
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1880
|
+
|----------|------------|------------------|
|
|
1881
|
+
| `ofl` | `overflow` | - |
|
|
1882
|
+
| `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
|
|
1883
|
+
| `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
|
|
1884
|
+
| `oflb` | `overflow-block` | - |
|
|
1885
|
+
| `ofli` | `overflow-inline` | - |
|
|
1886
|
+
| `ofla` | `overflow-anchor` | - |
|
|
1887
|
+
| `oflcm` | `overflow-clip-margin` | - |
|
|
1888
|
+
| `oflw` | `overflow-wrap` | `c:clip`, `s:scroll` |
|
|
1889
|
+
|
|
1890
|
+
### Scroll
|
|
1891
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1892
|
+
|----------|------------|------------------|
|
|
1893
|
+
| `scrb` | `scroll-behavior` | - |
|
|
1894
|
+
| `scrm` | `scroll-margin` | - |
|
|
1895
|
+
| `scrmb` | `scroll-margin-bottom` | - |
|
|
1896
|
+
| `scrml` | `scroll-margin-left` | - |
|
|
1897
|
+
| `scrmr` | `scroll-margin-right` | - |
|
|
1898
|
+
| `scrmt` | `scroll-margin-top` | - |
|
|
1899
|
+
| `scrp` | `scroll-padding` | - |
|
|
1900
|
+
| `scrpb` | `scroll-padding-bottom` | - |
|
|
1901
|
+
| `scrpl` | `scroll-padding-left` | - |
|
|
1902
|
+
| `scrpr` | `scroll-padding-right` | - |
|
|
1903
|
+
| `scrpt` | `scroll-padding-top` | - |
|
|
1904
|
+
| `scrsa` | `scroll-snap-align` | - |
|
|
1905
|
+
| `scrss` | `scroll-snap-stop` | - |
|
|
1906
|
+
| `scrst` | `scroll-snap-type` | - |
|
|
1907
|
+
| `sbc` | `scrollbar-color` | - |
|
|
1908
|
+
| `sbg` | `scrollbar-gutter` | - |
|
|
1909
|
+
| `sbw` | `scrollbar-width` | - |
|
|
1910
|
+
|
|
1911
|
+
### Overscroll
|
|
1912
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1913
|
+
|----------|------------|------------------|
|
|
1914
|
+
| `osrbh` | `overscroll-behavior` | `c:contain` |
|
|
1915
|
+
| `osrbb` | `overscroll-behavior-block` | `c:contain` |
|
|
1916
|
+
| `osrbi` | `overscroll-behavior-inline` | `c:contain` |
|
|
1917
|
+
| `osrbx` | `overscroll-behavior-x` | `c:contain` |
|
|
1918
|
+
| `orsby` | `overscroll-behavior-y` | `c:contain` |
|
|
1919
|
+
|
|
1920
|
+
---
|
|
1921
|
+
|
|
1922
|
+
## 11. Lists & Tables
|
|
1923
|
+
|
|
1924
|
+
### Lists
|
|
1925
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1926
|
+
|----------|------------|------------------|
|
|
1927
|
+
| `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
|
|
1928
|
+
| `lsi` | `list-style-image` | - |
|
|
1929
|
+
| `lisp` | `list-style-position` | `i:inside`, `o:outside` |
|
|
1930
|
+
| `lst` | `list-style-type` | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
|
|
1931
|
+
|
|
1932
|
+
### Tables
|
|
1933
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1934
|
+
|----------|------------|------------------|
|
|
1935
|
+
| `tbl` | `table-layout` | - |
|
|
1936
|
+
| `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
|
|
1937
|
+
| `bdsp` | `border-spacing` | - |
|
|
1938
|
+
| `empc` | `empty-cells` | - |
|
|
1939
|
+
| `caps` | `caption-side` | - |
|
|
1940
|
+
|
|
1941
|
+
### Columns
|
|
1942
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1943
|
+
|----------|------------|------------------|
|
|
1944
|
+
| `col` | `columns` | - |
|
|
1945
|
+
| `colc` | `column-count` | - |
|
|
1946
|
+
| `colf` | `column-fill` | - |
|
|
1947
|
+
| `colg` | `column-gap` | - |
|
|
1948
|
+
| `colr` | `column-rule` | - |
|
|
1949
|
+
| `colrc` | `column-rule-color` | - |
|
|
1950
|
+
| `colrs` | `column-rule-style` | - |
|
|
1951
|
+
| `colrw` | `column-rule-width` | - |
|
|
1952
|
+
| `cols` | `column-span` | - |
|
|
1953
|
+
| `colw` | `column-width` | - |
|
|
1954
|
+
|
|
1955
|
+
---
|
|
1956
|
+
|
|
1957
|
+
## 12. Advanced Properties
|
|
1958
|
+
|
|
1959
|
+
### Containment
|
|
1960
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1961
|
+
|----------|------------|------------------|
|
|
1962
|
+
| `cnt` | `contain` | - |
|
|
1963
|
+
| `cntibs` | `contain-intrinsic-block-size` | - |
|
|
1964
|
+
| `cntih` | `contain-intrinsic-height` | - |
|
|
1965
|
+
| `cntiis` | `contain-intrinsic-inline-size` | - |
|
|
1966
|
+
| `cntis` | `contain-intrinsic-size` | - |
|
|
1967
|
+
| `ciw` | `contain-intrinsic-width` | - |
|
|
1968
|
+
|
|
1969
|
+
### Container Queries
|
|
1970
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1971
|
+
|----------|------------|------------------|
|
|
1972
|
+
| `ctr` | `container` | - |
|
|
1973
|
+
| `ctrn` | `container-name` | - |
|
|
1974
|
+
| `ctrt` | `container-type` | - |
|
|
1975
|
+
|
|
1976
|
+
### Content & Counters
|
|
1977
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1978
|
+
|----------|------------|------------------|
|
|
1979
|
+
| `ctt` | `content` | - |
|
|
1980
|
+
| `cntri` | `counter-increment` | - |
|
|
1981
|
+
| `cntrr` | `counter-reset` | - |
|
|
1982
|
+
| `cntrs` | `counter-set` | - |
|
|
1983
|
+
|
|
1984
|
+
### Page Breaks
|
|
1985
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1986
|
+
|----------|------------|------------------|
|
|
1987
|
+
| `pg` | `page` | - |
|
|
1988
|
+
| `pgba` | `page-break-after` | - |
|
|
1989
|
+
| `pgbb` | `page-break-before` | - |
|
|
1990
|
+
| `pgbi` | `page-break-inside` | - |
|
|
1991
|
+
| `brka` | `break-after` | - |
|
|
1992
|
+
| `brkb` | `break-before` | - |
|
|
1993
|
+
| `brki` | `break-inside` | - |
|
|
1994
|
+
|
|
1995
|
+
### Other Advanced
|
|
1996
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
1997
|
+
|----------|------------|------------------|
|
|
1998
|
+
| `a` | `all` | - |
|
|
1999
|
+
| `is` | `isolation` | `i:isolate` |
|
|
2000
|
+
| `z` | `z-index` | - |
|
|
2001
|
+
| `ord` | `order` | - |
|
|
2002
|
+
| `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
|
|
2003
|
+
| `clr` | `clear` | - |
|
|
2004
|
+
| `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
|
|
2005
|
+
| `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
|
|
2006
|
+
| `pe` | `pointer-events` | - |
|
|
2007
|
+
| `cr` | `cursor` | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
|
|
2008
|
+
| `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
|
|
2009
|
+
| `zo` | `zoom` | - |
|
|
2010
|
+
|
|
2011
|
+
---
|
|
2012
|
+
|
|
2013
|
+
## 13. WebKit Specific
|
|
2014
|
+
|
|
2015
|
+
| Viết tắt | Thuộc tính | Giá trị viết tắt |
|
|
2016
|
+
|----------|------------|------------------|
|
|
2017
|
+
| `wlc` | `-webkit-line-clamp` | - |
|
|
2018
|
+
| `wtfc` | `-webkit-text-fill-color` | - |
|
|
2019
|
+
| `wts` | `-webkit-text-stroke` | - |
|
|
2020
|
+
| `wtsc` | `-webkit-text-stroke-color` | - |
|
|
2021
|
+
| `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
|
|
2022
|
+
|
|
2023
|
+
---
|
|
2024
|
+
|
|
2025
|
+
|
|
2026
|
+
## 14. Special Values
|
|
2027
|
+
|
|
2028
|
+
### Common Values
|
|
2029
|
+
|
|
2030
|
+
- `n` = `none`
|
|
2031
|
+
- `nm` = `normal`
|
|
2032
|
+
- `a` = `auto`
|
|
2033
|
+
- `i` = `inherit`
|
|
2034
|
+
- `in` = `initial`
|
|
2035
|
+
- `is` = `inline-start`
|
|
2036
|
+
- `ie` = `inline-end`
|
|
2037
|
+
- `tr` = `transparent`
|
|
2038
|
+
- `c` = `center`
|
|
2039
|
+
- `cl` = `collapse`
|
|
2040
|
+
- `l` = `left`
|
|
2041
|
+
- `r` = `right`
|
|
2042
|
+
- `h` = `hidden`
|
|
2043
|
+
- `v` = `visible`
|
|
2044
|
+
- `s` = `start`
|
|
2045
|
+
- `e` = `end`
|
|
2046
|
+
- `t` = `top`
|
|
2047
|
+
- `b` = `bottom`
|
|
2048
|
+
- `bs` = `block-start`
|
|
2049
|
+
- `be` = `block-end`
|
|
2050
|
+
|
|
2051
|
+
### Size Values
|
|
2052
|
+
|
|
2053
|
+
- `t` = `thin`
|
|
2054
|
+
- `m` = `medium`
|
|
2055
|
+
- `th` = `thick`
|
|
2056
|
+
|
|
2057
|
+
### Style Values
|
|
2058
|
+
|
|
2059
|
+
- `s` = `solid`
|
|
2060
|
+
- `d` = `dotted`
|
|
2061
|
+
- `ds` = `dashed`
|
|
2062
|
+
- `db` = `double`
|
|
2063
|
+
- `g` = `groove`
|
|
2064
|
+
- `r` = `ridge`
|
|
2065
|
+
- `i` = `inset`
|
|
2066
|
+
- `o` = `outset`
|
|
2067
|
+
|
|
2068
|
+
---
|
|
2069
|
+
|
|
2070
|
+
*Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)*
|
|
2071
|
+
|
|
2072
|
+
```
|
|
2073
|
+
|
|
2074
|
+
## Các khái niệm cốt lõi
|
|
2075
|
+
|
|
2076
|
+
### 1. `stateValue(initialValue)`
|
|
2077
|
+
|
|
2078
|
+
Hàm `stateValue` tạo ra một đối tượng trạng thái (state object) đơn lẻ. Bạn có thể truy cập và cập nhật giá trị của nó thông qua thuộc tính `.value`.
|
|
2079
|
+
|
|
2080
|
+
```javascript
|
|
2081
|
+
import fkui from './src/fkui-core.js';
|
|
2082
|
+
|
|
2083
|
+
const count = fkui.stateValue(0);
|
|
2084
|
+
|
|
2085
|
+
console.log(count.value); // 0
|
|
2086
|
+
|
|
2087
|
+
count.value = 1;
|
|
2088
|
+
|
|
2089
|
+
console.log(count.value); // 1
|
|
2090
|
+
```
|
|
2091
|
+
|
|
2092
|
+
### 2. `stateObject(object)`
|
|
2093
|
+
|
|
2094
|
+
Hàm `stateObject` chuyển đổi một đối tượng JavaScript thông thường thành một đối tượng trạng thái phản ứng. Mọi thay đổi đối với các thuộc tính của đối tượng này sẽ tự động được theo dõi.
|
|
2095
|
+
|
|
2096
|
+
```javascript
|
|
2097
|
+
const user = fkui.stateObject({
|
|
2098
|
+
name: 'John Doe',
|
|
2099
|
+
age: 30
|
|
2100
|
+
});
|
|
2101
|
+
|
|
2102
|
+
console.log(user.name); // 'John Doe'
|
|
2103
|
+
|
|
2104
|
+
user.age = 31; // Giao diện người dùng sẽ tự động cập nhật
|
|
2105
|
+
```
|
|
2106
|
+
|
|
2107
|
+
### 3. `computed(func)`
|
|
2108
|
+
|
|
2109
|
+
Hàm `computed` tạo ra một trạng thái dẫn xuất (derived state) từ các trạng thái khác. Giá trị của nó sẽ tự động được tính toán lại khi các trạng thái phụ thuộc thay đổi.
|
|
2110
|
+
|
|
2111
|
+
```javascript
|
|
2112
|
+
const a = fkui.stateValue(1);
|
|
2113
|
+
const b = fkui.stateValue(2);
|
|
2114
|
+
|
|
2115
|
+
const sum = fkui.computed(() => a.value + b.value);
|
|
2116
|
+
|
|
2117
|
+
console.log(sum.value); // 3
|
|
2118
|
+
|
|
2119
|
+
a.value = 5;
|
|
2120
|
+
|
|
2121
|
+
console.log(sum.value); // 7
|
|
2122
|
+
```
|
|
2123
|
+
|
|
2124
|
+
### 4. `tags`
|
|
2125
|
+
|
|
2126
|
+
`tags` là một đối tượng cho phép bạn tạo các phần tử HTML một cách dễ dàng.
|
|
2127
|
+
|
|
2128
|
+
```javascript
|
|
2129
|
+
const { div, p, button } = fkui.tags;
|
|
2130
|
+
|
|
2131
|
+
const myDiv = div({ class: 'container' },
|
|
2132
|
+
p('Hello, world!'),
|
|
2133
|
+
button({ onclick: () => alert('Clicked!') }, 'Click me')
|
|
2134
|
+
);
|
|
2135
|
+
|
|
2136
|
+
document.body.appendChild(myDiv);
|
|
2137
|
+
```
|
|
2138
|
+
|
|
2139
|
+
### 5. `append(dom, ...children)`
|
|
2140
|
+
|
|
2141
|
+
Hàm `append` được sử dụng để thêm các phần tử con vào một phần tử DOM.
|
|
2142
|
+
|
|
2143
|
+
```javascript
|
|
2144
|
+
const { div, p } = fkui.tags;
|
|
2145
|
+
const container = div();
|
|
2146
|
+
|
|
2147
|
+
fkui.append(container, p('Child 1'), p('Child 2'));
|
|
2148
|
+
```
|
|
2149
|
+
|
|
2150
|
+
### 6. `effect(func)`
|
|
2151
|
+
|
|
2152
|
+
Hàm `effect` thực thi một hàm và tự động chạy lại nó khi các trạng thái mà nó phụ thuộc thay đổi. Điều này rất hữu ích để thực hiện các tác vụ phụ (side effects) như ghi log, hoặc cập nhật DOM theo cách thủ công.
|
|
2153
|
+
|
|
2154
|
+
```javascript
|
|
2155
|
+
const name = fkui.stateValue('Guest');
|
|
2156
|
+
|
|
2157
|
+
fkui.effect(() => {
|
|
2158
|
+
console.log(`Name changed to: ${name.value}`);
|
|
2159
|
+
});
|
|
2160
|
+
|
|
2161
|
+
name.value = 'John'; // "Name changed to: John" sẽ được in ra console
|
|
2162
|
+
```
|
|
2163
|
+
|
|
2164
|
+
### 7. `listDom(container, items, itemFunc)`
|
|
2165
|
+
|
|
2166
|
+
Hàm `listDom` dùng để hiển thị một danh sách các mục. Nó sẽ tự động cập nhật DOM khi danh sách thay đổi (thêm, xóa, hoặc sắp xếp lại các mục).
|
|
2167
|
+
|
|
2168
|
+
```javascript
|
|
2169
|
+
const { ul, li } = fkui.tags;
|
|
2170
|
+
|
|
2171
|
+
const items = fkui.stateObject(['Apple', 'Banana', 'Orange']);
|
|
2172
|
+
|
|
2173
|
+
const myList = fkui.listDom(ul(), items, item => li(item.value));
|
|
2174
|
+
|
|
2175
|
+
document.body.appendChild(myList);
|
|
2176
|
+
|
|
2177
|
+
// Thêm một mục mới vào danh sách
|
|
2178
|
+
items.push('Mango');
|
|
2179
|
+
```
|
|
2180
|
+
|
|
2181
|
+
## Ví dụ hoàn chỉnh
|
|
2182
|
+
|
|
2183
|
+
Đây là một ví dụ về một bộ đếm đơn giản:
|
|
2184
|
+
|
|
2185
|
+
```html
|
|
2186
|
+
<!DOCTYPE html>
|
|
2187
|
+
<html>
|
|
2188
|
+
<head>
|
|
2189
|
+
<title>fkui-core.js Counter</title>
|
|
2190
|
+
</head>
|
|
2191
|
+
<body>
|
|
2192
|
+
<div id="app"></div>
|
|
2193
|
+
|
|
2194
|
+
<script type="module">
|
|
2195
|
+
import fkui from './src/fkui-core.js';
|
|
2196
|
+
|
|
2197
|
+
const { div, h1, button } = fkui.tags;
|
|
2198
|
+
const app = document.getElementById('app');
|
|
2199
|
+
|
|
2200
|
+
const count = fkui.stateValue(0);
|
|
2201
|
+
|
|
2202
|
+
const counterComponent = div(
|
|
2203
|
+
h1('Counter: ', () => count.value),
|
|
2204
|
+
button({ onclick: () => count.value-- }, '-'),
|
|
2205
|
+
button({ onclick: () => count.value++ }, '+')
|
|
2206
|
+
);
|
|
2207
|
+
|
|
2208
|
+
fkui.append(app, counterComponent);
|
|
2209
|
+
</script>
|
|
2210
|
+
</body>
|
|
2211
|
+
</html>
|
|
2212
|
+
```
|