70 Ý kiến chuyên gia để code CSS tốt hơn (Phần 1)

Css không hẳn dễ sử dụng. Nó phụ thuộc vào kĩ năng và kinh nghiệm của bạn. Viết CSS đôi khi có thể trở thành một cơn ác mộng, đặc biệt khi bạn không chắc selector nào đang được sử dụng cho document element.

Bản dịch từ website: https://hackhands.com

Chúng ta phải có cái nhìn cận cảnh về một số tricks, tips, phương pháp, kĩ thuật viết code CSS được liệt kê dưới đây. Chúng bao gồm cả kĩ thuật cơ bản bạn có thể sử dụng trong mọi dự án mà bạn đang phát triển, nhưng khó mà có thể tìm thấy khi bạn cần chúng.

Bài viết “Hơn 70 ý kiến chuyên gia để code CSS tốt hơn” có thể giúp bạn cải thiện hiệu suất viết CSS. Bạn có thể vui lòng tìm kiếm phần danh sách các tài liệu tham khảo và bài viết liên quan cuối bài viết.

Bạn có thể muốn đọc bài “53 kĩ thuật CSS mà bạn không thể thiếu”, sẽ cung cấp cho bạn công cụ cơ bản cho kĩ thuật CSS cơ bản mà bạn cần cho những dự án tiếp theo của bạn.

Tại khóa học Web cơ bản HTML5, CSS3 và Javascript của TechMaster, bạn sẽ được hướng dẫn cách viết CSS sao cho tối ưu nhất.

