CSS được tạo ra từ 1996 đã giúp phần lớn web developer có thể thoải mái tuỳ biến các trang web HTML trở nên lung linh hơn. Dĩ nhiên sau hơn 24 năm, các kiến thức về CSS cũng như những kĩ thuật, công nghệ mới trong việc viết CSS cũng ngày một nhiều hơn.
Tóm Tắt
Hành trình viết CSS của mình
Sau khi tìm hiểu về CSS ở mức căn bản, mình phát hiện ra còn có các cách viết CSS mới như preprocessor CSS (SASS, SCSS, LESS…), CSS-in-JS (Module CSS, Styled Component, JSS…) hỗ trợ việc nest các selector, if-else, variable… giúp việc code và đọc CSS dễ hơn.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
CSS truyền thống
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
SCSS với nesting
Rồi vọc vạch một số CSS Framework, hỗ trợ dựng sẵn với giao diện đẹp mắt và responsive (Bootstrap, Foundation,…) hoặc chuyên dụng cho một framework cụ thể (trong ReactJS sẽ có Material UI, Ant Design, Reactstrap…), chỉ cần import thư viện và gọi tên class hoặc custom component cần thiết và voila!
Một theme của Bootstrap với giá $59
Tuy nhiên, tiếp cận với frontend từ nền tảng backend và làm desktop app vốn hỗ trợ khá nhiều trong việc tạo giao diện, việc học CSS đối với mình cũng cần dành nhiều thời gian và khối lượng tìm tòi hơn: từ các thuộc tính, cách viết selector, quy tắc BEM, các kiểu viết CSS, responsive, suy nghĩ tên biến hay customize lại các phần tử HTML từ framework sẵn có theo đúng ý mình… Đó thực sự là chặng đường khá là “khó nhai” trong những ngày đầu vọc vạch code giao diện web.
Một ví dụ về nỗi kinh hoàng khi học responsive
Rồi một lần lân la trên mạng, mình phát hiện ra một cách tiếp cận mới trong việc viết CSS: Atomic CSS và Framework Tailwind CSS đã giúp mình đỡ đau đầu hơn rất nhiều.
Atomic CSS có gì hay ho
Atomic có nghĩa là nguyên tử, và cách tiếp cận của phương pháp này cũng tương tự như vậy – các phần tử HTML sẽ được apply các class CSS có kích thước rất nhỏ, được định nghĩa cho một chức năng cụ thể như đổi màu chữ, dãn cách padding, phóng to size…
Mình sẽ lấy ví dụ về việc tạo một button nền xanh, chữ trắng và có bo tròn 4 góc, button bên trái sẽ viết CSS truyền thống, và bên phải viết theo cách tiếp cận Atomic CSS.
Hai button ví dụ
<body>
<!-- Button with Traditional CSS -->
<button class="normal-button">
Normal CSS Button
</button>
<!-- Button with Atomic CSS -->
<button class="round-5px bg-green text-white">
Atomic CSS Button
</button>
</body>
File HTML định nghĩa 2 button
.normal-button {
border-radius: 5px;
color: white;
background-color: green;
}
.bg-green {
background-color: green;
}
.text-white {
color: white;
}
.round-5px {
border-radius: 5px;
}
File CSS định nghĩa các style
Có thể dễ thấy kết quả của hai button đều như nhau, tuy nhiên các thành phần thuộc tính trong class của button viết theo hướng Atomic lại tách ra nhỏ hơn, hỗ trợ việc đọc dễ hơn vì khá giống với định nghĩa thuộc tính CSS.
Đồng thời các phân mảnh nhỏ như vậy khiến người viết code có thể dễ dàng tái sử dụng vào các phần tử tương tự, ví dụ khi mình cần button màu đỏ với bo tròn 4 góc và chữ trắng, mình có thể tái sử dụng 2/3 class đã được phân mảnh.
Cũng vì khả năng tái sử dụng cao, kích thước CSS của project lớn sẽ được giảm đáng kể, bên dưới là bundle size một dự án của John Polacek khi anh tiến hành refactor CSS truyền thống sang Atomic CSS.
Size bundle sau khi refactor project sang Atomic CSS của John Polacek
Tailwind CSS
Để hạn chế việc viết CSS nhiều hơn do phải phân tách nhỏ các mảnh, các Atomic/Utility CSS Framework bắt đầu ra đời, nhưng trong bài viết này, mình sẽ tập trung vào Tailwind CSS.
Các định nghĩa như font chữ to nhỏ, màu sắc chữ, màu nền, dãn cách padding, margin, position, flex hay thậm chí cả các event hover, pointer hay animation… được framework cung cấp rất đa dạng (hiện tại đã hỗ trợ hơn 11 nghìn atomic class), việc cần làm chỉ đơn giản là gọi tên class đã định nghĩa là được.
Sau khi tiến hành setup thư viện, mình có thể dễ dàng tạo một button ở ví dụ trên mà không cần viết thêm dòng CSS nào.
<body>
<button class="rounded bg-green-600 text-white">
Tailwind CSS Button
</button>
</body>
Ngoài ra Tailwind CSS cũng như khả năng hỗ trợ customize các atomic class (ví dụ bạn cần một định nghĩa background nền 7 sắc cầu vồng chẳng hạn), có thể dễ dàng thiết lập trong configuration tại file tailwind.config.js và sử dụng chúng trong project.
Responsive cùng Tailwind CSS
Các tag @media được Tailwind hỗ trợ
Tailwind cung cấp các prefix hỗ trợ nhiều kích thước màn hình, mình sẽ lấy một ví dụ đơn giản responsive tailwind với 3 block nằm ngang cạnh nhau, và block giữa sẽ bị ẩn đi khi màn hình nhỏ hơn 768px (tương ứng với prefix md).
<body>
<div class="flex p-2">
<div class="bg-blue-300 p-2">
Left block
</div>
<div class="bg-green-300 p-2 hidden md:block">
Middle block
</div>
<div class="bg-red-300 p-2">
Right block
</div>
</div>
</body>
Bạn có thể xem demo đoạn code trên tại đây
Tailwind CSS phần nào hỗ trợ cách tiếp cận viết CSS theo hướng mobile first, block giữa trong đoạn code trên sẽ có logic hiển thị theo mô tả:
- Khi màn hình đạt độ dài tối thiểu 768px: block sẽ áp dụng thuộc tính display: block
- Khi màn hình dưới 768px, block sẽ áp dụng thuộc tính mặc định là display: hidden
Như đã thấy, responsive trên chỉ gói gọn trong một đoạn class là “hidden md:block”. Nếu theo cách viết truyền thống, file css sẽ được viết như bên dưới
.middle-block {
display: none;
}
@media (min-width: 768px) {
.middle-block {
display: block;
}
}
Cồng kềnh hơn đúng không?
Ngoài ra, bạn cũng có thể customize lại các kích thước responsive màn hình như đã đề cập ở phần trên.
Ưu điểm
- Các atomic class cũng như document rất nhiều và phong phú, hỗ trợ đa dạng từ thuộc tính cơ bản, shadow, theme, css-event, animation… mà không cần bạn phải code bất kì dòng css nào.
- Không quá khó để tiếp cận, tuy nhiên cần phải có nền tảng về CSS trước khi sử dụng.
- Nếu chỉ thuần sử dụng các class được cung cấp, bạn gần như không cần phải nghĩ đến chuyện đặt tên biến, cứ lôi đồ có sẵn ra mà xài thôi.
- “Né” được vài kĩ thuật đau đầu trong CSS như BEM, SCSS, Module CSS… nhưng đó là khi bạn chỉ sử dụng các class được cung cấp từ Tailwind.
- Khả năng customize tốt.
- Có thể tích hợp cùng cách viết CSS truyền thống để hạn chế việc tên class trong các phần tử HTML quá dài
thông qua sử dụng @apply
, có thể tích hợp cùng với các Component CSS Framework khác như Bootstrap, Foundation, Material UI…
- Lightweight và khả năng scale tốt từ các project nhỏ đến lớn: các atomic class được tái sử dụng xuyên suốt project, nếu project của bạn có hàng trăm component nhưng chỉ sử dụng khoảng vài chục class thì file CSS chỉ được tạo từ các class bạn đã dùng.
Kích thước file CSS khi áp dụng TailwindCSS (xanh) so với cách code CSS truyền thống (đỏ) khi project scale lớn dần
Nhược điểm
- Có quy chuẩn viết tắt riêng nên trong một số trường hợp việc tìm lỗi layout do CSS sẽ cần thời gian để làm quen.
- Cần có một số quy tắc thống nhất thứ tự đặt tên các class để đồng nhất cách đọc trong project nhiều thành viên, hiện tại trong VS Code có hỗ trợ extension Headwind cho việc này khá tốt.
- Được hỗ trợ rất nhiều trong việc viết CSS, nhưng khi lạm dụng sẽ dễ khiến bạn có thể bị “mất gốc” khi viết CSS thuần mà không có framework này.
- Bản chất là Atomic CSS Framework nên để giao diện đẹp đòi hỏi kết hợp các class thay vì chỉ gọi sẵn một số class hỗ trợ như các Component CSS Framework.
- Ngoài ra, bài viết trên diễn đàn dev.toJared White
Lựa chọn của mình
- Đối với cá nhân mình, mình vẫn khá thích Tailwind CSS và có thể vẫn sẽ sử dụng nó trong thời gian dài vì những ưu điểm của nó có thể xem là vượt trội hơn phần khuyết điểm, một phần mình cũng không muốn chuyên quá sâu về CSS, nên chắc đây sẽ là CSS framework yêu thích của mình trong thời gian sắp tới.
- Nếu bạn có góp ý về bài viết, công nghệ hay CSS framework nào hay ho khác muốn chia sẻ không, giúp mình bằng cách bình luận bên dưới nhé 😀
Share this:
Like this:
Like
Loading…
Related
