Cách viết CSS chuẩn khi phát triển giao diện

Việc viết CSS đúng chuẩn, nhất quán sẽ giúp bạn có thể đồng bộ giữa việc code CSS cho theme hay plugin, nhóm của bạn cũng có thể đọc được và hiểu ý nghĩa những gì bạn code.

Cấu trúc bạn cần nắm

• Chỉ sử dụng tabs khi thụt đầu dòng, tuyệt đối không dùng khoảng trắng.
• Gộp nhiều đối tượng cùng thuộc tính lại với nhau bằng dấu phẩy , cách một cái kế đến là dấu ngoặc nhọn { nằm cùng hàng với các đối tượng. Các thuộc tính sẽ tabs đầu dòng. Dấu ngoặc nhọn } kết thúc thẳng hàng với các thuộc tính.
• Khi cần thay đổi thuộc tính của một đối tượng nào đó thì Nếu đối tượng là duy nhất bạn cần code các thuộc tính trên một dòng.
• Xuống hàng cho các thuộc tính nhiều đối tượng.
• Viết các thuộc tính trên cùng một hàng nếu là đối tượng duy nhất.
• Cách một dòng cho các đối tượng khác nhau.

Đúng

#doi-tuong-1, #doi-tuong-2, #doi-tuong-3 {
    background: #fff;
    color: #000;
    }
    
#doi-tuong-1 { background: #fff; color: #000; }

hoặc

#doi-tuong-1 { 
    background: #fff; 
    color: #000; 
}

Sai

#doi-tuong-1, 
#doi-tuong-2, 
#doi-tuong-3 {
    background: #fff;
    color: #000;
}

Cách đặt tên đối tượng

• Tên đối tượng cách nhau bởi dấu gạch ngang -. Ví dụ: .huynh-tong
• Không đặt tên đối dạng camelcase ( .huynhTong ) hoặc underscores ( .huynh_tong ).
• Không đặt số trước đối tượng. Ví dụ: .1_huynhtong.
• Không đặt tên đối tượng không có ý nghĩa. Ví dụ: .c62-bo ( không có ý nghĩa ). Nên đặt .section-news ( hiểu ngay đây là phần chứa những tin tức ).
• Không đặt tên đối tượng div#ten-doi-tuong hoặc div.ten-doi-tuong mà chỉ cần đặt đơn giản: #ten-doi-tuong hoặc .ten-doi-tuong.
• Các thuộc tính của đối tượng phải nằm trong 2 dấu ngoặc đôi "". Ví dụ: input[type="text"] cách viết sai là: input[type=text]

Đúng

#doi-tuong {
    margin: 1em 0;
}
 
input[type="text"] {
    line-height: 1.1;
}

Sai

#doiTuong { // camelcase
    margin: 1em 0;
}

#doi_tuong { // underscores
    margin: 1em 0;
}

div#doi_tuong {
    margin: 1em 0;
}

.c62_bo {
    margin: 1em 0;
}
 
input[type=text] {
    line-height: 1.1;
}

Thuộc tính của đối tượng

• Giá trị của thuộc tính theo sau dấu hai chấm và khoảng cách. Ví dụ: color: red.
• Tất cả các thuộc tính và giá trị phải viết thường, ngoại trừ tên phông chữ. Ví dụ: display: BLOCK
• Sử dụng mã màu hex hoặc rgba() nếu dùng opacity. nên #fff không nên #FFFFFF ( viết hoa ).
• Sử dụng cách viết ngắn gọn cho background, border, font, list-style, margin, and padding. .class{ padding: 0 10px; border: 1px solid red; }

Đúng

#doi-tuong-1 {
    background: #fff;
    display: block;
    margin: 0;
    margin-left: 20px;
}

Sai

#doi-tuong-1 {
    background:#FFFFFF;
    display: BLOCK;
    margin-left: 20PX;
    margin: 0;
}

Thứ tự các thuộc tính của đối tượng

Danh sách các thứ tự mình đã tổng hợp lại để các bạn có thể sắp xếp vị trí các thuộc tính.

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

Ví dụ

#doi-tuong {
    position: absolute;
    padding: 10px;
    color: #777;
    background: #fff;
    z-index: 1;
}

-- Còn tiếp