Đừng viết tiêu đề bằng CSS
Chỉ cần chia các phần thành các tập tin. Bất kỳ bình luận CSS, chỉ nên là, bình luận.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
Sử dụng một tập lệnh để kết hợp chúng thành một; Nếu cần. Bạn thậm chí có thể có một cấu trúc thư mục đẹp, và chỉ cần tập lệnh của bạn quét đệ quy .csscác tệp.
Nếu bạn phải viết tiêu đề, hãy có TOC ở đầu tệp
Các tiêu đề trong TOC phải hoàn toàn bằng với các tiêu đề bạn viết sau này. Đó là một nỗi đau để tìm kiếm các tiêu đề. Để thêm vào vấn đề, làm thế nào chính xác là bất cứ ai giả sử biết bạn có một tiêu đề khác sau tiêu đề đầu tiên của bạn? ps. không thêm doc-like * (sao) ở đầu mỗi dòng khi viết TOC, điều này chỉ khiến việc chọn văn bản trở nên khó chịu hơn.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
Viết bình luận có hoặc trong các quy tắc, không nằm ngoài khối
Trước hết, khi bạn chỉnh sửa tập lệnh, có khả năng 50/50 bạn sẽ chú ý đến những gì nằm ngoài khối quy tắc (đặc biệt nếu đó là một khối văn bản lớn;)). Thứ hai, không có trường hợp nào bạn cần "bình luận" bên ngoài. Nếu nó ở bên ngoài, nó là 99% thời gian của một tiêu đề, vì vậy hãy giữ nó như thế.
Tách trang thành các thành phần
Các thành phần nên có position:relative, không paddingvà không margin, hầu hết thời gian. Đơn giản hoá% này cai trị rất nhiều, cũng như cho phép đơn giản hơn nhiều absolute:position'ing của các yếu tố, vì nếu có một container vị trí tuyệt đối các yếu tố vị trí tuyệt đối sẽ sử dụng container khi tính toán top, right, bottom, lefttài sản.
Hầu hết các DIV trong tài liệu HTML5 thường là một thành phần.
Một thành phần cũng là một cái gì đó có thể được coi là một đơn vị độc lập trên trang. Trong thuật ngữ của giáo dân đối xử với một cái gì đó giống như một thành phần nếu nó có ý nghĩa để đối xử với một cái gì đó như một hộp đen .
Tiếp tục với ví dụ trang QA một lần nữa:
#navigation
#question
#answers
#answers .answer
etc.
Bằng cách chia trang thành các thành phần, bạn chia công việc của mình thành các đơn vị có thể quản lý được.
Đặt quy tắc với hiệu ứng tích lũy trên cùng một dòng.
Ví dụ border, marginvà padding(nhưng không outline) tất cả thêm vào kích thước và kích thước của phần tử bạn đang tạo kiểu.
position: absolute; top: 10px; right: 10px;
Nếu chúng không thể đọc được trên một dòng, ít nhất hãy đặt chúng ở gần nhau:
padding: 10px; margin: 20px;
border: 1px solid black;
Sử dụng tốc ký khi có thể:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
Không bao giờ lặp lại bộ chọn
Nếu bạn có nhiều phiên bản của cùng một bộ chọn, rất có thể bạn sẽ không thể tránh khỏi việc kết thúc với nhiều phiên bản của cùng một quy tắc. Ví dụ:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
Tránh sử dụng TAG làm công cụ chọn, khi bạn có thể sử dụng id / class
Trước hết, các thẻ DIV và SPAN là ngoại lệ: bạn không bao giờ nên sử dụng chúng! ;) Chỉ sử dụng chúng để đính kèm một lớp / id.
Điều này...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
Nên viết như thế này:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Bởi vì các DIV lơ lửng thêm ở đó không thêm gì vào bộ chọn. Họ cũng buộc một quy tắc thẻ không cần thiết. Nếu bạn đã thay đổi, ví dụ, .answertừ một divđến một articlephong cách của bạn sẽ phá vỡ.
Hoặc nếu bạn thích rõ ràng hơn:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Lý do là border-collapsetài sản là một tài sản đặc biệt chỉ có ý nghĩa khi áp dụng cho a table. Nếu .statisticskhông phải là tablenó không nên áp dụng.
Quy tắc chung là xấu xa!
- tránh viết các quy tắc chung / ma thuật nếu bạn có thể
- trừ khi đó là cho thiết lập lại / hủy bỏ CSS, tất cả các phép thuật chung của bạn nên áp dụng cho ít nhất một thành phần gốc
Họ không tiết kiệm thời gian của bạn, họ làm cho đầu bạn nổ tung; cũng như làm cho việc bảo trì trở thành một cơn ác mộng. Khi bạn viết quy tắc, bạn có thể biết họ áp dụng ở đâu, tuy nhiên điều đó không đảm bảo quy tắc của bạn sẽ không gây rắc rối với bạn sau này.
Để thêm vào quy tắc chung này là khó hiểu và khó đọc, ngay cả khi bạn có một số ý tưởng về tài liệu bạn đang tạo kiểu. Điều này không có nghĩa là bạn không nên viết các quy tắc chung chung, chỉ không sử dụng chúng trừ khi bạn thực sự có ý định cho chúng là chung chung và thậm chí chúng còn thêm nhiều thông tin phạm vi vào bộ chọn như bạn có thể.
Những thứ như thế này...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... Có cùng một vấn đề như sử dụng các biến toàn cục trong ngôn ngữ lập trình. Bạn cần phải cung cấp cho họ phạm vi!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
Về cơ bản có nghĩa là:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
Tôi thích sử dụng ID bất cứ khi nào một thành phần tôi biết là một singleton trên một trang; nhu cầu của bạn có thể khác nhau.
Lưu ý: Tốt nhất, bạn nên viết vừa đủ. Tuy nhiên, đề cập đến nhiều thành phần hơn trong bộ chọn là lỗi dễ tha thứ hơn, so với việc đề cập đến các thành phần ít hơn.
Giả sử bạn có một paginationthành phần. Bạn sử dụng nó ở nhiều nơi trên trang web của bạn. Đây sẽ là một ví dụ tốt về thời điểm bạn sẽ viết một quy tắc chung. Hãy nói với bạn display:blockcác liên kết số trang cá nhân và cung cấp cho họ một nền màu xám đậm. Để chúng được hiển thị, bạn phải có các quy tắc như thế này:
.pagination .pagelist a {
color: #fff;
}
Bây giờ hãy nói rằng bạn sử dụng phân trang của mình cho một danh sách các câu trả lời, bạn có thể gặp phải một cái gì đó như thế này
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
Điều này sẽ làm cho các liên kết màu trắng của bạn màu đen, mà bạn không muốn.
Cách khắc phục không chính xác là:
.pagination .pagelist a {
color: #fff !important;
}
Cách khắc phục chính xác là:
#answers .header .pagination .pagelist a {
color: #fff;
}
Những bình luận "logic" phức tạp không hoạt động :)
Nếu bạn viết một cái gì đó như: "giá trị này phụ thuộc vào blah-blah kết hợp với chiều cao của blah-blah", chắc chắn bạn sẽ phạm sai lầm và tất cả sẽ rơi xuống như một ngôi nhà thẻ.
Giữ bình luận của bạn đơn giản; nếu bạn cần "hoạt động logic", hãy xem xét một trong những ngôn ngữ tạo khuôn mẫu CSS như SASS hoặc LESS .
Làm thế nào để bạn viết một pallet màu?
Để lại điều này cho đến cuối cùng. Có một tập tin cho toàn bộ pallet màu của bạn. Với tập tin này, phong cách của bạn vẫn nên có một số bảng màu có thể sử dụng được trong các quy tắc. Pallet màu của bạn nên ghi đè lên. Bạn chọn chuỗi chọn bằng cách sử dụng thành phần cha mẹ ở mức rất cao (ví dụ #page:) và sau đó viết kiểu của bạn dưới dạng khối quy tắc tự đủ. Nó có thể chỉ là màu sắc hoặc một cái gì đó nhiều hơn.
ví dụ.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
Ý tưởng rất đơn giản, bảng màu của bạn là một bản định kiểu độc lập với kiểu cơ sở, mà bạn xếp tầng .
Tên ít hơn, yêu cầu ít bộ nhớ hơn, làm cho mã dễ đọc hơn
Sử dụng ít tên hơn là tốt hơn. Tốt nhất là sử dụng các từ rất đơn giản (và ngắn!): Văn bản, nội dung, tiêu đề.
Tôi cũng thấy sự kết hợp của các từ đơn giản dễ hiểu hơn sau đó có một loạt các từ "thích hợp" dài: postbody, posthead, userinfo, v.v.
Giữ cho vốn từ vựng nhỏ, theo cách này ngay cả khi một người lạ nào đó đến để đọc súp kiểu của bạn (như chính bạn sau một vài tuần;)) chỉ cần hiểu nơi các từ được sử dụng thay vì sử dụng mọi công cụ chọn. Ví dụ: tôi sử dụng .thisbất cứ khi nào một yếu tố được cho là "mục được chọn" hoặc "mục hiện tại", v.v.
Dọn dẹp sau chính mình
Viết CSS giống như ăn, đôi khi bạn để lại một mớ hỗn độn phía sau. Hãy chắc chắn rằng bạn dọn dẹp mớ hỗn độn đó, nếu không mã rác sẽ chồng chất. Xóa các lớp / id bạn không sử dụng. Xóa các quy tắc CSS mà bạn không sử dụng. Hãy chắc chắn rằng mọi thứ đều chặt chẽ và bạn không có các quy tắc mâu thuẫn hoặc trùng lặp.
Nếu bạn, như tôi đã đề xuất, đã coi một số thùng chứa là hộp đen (thành phần) theo kiểu của bạn, đã sử dụng các thành phần đó trong bộ chọn của bạn và giữ mọi thứ trong một tệp chuyên dụng (hoặc tách một tệp đúng với TOC và tiêu đề), sau đó công việc dễ dàng hơn ...
Bạn có thể sử dụng một công cụ như phần mở rộng firefox Dust-Me Selector (mẹo: trỏ nó vào sitemap.xml của bạn) để giúp bạn tìm thấy một số rác ẩn trong css nukes và Carnies của bạn.
Giữ một unsorted.csstập tin
Giả sử bạn đang tạo kiểu cho trang web QA và bạn đã có biểu định kiểu cho "trang câu trả lời" mà chúng tôi sẽ gọi answers.css. Nếu bây giờ bạn cần thêm nhiều css mới, hãy thêm nó vào biểu unsorted.cssđịnh kiểu sau đó tái cấu trúc vào biểu answers.cssđịnh kiểu của bạn .
Một số lý do cho việc này:
- tái cấu trúc nhanh hơn sau khi bạn hoàn thành, sau đó tìm kiếm các quy tắc (có lẽ không tồn tại) và tiêm mã
- bạn sẽ viết những thứ mà bạn sẽ loại bỏ, việc tiêm mã chỉ khiến việc loại bỏ mã đó trở nên khó khăn hơn
- việc thêm vào tệp gốc dễ dẫn đến sao chép quy tắc / bộ chọn
simplicity,complexity,maintenance,structurevàrefactoring.