Học CSS để có thể tự thiết kế giao diện cho website không hề khó vì CSS vốn rất dễ học. Chỉ cần biết quy tắc cú pháp viết CSS, biết lập vùng chọn và chịu khó tham khảo các thuộc tính là có thể viết được ngon lành.

Thế nhưng một cái khó trong CSS đó là bạn phải học liên tục, học ở đây là cách triển khai CSS trên website tối ưu, các thủ thuật CSS hay ho hoặc làm quen với các công cụ hỗ trợ nâng cao như Grunt, Gulp, SASS, LESS,…và ngay cả chính việc quản lý CSS trên website cũng cần phải học nữa.

TẠI SAO VIỆC QUẢN LÝ CSS LẠI QUAN TRỌNG?

Nếu bạn là người mới tiếp súc với CSS thì chắc chắn sẽ làm việc với CSS kiểu như thấy cái gì cần trang trí là cứ viết CSS vào. Nhưng nếu bạn cứ thêm CSS vào mà không để ý thì về lâu dài bạn sẽ khó quản lý tập tin CSS của bạn, vì có thể nó không được sắp xếp đúng cách, bị trùng lặp nhiều đoạn CSS gây khó khăn khi bạn cần thiết kế lại website hay nâng cấp nó.

Trong bài viết này, mình sẽ nói qua một số kỹ thuật quản lý CSS rất hay mà nếu bạn chưa biết thì nên xem qua một lần để bạn có thể làm việc với CSS tốt hơn.

CÁC KỸ THUẬT QUẢN LÝ CSS

1. Sử dụng SASS/LESS (CSS Prepocessor)

Các CSS Preprocessor như SASS hay LESS là một trong những công cụ bạn nên sử dụng nếu bạn cần làm việc với CSS trên một tầm cao mới.

Bởi vì trong công cụ này bạn có thể tạo ra các biến trong CSS và sử dụng nhanh chóng. Ví dụ như bạn đặt một biến tên là $color-primary với giá trị là #E8E8E8 thì bạn cần sử dụng nó chỉ cần gọi biến ra, tránh viết đi viết lại nhiều lần.

$primary-color: #E8E8E8;
 
body {
    color: $primary-color;
}
 
.post__meta {
    color: $primary-color;
}

Ngoài ra nó cũng giúp bạn dễ dàng viết CSS cho nhóm vùng chọn tốt hơn, áp dụng phương pháp BEM (xem thêm ở dưới) rất tiện:

.header {
    &__logo {
        // some CSS
    }
    &__social {
        // some CSS
    }
}
 
/* Nó sẽ dịch thành
 
.header{}
.header__logo {
    // some CSS
}
.header__social {
    // some CSS
}
 
*/

2. Chia ra nhiều tập tin khác nhau (nên dùng kèm SASS)

Một việc mà tôi rất thích làm khi triển khai CSS trên một dự án mới đó là sẽ chia CSS ra thành nhiều tập tin khác nhau, mỗi tập tin sẽ chứa CSS cho từng thành phần trên website để tránh nhét CSS quá nhiều vào một tập tin gây khó khăn cho bạn khi làm việc. Do mình sử dụng SASS nên sẽ tạo ra các tập tin kiểu _name.scss để chứa các thành phần riêng biệt, sau đó import nó vào tập tin chính tên style.scss chẳng hạn. Như vậy khi biên dịch từ SASS sang CSS, các tập tin _name.scss sẽ không được xuất ra CSS mà sẽ xuất vào style.scss.

Nên nhớ rằng là trong SASS, các tập tin có tên kiểu _name.scss sẽ không biên dịch ra file CSS riêng nên không cần lo lắng.

Dưới đây là mẫu hay dùng của mình:

style.scss – Tập tin SASS sẽ được sử dụng để import các tập tin có ký tự _ ở tên vào. Sau đó biên dịch ra CSS.
_var.scss – Tập tin chứa các biến hay dùng trong CSS.
_normalize.scss – Tập tin reset CSS sử dụng Normalize.
_global.scss – Tập tin chứa CSS cho thành phần toàn cục trên website như html, body, a.
_typography.scss – Tập tin chứa CSS để định dạng chữ trên website.
_layout.scss – Để dành viết CSS cho việc lên bố cục cho website như chia cột.
_modules.scss – Tập tin này sẽ viết CSS cho các đối tượng trong website như nút bấm, trang trí menu,….

Và nếu bạn có làm thêm Responsive thì nên tạo thêm các tập tin cho từng breakpoint luôn như _mobile.scss, _tablet.scss và _desktop.scss.

Sau đó ở style.scss, mình sẽ gọi tất cả tụi nó vào và không cần viết thêm CSS gì vào đây.

@import "var";
@impprt "normalize";
@import "global";
@import "typography";
@import "layout";
@import "modules";
 
// Responsive
@import "mobile";
@import "tablet";
@import "desktop";

3. Áp dụng kỹ thuật OOCSS

