Bài 12 - Một số mẹo hay khi viết code CSS

CSS là một ngôn ngữ không phải khó kiểm soát, nhưng nếu bạn sử dụng nó cho các dự án lớn thì có thể bạn sẽ gặp một số khó khăn trong cách quản lý, nếu bạn không tuân theo các cách tiếp cận đã định rõ khi viết code CSS.

Dưới đây là một vài lời khuyên giúp bạn viết tốt hơn và dễ dàng hơn khi quản lý code CSS.

1. Nên sử dụng cách viết ngắn gọn

Sử dụng cách viết ngắn gọn để dễ dàng thiết lập một số attribute chỉ cần viết đầy đủ trên một dòng, đây cũng là một cách để bạn dễ dàng kiểm soát – theo dõi code của mình, đồng thời cũng hỗ trợ giảm số lượng ký tự trong file css và giảm kích thước file. Lấy ví dụ như khi thiết lập thuộc tính padding cho 1 phần tử nào đó. Class example chẳng hạn. Có nhiều khi chúng ta hay viết như thế này:

.example {
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 8px;
  padding-bottom: 10px;
}

Tất nhiên viết như thế này không sai, nhưng có phương pháp viết rút gọn thì hà cớ gì không viết mà phải viết dàn trải như này, vừa tốn ký tự lại tăng kích thước của file. Chúng ta nên viết như thế này:

.example {
  padding: 5px 10px 10px 8px;
}

Rất đơn giản và gọn nhẹ đúng không? Bạn hãy nhớ, khi viết gộp lại, các giá trị của thuộc tính padding bên trên sẽ lần lượt là top -> right -> bottom -> left. Đối với những bạn rành về css thì không cần nói nhiều nhưng có nhiều người không rành về css lắm thì cần chú ý điều này để khi muốn sửa 1 giá trị nào đó sẽ sửa được chính xác mà không phải là đi sửa thử lần lượt hết các trường hợp rồi mới tìm ra trường hợp đúng. Bạn có thể làm tương tự như với margin hay border.

2. Không sử dụng thiết lập toàn cầu

Sử dụng thiết lập toàn cầu để loại bỏ các mặc định về margin và padding cho tất cả các phần tử HTML tuyệt đối không sử dụng. Nó không chỉ chậm mà còn không hiệu quả nhưng bạn phải xác định margin và padding cho mỗi yếu tố khi cần nó. Thay vì đó hãy sử dụng tập hợp các thiết lập CSS như của Eric Meyer. Cụ thể, trường hợp viết như dưới này là không nên sử dụng

* {
  margin: 0;
  padding: 0;
}

Thay vì viết như trên, chúng ta hay thiết lập các thuộc tính tương ứng với các phần tử HTML riêng biệt. Nói 1 cách đơn giản, dễ hiểu hơn là chúng ta nên thiết lập 1 file css Typography . Ví dụ như thế này:

body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Nếu bạn đã theo dõi các bài viết của tôi từ đầu đến giờ, bạn cũng biết tôi là người chuyên sử dụng bootstrap. Bootstrap hỗ trợ rất nhiều thứ bởi nó là 1 framework css. Và một sự tiện lợi trong số đó là bootstrap có sẵn phần typography. Bạn dùng bootstrap mà không cần bận tâm về vấn đề này nữa. Không chỉ bootstrap nói riêng mà các framework css cũng đều có phần này. Nếu bạn không sử dụng bất kỳ 1 framework css nào, chỉ code css chay thì bạn phải tự thiết lập 1 file typography cho mình rồi.

3. Tận dụng CSS inheritance

Nếu nhiều phần tử con của phần tử cha mẹ sử dụng cùng style trên một trang web và bạn phải viết đi viết lại nhiều lần như thế này:

#example h1{ font-family: 'Roboto', sans-serif; }
#example span{ font-family: 'Roboto', sans-serif; }  
#example p{ font-family: 'Roboto', sans-serif; }  

Tương tự như mục 1, cách viết này không sai nhưng nó vừa tốn ký tự lại tăng kích thước của file. Thay vào đó, chúng ta sẽ định nghĩa các thuộc tính cho phần tử cha của chúng và để các CSS inheritance làm tất cả mọi việc. Bạn sẽ có thể dễ dàng update code của bạn sau này và nó sẽ làm giảm kích thước file CSS đáng kể.

#example { font-family: 'Roboto', sans-serif; }

Quá đơn giản nhỉ? Khi bạn định nghĩa 1 thuộc tính cho phần tử cha (trong trường hợp này là id #example) thì tất cả những phần tử con (h1, span, p) đều nhận được những thuộc tính đó.

4. Kết hợp css cho các phần tử

Nội dung như trên tiêu đề. Đôi khi chúng ta viết code css, không để ý có những phần tử ngang hàng, không chung cha ông nhưng lại có những thuộc tính giống nhau. Khi đó, chúng ta hay định nghĩa các thuộc tính cho từng phần tử đó. Ví dụ như này:

 h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
 h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
 h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Lúc này, chúng ta kết hợp các phần tử lại và định nghĩa chung cho chúng như sau:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Đó, chỉ đơn giản là vậy thôi đó.

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

OOCSS (Object Oriented CSS) – CSS hướng đối tượng, thật ra hướng đối tượng ở đây có nghĩa là bạn gom các thuộc tính giống nhau của 2 class cùng áp dụng cho một element thành một class để giảm thiểu sự lặp lại. Ví dụ:

Thay vì khai báo 2 class cho button như sau:

.btn-primary {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.btn-success {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

Lúc này, chúng ta nên dùng 1 class chung chẳng hạn như .btn để định nghĩa các thuộc tính chung. Còn đối với các thuộc tính riêng thì các bạn cứ việc định nghĩa riêng cho từng button.

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 4px;
}
 
.btn.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.btn.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}

Các bạn nhận ra rồi chứ? Đây chính là cách mà bootstrap hay dùng. Nếu như bạn không sử dụng bootstrap hay framework css nào khác thì hãy dùng cách này. Nó sẽ giúp chúng ta quản lý css tốt hơn và tiết kiệm rất nhiều thời gian cho chúng ta viết code css.

6. Thêm comment trong css

Khi bạn có 1 file css rất dài, bạn nên thêm comment cho từng phần. Làm như vậy vừa khoa học vừa giúp người khác dễ dàng nhận biết khi xem code css của bạn.

/*-------------------- 
    Header 
    -----------------*/  
#header {
    height:145px; 
    position:relative; 
 }  
#header h1 { 
    width:324px; 
    margin:45px 0 0 20px; 
    float:left;  
    height:72px;
 }  
 
 /*-------------------- 
    Footer 
    -----------------*/  
#footer {  
    clear:both; 
    padding:50px 5px 0; 
    overflow:hidden;
}  
#footer h4 { 
    color:#b99d7f;  
    font-family:Arial, Helvetica, sans-serif; 
    font-size:1.1em; 
} 

Trên đây chỉ là một vài mẹo nhỏ cho các bạn khi viết code CSS. Hi vọng sẽ giúp được ít nhiều cho các bạn. Chúc các bạn thành công!