Những lỗi sai phổ biến khi viết css

Về mặt bề ngoài, CSS là một ngôn ngữ khá đơn giản, các trình bày của nó gần giống như là tiếng Anh. Ví dụ, bạn muốn thay đổi "font size", CSS cung cấp thuộc tính font-size cho bạn. Hay bạn muốn thay đổi "color", CSS cũng cung cấp thuộc tính color cho bạn. Tuy vậy, ở cấp độ chuyên nghiệp hơn, CSS là một hệ thống phức tạp. Để dựng layout cho các component ăn khớp với nhau là điều không hề đơn giản như vẻ bề ngoài mà CSS thể hiện. Dưới đây là một số lỗi sai mà lập trình viên fontend hay mắc phải.

1. Not Using a Proper CSS Reset

Trình duyệt web là những người bạn hay phải thay đổi. Sự thay đổi hay không đồng nhất của chúng đôi khi làm các developer phải điên đầu. Nhưng chung quy lại, chúng vẫn sẽ là nơi hiển thị website của bạn, nên dù thế nào đi nữa chúng ta cũng phải chiều lòng chúng. Bạn có thể để ý thấy khi bắt đầu phát triển web và show chúng trên nhiều trình duyệt khác nhau, mỗi trình duyệt lại có 1 chút ít style mặc định cho việc hiển thị. Điều này sẽ làm cho website của bạn hiển thị khác nhau trên các trình duyệt khác nhau, tệ hại hơn là phá hỏng cả layout của bạn (ví dụ như những phiên bản IE đời cũ). Chính vì thế, trước khi thực sự bắt tay vào dựng layout cho website, hãy reset lại những giá trị mặc định của các trình duyệt, để layout của bạn đồng nhất. Thông thường, ta hay làm thế này

* { margin:0; padding:0; }

Tuy nhiên như vậy là chưa đủ, còn khá nhiều thứ khác bị thay đổi ở các trình duyệt khác nhau như đường viền, gạch chân, màu sắc của các item trong 1 list... Để cho đơn giản, chúng ta có thể sử dụng 1 số codebase phục vụ cho việc reset CSS của browsers.

2. Over-Qualifying Selectors

Quá cụ thể khi select 1 element để viết CSS không phải là điều tốt. Ta có ví dụ thế này

ul#navigation li a { ... }

Khi nhìn vào ta có thể thấy cấu trúc của selector hoàn toàn đúng, người viết cần lấy ra thẻ a nằm trong phần tử li của ul được đặt id là #navigation. Cấu trúc thì chuẩn xác nhưng CSS selector mới là điều đáng lo ở đây. Thứ nhất, chẳng có lý do gì để phải gọi đến ul khi mà bạn đã đặt id cụ thể cho nó. Và vì phần tử cha là 1 list nên cũng không cần thiết phải select chi tiết đến phần tử li. Ta có thể rút gọn lại như sau

#navigation a { ... }

Hãy nhớ, luôn viết CSS selector của bạn 1 cách tối thiểu, đủ để nó lựa chọn đúng phần tử mà bạn muốn, đủ cần thiết để nó hoạt động.

3. Not Using Shorthand Properties

Ta lại có một ví dụ như sau:

#selector {
  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left 0;
}

Mới nhìn thì trông có vẻ clear đấy, các thuộc tính margin đều được liệt kê chính xác. Tuy nhiên bạn phải tốn thêm 3 dòng để viết, thay vì thế này

#selector {
  margin: 50px 0;
}

Hoặc 1 ví dụ khác:

font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;

Ta có thể viết chúng chỉ trên 1 dòng

font: bold 14px/1.5 Helvetica;

Sử dụng những cách viết tắt này sẽ giúp bạn dễ dàng hơn trong lúc maintain code, và nhìn cũng chuyên nghiệp hơn nhiều.

4. Using 0px instead of 0

#selector {
  margin: 55px 0px;
}

Điều này thực ra cũng không phải một sai lầm gì nghiêm trọng, nhưng không cần thiết phải thêm "px" vào sau 0. Với những ide hiện đại ngày nay thì chúng sẽ warning ngay khi bạn viết như thế, nhưng viết như thế cũng chẳng làm code của bạn chạy sai. Nhưng quan điểm ở đây là luôn tối giản CSS, chỉ viết khi chúng thực sự cần thiết. Vì vậy, chẳng có lý do gì để bạn phải tốn công gõ thêm "px" vào sau 0 cả.

5. Using Color Names Instead of Hexadecimal

#selector {
  color: red;
}

Thay vì dùng tên màu như là "red" hãy dùng "#FF0000" bởi vì biết đâu đó, khi bạn dùng 1 trình duyệt cổ lỗ sĩ chẳng hạn, nó sẽ chẳng hiểu red là cái gì, nhưng dám chắc rằng nó sẽ hiểu mã màu thập lục phân của màu đỏ.

6. Redundant Properties

#selector-1 {
  font-style: italic;
  color: #e7e7e7;
  margin: 5px;
  padding: 20px
}
.selector-2 {
  font-style: italic;
  color: #e7e7e7;
  margin: 5px;
  padding: 20px
}

Thật là thừa thãi khi viết gần như là giống hệt nhau thế này. Thay vì đó bạn hoàn toàn có thể viết

#selector-1, .selector-2 {
  font-style: italic;
  color: #e7e7e7;
  margin: 5px;
  padding: 20px
}

Vừa dễ nhìn lại đỡ tốn công copy paste vẫn theo tiêu chí tối giản hết mức có thể.

7. Not Providing Fallback Fonts

Trong một thế giới hoàn hảo, mọi máy tính đều được cài đặt sẵn mọi font chữ mà bạn muốn. Nếu bạn sống trong thế giới đó thì chẳng cần bàn gì ở đây. Nhưng đáng tiếc là thế giới ấy chưa tồn tại, thử tưởng tượng bạn đang dùng 1 font chữ đẹp lung linh trên website của mình nhưng đáng buồn là máy tính của người khác thì lại không có font chữ đó. Vì vậy hãy luôn có phương án backup cho font chữ trên web của bạn. Sử dụng 1 số font phổ biến hoặc mặc định của trình duyệt chẳng hạn

#selector {
  font-family: Helvetica, Arial, sans-serif;
}

8. Using Only One Stylesheet for Everything

Nếu không muốn CSS của bạn vừa phức tạp lại còn nằm trong một mớ hỗn độn thì tốt nhất nên chia chúng ra thành các file khác nhau để dễ quản lý cũng như phát triển hơn sau này. Cố gắng chia chúng theo chức năng mà chúng thực hiện hay phần tử mà chúng chịu trách nhiệm định hình, như thế sẽ dễ cho bạn trong lúc tìm kiếm và sửa đổi.

@import url("reset.css");
@import url("ie.css");
@import url("layout.css");

Trên đây là một số lỗi nhỏ mà lập trình viên hay mắc phải, tuy nó cũng không nghiêm trọng cho lắm nhưng nếu khắc phục chúng, code CSS của bạn trông sẽ sạch sẽ và chuyên nghiệp hơn.