OOCSS là chữ viết tắt của Object Oriented CSS – CSS hướng đối tượng. Nghe có vẻ nực cười vì hướng đối tượng là một kỹ thuật trong lập trình mà CSS thì không phải là lập trình. Thế nhưng lại được đấy, OOCSS là một kỹ thuật viết CSS bằng việc phân chia các đối tượng và tái sử dụng lại trên các đối tượng có cùng một cấu trúc. Các bạn hãy xem qua đoạn CSS sau:

.button-red {
  background: red;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  margin: 0 1em;
}
 
.button-blue {
  background: blue;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
  margin: 0 1em;
}

Bạn có thấy là class .button-red và .button-blue có khá nhiều thuộc tính giống nhau không? Chúng chỉ khác mỗi cái màu nền mà thôi. Thay vì viết lại như vậy, chúng ta có thể tạo ra một class (gọi là đối tượng) tên .button để thêm các đoạn CSS cần thiết cho một nút bấm, sau đó ở các nút bấm bạn có thể thêm các class như .red, .blue, .green (gọi là thuộc tính) để thêm màu sắc và màu chữ cho nút bấm.

Dưới đây là ví dụ HTML và CSS sử dụng OOCSS.
<br /> See the Pen <a href="https://codepen.io/taowebmoi/pen/jONeYyW/" target="_blank" rel="noopener">jONeYyW</a> by Nguyễn Tường Vi<br /> (<a href="https://codepen.io/taowebmoi" target="_blank" rel="noopener">@taowebmoi</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

Lợi ích của kỹ thuật này là sẽ giúp bạn làm nhẹ tập tin CSS để tiết kiệm thời gian tải, dễ dàng bảo trì về sau cũng như dễ dàng viết CSS thêm cho các phần tử khác có cùng đối tượng.

4. Đặt tên với kỹ thuật BEM

Nếu bạn cảm thấy khó khăn khi sử dụng OOCSS trong việc quản lý CSS thì có thể thử qua một kỹ thuật khác để quản lý CSS tên là BEM (Block Element Modifier). Là một kỹ thuật đặt tên và tạo cấu trúc website dựa theo một thành phần chính nào đó.

Để sử dụng BEM thì bạn phải hiểu nó bao gồm 3 thành phần là:

Block – Khu vực của đối tượng cần viết CSS.
Element – Các phần tử bên trọng của Block.
Modifier – Trạng thái của các Element khi thay đổi các hành vi, hoặc có thể sử dụng để chỉ tính chất của phần tử.

Ví dụ mình sẽ viết HTML với cấu trúc BEM như thế này:

<div class="header">
    <img src="logo.png" class="header__logo" />
    <p class="header__description header_description--center" />
</div>

Sau đó mình sẽ có các vùng chọn CSS kiểu thế này:

/*--[Header]--*/
.header {}
.header__logo {}
.header__description{}
.header__description--center{}

Trong đó, .header là Block, .header__logo và .header__description là Element và .header__description–center là Modifier.

Thế nhưng nhìn thì đơn giản nhưng khi áp dụng BEM vào dự án bạn sẽ thấy nó khó khăn ở bước đầu là quá bối rối trong cách đặt tên, phân bổ không hợp lý sẽ khiến tên vùng chọn của bạn thành .no-dai-ra-nhu-the-nay.

5. Sử dụng class và ID hợp lý

Class và ID là hai kiểu vùng chọn phổ biến để sử dụng, với tính chất tương tự nhau nên nhiều người phân vân không biết nên sử dụng ID hay Class. Trước hết, bạn phải biết rằng Class có thể sử dụng cho nhiều phần tử khác nhau trên cùng một trang, còn ID chỉ có thể dùng cho một phần tử trên cùng một trang.

Như vậy, bạn nên sử dụng Class cho các phần tử có tính chất lặp lại nhiều lần và dùng ID cho các phần tử sử dụng một lần duy nhất. Tuy nhiên nếu bạn sợ rối, hãy sử dụng Class cho toàn bộ thì sẽ dễ hơn.

6. Đặt tên vùng chọn tối ưu

Một lỗi nghiêm trọng dễ mắc phải mà bạn cần tránh là hãy đặt tên vùng chọn có khoá học. Ví dụ mình thấy nhiều bạn đặt tên thế này:

.titlepost
.content-post
…

Như thế bạn sẽ thấy khá rối nếu như sau này nhìn lại CSS do chính mình viết. Thay vào đó, bạn nên đặt tên kiểu thế này:

.post
- .post-title
- .post-content
- .post-meta
.article
- .article-wrapper
- .article-content
.header
- .header-menu
- .header-ads

Và khi viết CSS bằng SASS hoặc LESS thì mình chỉ cần viết thế này:

.post {
    &-title{}
    &-content{}
    &-meta{}
}

Hy vọng với các chia sẻ trên, các bạn sẽ thấy hứng thú hơn với công việc lên giao diện cho website bằng CSS vốn “dễ mà khó” này.

Các kỹ thuật quản lý CSS của website tốt hơn