.block {} Đại diện cho khối cao nhất.
.block__element {} Đại diện cho khối con, tiếp nối theo sau khối cao nhất(khối cha)--> dùng 2 dấu gạch dưới
.block--modifier {} Đại diện ngang hàng với tên class trong khối, có tác dụng để thay đổi css của đối tượng cùng cấp ban đầu. --> dùng 2 dấu gạch ngang.
Đặt tên Class: Nên viết thường các ký tự: name, class ghép 2 danh từ nên đặt kiểu : className
đối với đặt tên id, tên class thì sẽ dùng phương pháp Lower Camel ( tức là sẽ viết hoa chữ cái đầu tiên của từ thứ hai trở đi※)
※ Ví dụ: dạng indexTest
2. Cách đặt tên khác
tên Class viết thường,
- Class cùng cấp: class=" btn btn-default"
- Class cấp cha, con: class="media"
>class="media-music"
>class="media-film"
ĐẶT TÊN CLASS, ID phải thể hiện rõ 2 yếu tố "ở đâu""thể hiện cái gì"
Tổng hợp tên id, tên class rất hay dùng
| vùng, miền | tên id, tên class |
|---|---|
| tổng thể page | container |
| header | header |
| tiêu đề của site | siteTtl |
| logo | logo |
| Catchphrase | catch |
| navigation | nav |
| global navigation | gNav |
| breadcrumb navigation | pagePath |
| content area | conts |
| main content | main |
| sidebar | side,sideBar |
| footer | footer |
| bài viết | article |
| chủ đề | topic, topics |
| thông tin chú ý | spotLight |
| chọn lọc | pickup |
| tiếp theo | next |
| trở về trước | pre |
| đến trang Top | pageTop |
| muốn xem nhiều nữa | more |
| thông báo | info |
| tin tức | news |
| ngày tháng | date |
| lịch sử update | history |
| list | list |
| các mục | item |
| list các sản phẩm | goodsList |
| khu vực ảnh | photo,img |
| khu vực text | txt |
| khu vực figure | figure |
| chú thích | notes |
| banner | bn |
| thông tin liên lạc | contact, inquiry |
| bài viết | article |
| ẩn đi | hidden |
| quảng cáo | pr |
| vị trí hiện tại | current |
| câu lead | lead |
| đề mục đầu tiên,đề mục cuối cùng | first(đầu tiên), last(cuối cùng), firstChild, lastChild |
| cột lẻ, cột chẵn | odd(số lẻ), even(số chẵn) |
| box dành cho layout | unit, box, col, area |
| box kết hợp ở các vùng miền khác | box,area |
file: tất cả viết bằng chữ thường, ngăn cách bằng dấu gạch ngang.
file ảnh được đặt dựa trên quy tắc sau:
「Tên page」「vùng miền」「chủng loại：bắt buộc」「chi tiết」「ký hiệu (serial number)」「trạng thái」「đuôi mở rộng」.
Mỗi bộ phận sẽ cách nhau bởi dấu gạch dưới 「_」
| chủng loại | quy tắc |
|---|---|
| ảnh, sơ đồ | img |
| thumbnail | thumb |
| banner | bn |
| button | btn |
| logo | logo |
| navi | nav |
| tiêu đề ※１ | ttl |
| text | txt |
| icon | icon |
| Background (ngoài background của icon) | bg |
| mũi tên | arrow |
| line | line |
| pagetop ※２ | pagetop |
| spacer ※２ | spacer |
| đang loading ※２ | loading |
Không có nhận xét nào:
Đăng nhận xét