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

CSS là ngôn ngữ giúp cho website lột được vẻ ngoài xấu xí thô kệch để khoác lên mình chiếc áo xinh đẹp. CSS là sự kết hợp của các bộ lọc, các thuộc tính hay thậm chí là các hiệu ứng animation, transition. Code css không hề khó nhưng làm thế nào để viết code css được chuẩn hơn, tối ưu hơn, giảm tải được việc viết nhiều code qua đó sẽ dễ dàng cho việc quản lý source code sau này thì không phải ai cũng biết. nếu bạn là một người mới tiếp xúc với css, cứ gặp bất cứ thứ gì cần trang trí, chỉnh sửa là lại lôi id hay class ra viết thêm css vào cho nó thì sẽ gặp vấn đề ở chỗ file css sẽ trở nên cồng kềnh, dung lượng file lớn làm chậm web khi load, rồi sau gặp bug, sẽ khó cho việc kiểm soát và sửa chữa cũng như nâng cấp sau này vì code không được sắp xếp đúng cách, bị trùng lặp nhiều đoạn css...

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 biến này ở nhiều vị trí khác nhau, sau này khi muốn sửa giá trị của các nơi mà ta đã dùng thì chỉ cần thay đổi duy nhất một chỗ đó là gía trị ứng với biến đó mà ta đã gán cho nó ban đầu. Ví dụ như bạn đặt một biến tên là $$l-primary với giá trị là #FFFFFF 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.

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

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 rất tiện:

.footer {
    &__logo {
        // some CSS
    }
    &__social {
        // some CSS
    }
}

/* Nó sẽ dịch thành

.footer{}
.footer__logo {
    // some CSS
}
.footer__social {
    // some CSS
}

*/ Ngoài ra còn rất nhiều các tính năng mạnh mẽ khác nữa của CSS Prepocessor mà các bạn coder chuyên nghiệp nên biết và sử dụng.

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

Chúng ta sẽ chia ra thành nhiều file css khác nhau ứng với mỗi công dụng của nó, ví dụ file button.scss sẽ chứa code css cho thành phần button, block.scss sẽ chứa code css cho thành phần là các khối block,...Việc chia nhỏ ra các file thế này sẽ giúp chúng at dễ dàng trong veiejc quản lsy code, code được phân tách rõ ràng cho từng phần, sau này chúng ta muốn sửa chữa, thay đổi hay viết thêm css thì điều đó cùng trở nên đơn giản hơn rất nhiều thay vì viết tập trung hết code vào chung 1 file css. Nhưng có một vấn đề đặt ra là chia nhỏ các file ra như vậy thì khi sử dụng, chúng ta phải nhúng hết đường dẫn của tất cả các file đó vào, nó sẽ tạo ra rất nhiều request cho server nhưng các bạn yên tâm là vấn đề này được giải quyết vô cùng đơn giản khi chúng ta sử dụng CSS Prepocessor. 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 file css chung là style.css Rất tiện lợi phải không nào.

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. Có thể bạn mới chỉ nghe khái niệm hướng đối tượng với các ngôn ngữ lập trình phía Server. Thế nhưng với CSS lại tồn tại khái niệm nà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:

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

Bạn có thấy là class .btn-red và .btn-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.

HTML:

<a href="#" class="btn red">Nút đỏ</a>
<a href="#" class="btn blue">Nút xanh</a>
<a href="#" class="btn green">Nút xanh lá</a>

CSS:

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

Lợi ích của kỹ thuật này là không phải viết code giống nhau nhiều lần 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, .headerlogo và .headerdescription là Element và .headerdescription–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 dài 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{}
}

Lời kết

Trên là một số chia sẻ của mình đúc kết được khi tìm hiểu và nghiên cứu trên internet, chúc các bạn viết code CSS ngon lành và hiệu quả nhé!