.jpg)
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.
Mẹo viết tốt code CSS
1. 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 từ 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.
Không tốt
Tốt
2. Không dùng Hacks IE
Mặc dù CSS hacks có thể có ích cho việc duy trì một cái nhìn nhất quán của website trên các trình duyệt cũ như IE6, nhưng chúng có vấn đề ở những phiên bản mới của trình duyệt IE như IE8 hỗ trợ tiêu chuẩn CSS ở cấp độ cao và sử dụng hacks có thể loại bỏ các cách bố trí. Bạn nên sử dụng các bản trình bày có điều kiện thay vì nhắm đến các phiên bản cụ thể của IE. Ví dụ, bằng cách sử dụng dòng lệnh của code trong thẻ bạn sẽ chỉ load tập tin iestypes.css khi trình duyệt là IE6 hoặc nhỏ hơn.
Đối với thông tin trong các comment có điều kiện, hãy tham khảo bài viết quirksmode trên CSS Conditional Comments.
Quirksmode
3. Sử dụng tên có ý nghĩa cho ID va class
Giả sử bạn định nghĩa style slidebar sử dụng class .leftbox và sau một vài lần thiết kế lại, bạn chuyển nó qua bên phải, sau đó nó sẽ có ý nghĩa để có leftbox như tên box mà bạn vừa chuyển. Bạn nên đặt ra một vài suy nghĩ trước khi tuyên bố các class và ID cho các phần tử để chúng có ý nghĩa và dễ hiểu sau này.
4. 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. Nó sẽ tốt hơn khi xác định chúng cho các phần tử cha mẹ 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ể
Không tốt
Tốt
5. Kết hợp nhiều bộ chọn lọc
Bạn có thể kết hợp nhiều bộ lọc vào trong một nếu chúng có các style nhất định phổ biến. Nó sẽ giúp bạn tiết kiệm thời gian và không gian.
Không tốt
Tốt hơn
6. Sử dụng thuộc tính viết tắt
Sử dụng các thuộc tính viết tắt của CSS để viết code CSS nhanh hơn và giảm kích cỡ file. Các ký hiệu viết tắt có thể được sử dụng cho margin, padding, border, font, background và cũng như cho các giá trị màu sắc.
Không tốt
Tốt hơn
Dưới đây là một hướng dẫn đầy đủ về thuộc tính viết tắt CSS
7. Tổ chức code CSS
Tổ chức code CSS của bạn trong một khuôn khổ nhất định sẽ làm cho nó dễ dàng hơn khi tìm kiếm một điều gì đó sau này và giúp bạn tiết kiệm nhiều thời gian tìm kiếm một định nghĩa style cụ thể.
Đây là một tổ chức mẫu mà bạn có thể sử dụng
Tổ chức code CSS
8. Làm cho CSS dễ đọc hơn
Viết CSS dễ đọc sẽ làm cho CSS dễ dàng được tìm kiếm và update các style trình bày sau này. Nhóm tất cả các style của một phần tử trong một dòng hay mỗi style trong dòng của nó với các thụt đầu dòng thích hợp. Bạn cũng có thể kết hợp 2 kỹ thuật này lại với nhau.
Làm cho CSS dễ đọc hơn
9. Thêm comments thích hợp
Comments có thể được sử dụng để tách các phần khác nhau của code CSS
Thêm comments
10. Đặt thuộc tính CSS theo thứ tự chữ cái
Điều này có thể là một cách khó khăn để viết CSS nhưng nó sẽ làm cho CSS của bạn dễ dàng tìm kiếm bất cứ dữ liệu nào ở những giai đoạn sau này
Đặt thuộc tính theo thứ tự chữ cái
11. Sử dụng Stylesheets bên ngoài
Nó luôn là cách thực hành thiết kế tốt để tách nội dung từ phần trình bày. Đặt tất cả code CSS của bạn trong stylesheet external và sử dụng để tham chiếu đến stylesheet trong trang web. Bằng cách đặt CSS trong file external, bạn có thể update style sau này tại nơi này thay vì nhìn vào các template html hoặc file cho styles.
Không tốt
Tốt hơn
12. Chia CSS thành nhiều file
Nếu bạn đang làm việc trong một dự án web có nhiều module, mỗi module với các thiết lập khác nhau của style và look, nó sẽ tốt hơn khi chia nhỏ CSS của bạn thành nhiều file dựa trên module mà chúng ta được áp dụng. Bạn có thể tách stylesheet như một thiết lập, một cách bố trí, một lớp chung và một style cụ thể cho module. Kỹ thuật này cho phép bạn tổ chức code của bạn dễ dàng hơn trong một dự án lớn nhưng việc tải nhiều file CSS có nghĩa là các yêu cầu HTTP nhiều hơn và thời gian tải chậm hơn, đây là cầu nối cho các file CSS đến để cứu trợ. Tạo ra một file CSS riêng biệt và nhập các file CSS khác vào nó.
Chia CSS thành nhiều file
13. Nén code CSS
Một khi bạn đã sẵn sàng để triển khai các dự án web, hay nén code CSS của bạn sử dụng các công cụ như CSS Compressor để giảm kích cỡ size và cải thiện thời gian tải của trang web
14. Hãy nhất quán trong cách viết code
Khi bạn làm việc trong một dự án phát triển web, sẽ là một quyết định khôn ngoan khi lựa chọn cách thức đặc biệt của tổ chức và định dạng code CSS của bạn, thực hiện như vậy cho tất cả các dự án của bạn.
Chúng tôi hy vọng những lời khuyên này sẽ giúp bạn viết và quản lý code CSS của mình tốt hơn. Nếu bạn muốn chia sẻ hay góp ý, hãy cho chúng tôi biết thông qua những bình luận của bạn dưới đây.
 |