Workflow: Getting started
- Sau khi bạn có bản thiết kế, bắt đầu với một trang trắng. "Gồm cả thẻ header, điều hướng, khung mẫu phần nội dung,và chân trang.Thêm html,rồi thêm css nó sẽ hoạt động tốt hơn nhiều."
- Sử dụng một trang style tổng quan: Một trong những lỗi phổ biến nhất tôi thấy người ở mức bắt đầu và trung bình thường gặp phải là không loại bỏ style mặc định của trình duyệt. Điều này dẫn đến việc không nhất quán trong giao diện của bạn thiết kế trên các trình duyệt và cuối cùng để nhiều người thiết kế đổ lỗi cho trình duyệt . Đó là một đổ lỗi không đáng có phải không?. Trước khi bắt đầu code một trang web, hãy đảm bảo nó hiển thị như nhau ở mọi trình duyệt.
```
/* master.css */
@import url("reset.css");
@import url("global.css");  
@import url("flash.css");
@import url("structure.css");
```
```
<style type="text/css" media="Screen">
   @import url("css/master.css");
</style>
```
- Thiết lập lại style-CSS của bạn trước tiên: Bạn không cần phải chỉ rõ một giá trị của một thuộc tính bằng cách sử dụng các giá trị mặc định của thuộc tính. Nhiều người thích thiết lập lại khoảng trắng bằng 0 cho cả margin và padding cho tất cả các elements trên cùng của trang style.
- Giữ một thư viện class CSS hữu ích: Có ích cho việc gỡ lỗi, nhưng nên tránh trong phiên bản phát hành(riêng biệt giữa đánh dấu và trình bày). Vì bạn có thể nhiều tên lớp (ví dụ: <p class = "floatLeft alignLeft width75"> ... </ p>), sử dụng chúng gỡ lỗi đánh dấu của bạn.
```
.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
```
Tổ chức code CSS của bạn
- Cấu tạo code CSS của bạn, sử dụng tổng quan stylesheet: Tổ chức Css của bạn giúp cho việc bảo trì site trong tương lai. Bắt đầu trang style tổng quát. Trong trang style này bạn khai báo reset.css, global.css, flash.css(nếu cần) và structure.CSSvà kèm thêm 1 trang style kiểu chữ. Dưới đây là ví dụ về 1 trang tổng quan CSS và cách nhúng nó trong tài liệu
```
h2 { }
#snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px "Verdana", sans-serif; }
#main_side h2 { color: #444; font: bold 14px/14px "Verdana", sans-serif; }
.sidetagselection h2 { color: #fff; font: bold 14px/14px "Verdana", sans-serif; }
```
- Sử dụng styles-Css của bạn, sử dụng cờ: chia trang style của bạn thành phần cụ thể: ví dụ. Global Styles – (body, paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles, Navigation, Forms, Comments, Extras.
```
/* ------------------------*/ /* ---------->>> GLOBAL <<<-----------*/ /* ------------------------*/
```
- Cấu trúc style –CSS của bạn, tạo một mục lục: trên cùng của tài liệu CSS, viết một mục lục. Ví dụ, bạn có thể phác thảo sự khác nhau giữa phần mà tài liệu CSS của bạn đang style(header, main, footer,…). Sau đó, sử dụng phần ngắt rõ ràng để chia vùng.
- Cấu trúc style- CSS của bạn, sắp xếp thuộc tính theo bảng chữ cái: "Tôi không biết tôi lấy ý tưởng từ đâu , nhưng tôi đã sắp xếp thuộc tính CSS của tôi trong nhiều tháng nay, bạn có thể tin hoặc không, nó làm cho thuộc tính đặc biệt tìm thấy dễ dàng hơn."
```
body {
   background: #fdfdfd;
   color: #333;
   font-size: 1em;
   line-height: 1.4;
   margin: 0;
   padding: 0;
}
```
- Chia code thành từng khuôn: “Nó có thể chung chung cho một số bạn,nhưng đôi khi tôi nhìn vào CSS và nó không được chia thành từng phần. Điều đó làm việc code trong một tuần, một tháng hay 1 năm sau dễ dàng hơn. Bạn sẽ dễ dàng tìm thấy classes, element mà bạn cần thay đổi. Ví dụ: /* Structure */, /* Typography */ etc.”
- Chia trang style của bạn thành khối: Tôi thường chia trang style thành 3 khối. đầu tiên là khai báo thẳng element. Thay đổi body, một số styles link, một số style header, thiết lập lại margin và padding cho form.sau khi khai báo element, tôi khai báo class,cái đó giống như 1 class về 1 thông báo lỗi hoặc một chú thích tôi sẽ đi đây. Tôi bắt đầu khai báo main-container. Và bất kì style cho element nào trong container đó đều được thụt dòng. Trong nháy mắt, tôi có thể thấy trang web của tôi đã được chia nhỏ và tìm kiếm dễ dàng. Tôi cũng sẽ khai báo container ngay cả khi chúng không có bất kì quy tắc gì.
Xử lí IDs, Classes, Selectors, thuộc tính
- Giữ container ở mức tối thiểu: Cứu tài liệu của bạn khỏi phình to. Những developer mới thường sẽ sử dụng quá nhiều thẻ div giống như ô của 1 bảng để hình thành bố cục. Hãy tận dụng nhiều cấu trúc elements khác nhau để hình thành bố cục. Đừng thêm thẻ div.Khi thêm một chút CSS Hãy xem xét tất cả các lựa chọn trước khi bổ sung thêm thẻ div để hiệu quả trong khi sử dụng 1 chút hiệu ứng CSS có thể giống vậy
- Giữ thuộc tính ở mức tối thiểu:”Làm việc thông minh hơn,sẽ không phải khó khăn vs CSS”. Theo điều này, có vài quy tắc phụ: Nếu không rõ nơi để thêm thuộc tính CSS, đừng thêm nó; Nếu bạn không chắc tại sao lại phải thêm thuộc tính CSS đó thì đừng thêm; và nếu bạn thấy rằng mình đã thêm thuộc tính đó ở nhiều nơi, hãy tìm cách để thêm nó ở một nơi.
- Giữ Selectors ở mức tối thiểu:”Tránh những selectors không cần thiết. Sử dụng ít selectors hơn nghĩa là ít selector cần phải đè lên style cụ thể hơn. Đó có nghĩa là dễ dàng để khắc phục sự cố hơn.”
- Sử dụng hằng số CSS để triển khai nhanh hơn: Khái niệm về hằng số- giá trị cố định mà được sử dụng qua code của bạn. Một cách để hằng số CSS không bị thiếu là phải tạo 1 số khai báo trên đầu file CSS trong chú thích để khai báo hằng số. Một sử dụng phổ biến cho việc này là tạo ra một “thuật ngữ màu”. Điều này có nghĩa rằng bạn có một danh sách tra cứu nhanh đến các màu sắc được sử dụng trong các trang web để tránh sử dụng luân phiên do nhầm lẫn, và nếu bạn cần thay đổi màu sắc, bạn có một danh sách nhanh chóng thực hiện tìm kiếm và thay thế.
```
/*
   # Dark grey (text): #333333
   # Dark Blue (headings, links) #000066
   # Mid Blue (header) #333399
   # Light blue (top navigation) #CCCCFF
   # Mid grey: #666666 #
*/
```
- Sử dụng một hệ thống đặt tên chung: Nó sẽ tiết kiệm nhiều thời gian của bạn khi tìm kiếm lỗi, hay cập nhật tài liệu. Đặc biệt là tài liệu CSS lớn, Nếu tên của bạn hoàn toàn khác nhau thì nó có thể gây rắc rối lớn một cách nhanh chóng.Tôi khuyên bạn nên sử dụng mô hình parent-child
- Nhóm selectors với khai báo CSS: Nhóm selectors. Một số kiểu element, classes,hoặc ids chia sẻ một số thuộc tính, bạn có nhóm những selectors lại để tránh phải xác định lại thuộc tính nhiều lần. Nó sẽ tiết kiệm nhiều không gian và tiềm lực của nó
- Cô lập những thuộc tính đơn mà bạn có thể sử dụng lại nhiều lần: Nếu bạn thấy mình sử dụng một thuộc tính đơn nhiều lần. Hãy cô lập nó để khỏi lặp lại nhiều lần và cũng cho phép bạn thay đổi hiển thị toàn bộ phần trang web sử dụng nó.
Sử dụng kí hiệu viết tắt
- Rút ngắn kí hiệu màu hexa: Bạn có thể viết nó hiệu quả hơn bằng cách bỏ số có thứ tự chẵn
```
#000 is the same as #000000, #369 is the same as #336699
```
- Định nghĩa classes giả định cho liên kết theo thứ tự LoVe/HAte(List,Visited,Hover,Active): Để chắc rằng bạn sẽ thấy kiểu liên kết khác nhau của mình, tốt nhất bạn nên để styles theo thứ tự “link-visited-hover-active” hay LVHA cho gọn. Nếu bạn lo ngại về nổi bật style, chúng ta có thể viết nó ở cuối.
```
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
```
- Định nghĩa margin, padding hay border của phần tử theo thứ tự TRouBLed: Khi sử dụng cách rút gọn gán cho margin,padding,border cho một elements, hãy nhớ Top- Right-Bottom-Left.
- Bạn có thể sử dụng thuộc tính rút gọn:
```
margin: top right bottom left;
margin: 1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
```
```
border: width style color;
border: 1px solid #000;
```
```
background: color image repeat attachment position;
background: #f00 url(background.gif) no-repeat fixed 0 0;
```
```
font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
```
Thiết lập kiểu chữ
- Để làm việc với Ems như với pxs, đặt font-size trong thẻ body bằng 62,5%: Giá trị mặc định của font-size: 16px; như vậy 1em khoảng 10px (16 x 62.5% = 10). Điều này cho phép bạn sử dụng em dễ dàng hơn. Ví dụ: 1.3em xấp xỉ 13px.
- Sử dụng bộ kí tự phổ biến để mã hóa: Vì nó bao gồm hầu hết các tình huống.Và đó là UTF-8, dựa trên Unicode, Unicode là một chuẩn thiết kế để cho phép ký tự và biểu tượng nhất quán về hiển thị và thao tác trên máy tính.
```
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
```
- Bạn có thể thay đổi in hoa sử dụng CSS: Nếu bạn cần cái gì đó viết bằng chữ hoa, như tiêu đề, hãy để CSS làm việc đó. Ví dụ: chuyển toàn bộ kí tự trong thẻ h1 thành chữ in hoa.
```
h1 { text-transform: uppercase; }
```
- Bao phủ toàn bộ khai báo cơ bản bằng font-families: Khi chúng ta khai báo một phông chữ cụ thể để sử dụng trong thiết kế của chúng ta, chúng ta làm vậy và hi vọng rằng người dùng đã cài đặt phông này trong hệ thống của họ. Nếu người dùng không có phông đó thì họ không thấy nó, Chúng ta cần làm là chú thích phông mà người dùng có trong máy họ, ví dụ như thuộc tính font-family dưới đây.
```
p { font-family: Arial, Verdana, Helvetica, sans-serif; }
```
- Sử dụng 1.4em – 1.6em cho chiều cao của dòng line-height: 1.4em để dòng có thể đọc được, một dòng không nên có quá 10 từ và màu sắc không nên quá tương phản. Ví dụ, đen và trắng thường quá trói trong màn hình CRT, vì vậy tôi thử trắng ngà (#fafafa) và một màu đen xám (#333333).
- Gán 100.01% cho thẻ html: Điều này làm cho kích thước phông bù đắp cho một số lỗi trình duyệt. Đầu tiên, thiết lập một kích thước phông chữ mặc định cho body theo phần trăm (thay vì em) loại bỏ một vấn đề IE / Win với việc chòi ra hay hẹp lại phông không cân xứng nếu sau đó chúng được thiết lập ems trong elements khác.
Gỡ lỗi
- Thêm borders để xác định containers. "Sử dụng nhiều kiểu kiểm tra như thêm đường viền hoặc màu nền khi xây dựng tài liệu của bạn hay gỡ lỗi các vấn đề bố trí. Ex: div { border:1px red dashed; }. Ngoài ra, bạn cũng có thể sử dụng bookmarklet(kho dấu trang trong trình duyệt web chứa javascript để thêm tính năng mới cho trình duyệt) để áp dụng border hay làm điều gì khác cho bạn. Bạn cũng có thể sử dụng * { border: 1px solid #ff0000; }. Thêm border đến element cụ thể giúp bạn xác định chồng chéo và bổ sung khoảng trắng điều mà không dễ để nhận ra.
```
* { border: 1px solid #f00; }
```
- Khi gỡ rối, hãy kiểm tra thẻ đóng đầu tiên: Đã bao giờ bạn nản chí vì điều mà bạn thay đổi một cái gì đó nhỏ bé,điều duy nhất có được là giao diện tuyệt đẹp của bạn bị vỡ, và nó có thể do bạn chưa đóng thẻ elements.

Bản dịch của Phạm Đức Hùng , lập trình viên HTML, CSS và JavaScript tại Techmaster

Còn tiếp...

70 Ý kiến chuyên gia để code CSS tốt hơn (Phần 1)

Workflow: Getting started​

Tổ chức code CSS của bạn​​

Xử lí IDs, Classes, Selectors, thuộc tính

Sử dụng kí hiệu viết tắt

Thiết lập kiểu chữ​​

Gỡ lỗi​​

Bình luận

Workflow: Getting started

Tổ chức code CSS của bạn

Thiết lập kiểu chữ

Gỡ lỗi