1. 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 từ 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.
Không tốt
Tốt
2. Không dùng Hacks IE
Mặc dù CSS hacks có thể có ích cho việc duy trì một cái nhìn nhất quán của website trên các trình duyệt cũ như IE6, nhưng chúng có vấn đề ở những phiên bản mới của trình duyệt IE như IE8 hỗ trợ tiêu chuẩn CSS ở cấp độ cao và sử dụng hacks có thể loại bỏ các cách bố trí. Bạn nên sử dụng các bản trình bày có điều kiện thay vì nhắm đến các phiên bản cụ thể của IE. Ví dụ, bằng cách sử dụng dòng lệnh của code trong thẻ bạn sẽ chỉ load tập tin iestypes.css khi trình duyệt là IE6 hoặc nhỏ hơn.
Đối với thông tin trong các comment có điều kiện, hãy tham khảo bài viết quirksmode trên CSS Conditional Comments.
Quirksmode3. Sử dụng tên có ý nghĩa cho ID va class
Giả sử bạn định nghĩa style slidebar sử dụng class .leftbox và sau một vài lần thiết kế lại, bạn chuyển nó qua bên phải, sau đó nó sẽ có ý nghĩa để có leftbox như tên box mà bạn vừa chuyển. Bạn nên đặt ra một vài suy nghĩ trước khi tuyên bố các class và ID cho các phần tử để chúng có ý nghĩa và dễ hiểu sau này.
4. 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. Nó sẽ tốt hơn khi xác định chúng cho các phần tử cha mẹ 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ể
Không tốtTốt5. Kết hợp nhiều bộ chọn lọc
Bạn có thể kết hợp nhiều bộ lọc vào trong một nếu chúng có các style nhất định phổ biến. Nó sẽ giúp bạn tiết kiệm thời gian và không gian.
Không tốtTốt hơn6. Sử dụng thuộc tính viết tắt
Sử dụng các thuộc tính viết tắt của CSS để viết code CSS nhanh hơn và giảm kích cỡ file. Các ký hiệu viết tắt có thể được sử dụng cho margin, padding, border, font, background và cũng như cho các giá trị màu sắc.
Không tốtTốt hơnDưới đây là một hướng dẫn đầy đủ về thuộc tính viết tắt CSS
7. Tổ chức code CSS
Tổ chức code CSS của bạn trong một khuôn khổ nhất định sẽ làm cho nó dễ dàng hơn khi tìm kiếm một điều gì đó sau này và giúp bạn tiết kiệm nhiều thời gian tìm kiếm một định nghĩa style cụ thể.
Đây là một tổ chức mẫu mà bạn có thể sử dụng
Tổ chức code CSS8. Làm cho CSS dễ đọc hơn
Viết CSS dễ đọc sẽ làm cho CSS dễ dàng được tìm kiếm và update các style trình bày sau này. Nhóm tất cả các style của một phần tử trong một dòng hay mỗi style trong dòng của nó với các thụt đầu dòng thích hợp. Bạn cũng có thể kết hợp 2 kỹ thuật này lại với nhau.
Làm cho CSS dễ đọc hơn9. Thêm comments thích hợp
Comments có thể được sử dụng để tách các phần khác nhau của code CSS
Thêm comments10. Đặt thuộc tính CSS theo thứ tự chữ cái
Điều này có thể là một cách khó khăn để viết CSS nhưng nó sẽ làm cho CSS của bạn dễ dàng tìm kiếm bất cứ dữ liệu nào ở những giai đoạn sau này
Đặt thuộc tính theo thứ tự chữ cái11. Sử dụng Stylesheets bên ngoài
Nó luôn là cách thực hành thiết kế tốt để tách nội dung từ phần trình bày. Đặt tất cả code CSS của bạn trong stylesheet external và sử dụng để tham chiếu đến stylesheet trong trang web. Bằng cách đặt CSS trong file external, bạn có thể update style sau này tại nơi này thay vì nhìn vào các template html hoặc file cho styles.
Không tốtTốt hơn12. Chia CSS thành nhiều file
Nếu bạn đang làm việc trong một dự án web có nhiều module, mỗi module với các thiết lập khác nhau của style và look, nó sẽ tốt hơn khi chia nhỏ CSS của bạn thành nhiều file dựa trên module mà chúng ta được áp dụng. Bạn có thể tách stylesheet như một thiết lập, một cách bố trí, một lớp chung và một style cụ thể cho module. Kỹ thuật này cho phép bạn tổ chức code của bạn dễ dàng hơn trong một dự án lớn nhưng việc tải nhiều file CSS có nghĩa là các yêu cầu HTTP nhiều hơn và thời gian tải chậm hơn, đây là cầu nối cho các file CSS đến để cứu trợ. Tạo ra một file CSS riêng biệt và nhập các file CSS khác vào nó.
Chia CSS thành nhiều file13. Nén code CSS
Một khi bạn đã sẵn sàng để triển khai các dự án web, hay nén code CSS của bạn sử dụng các công cụ như CSS Compressor để giảm kích cỡ size và cải thiện thời gian tải của trang web
14. Hãy nhất quán trong cách viết code
Khi bạn làm việc trong một dự án phát triển web, sẽ là một quyết định khôn ngoan khi lựa chọn cách thức đặc biệt của tổ chức và định dạng code CSS của bạn, thực hiện như vậy cho tất cả các dự án của bạn.
Chúng tôi hy vọng những lời khuyên này sẽ giúp bạn viết và quản lý code CSS của mình tốt hơn. Nếu bạn muốn chia sẻ hay góp ý, hãy cho chúng tôi biết thông qua những bình luận của bạn dưới đây.
