Các lớp trợ giúp CSS toàn cầu có phải là một ý tưởng hay không?

Question

Giả sử tôi có một màu sắc tôi biết tôi sẽ sử dụng rất nhiều trong một trang web.

tôi có thể một trong hai xác định rất nhiều màu sắc của thời gian trong nhiều CSS lớp của

.nav-login { color:#green; other css....... } 

Hoặc

.green {color:green;} 
.nav-login { other css....... } 

<div class="nav-login green">stuff</div> 

Vì vậy, khái niệm này là, bạn nên sử dụng lớp CSS helper hoặc bạn nên xác định tất cả mọi thứ cụ thể. Về mặt lý thuyết, bạn sẽ tiết kiệm băng thông trong dài hạn bằng cách viết nhiều CSS hơn và ít HTML hơn, nhưng tôi tìm phương pháp áp dụng các lớp CSS trợ giúp trong HTML, giống như bạn đang viết CSS ngữ nghĩa theo nghĩa thiết kế.

Answer 1

Cá nhân tôi không nghĩ rằng nên đặt tên các lớp dựa trên các thuộc tính của chúng, chẳng hạn như .green cho văn bản màu xanh lục. Thay vào đó, sử dụng một vòng, nói .approved cho văn bản màu xanh lá cây, và .warning cho cảnh báo, cảnh báo và vv

Theo thiển ý của tôi, selectors (lớp học, ID) nên phản ánh vai trò/Mục đích của nguyên tố này, và không phải của họ xuất hiện. Ví dụ: nếu bạn muốn thiết kế lại trang web của mình và áp dụng bảng màu mới và trình đơn điều hướng của bạn thay đổi từ xanh sang xanh - thì bộ chọn .green sẽ có rất ít ý nghĩa và sẽ khó hiểu đối với bất kỳ ai đang tiếp quản dự án trong tương lai, nếu có.

Hơn nữa, không có lý do gì để chỉ định một lớp .green cho thông tin đăng nhập điều hướng <div>, nếu bạn có thể chỉ định nó bằng cách sử dụng .nav-login.

Chris Coyier đã biên soạn một số CSS style guide hoàn toàn toàn diện - nó không phải là quy tắc vàng, nhưng nó là tốt để làm theo.

Answer 2

Tôi sẽ cung cấp giải pháp hoàn toàn khác cho vấn đề của bạn. Sử dụng LESS

Sử dụng này, bạn sẽ có thể xác định các biến và rất nhiều thứ mát khác quá

biến cho phép bạn chỉ định các giá trị sử dụng rộng rãi ở một nơi duy nhất, và sau đó tái sử dụng chúng trong suốt biểu định kiểu, làm cho các thay đổi toàn cục dễ dàng như thay đổi một dòng mã.

Answer 3

Trên thực tế nó là một ý tưởng tốt, tôi sử dụng chúng quá, nhưng đừng đặt tên cho chúng theo cách bạn nói, teddyrised ví dụ là tốt,

Chỉ cần ví dụ của tôi, khi tôi thực hiện một dự án đơn giản những gì không cần một cấu trúc trang khổng lồ và css tối thiểu i tên họ như thế này

.push-right { 
    float: right; 
} 

push-left { 
    float: left; 
} 

.no-float { 
    float: none; 
} 

.centered { 
    margin: 0 auto; 
} 

.success { 
    color: green; 
} 

.error { 
    color: red; 
} 

.warning { 
    color: orange; 
} 

.info { 
    color: blue; 
} 

vì vậy, trên thực tế nó os okay để sử dụng chúng, chỉ whatch ra cho nameing chúng :)

Answer 4

có một cái nhìn tại OOCSS (và Smashing Mag introduction to it)) nếu bạn chưa có. Đồng thời để BEM từ Yandex - một lần nữa Smashing Mag intro to it.

Tôi đã cười vào ý tưởng không tách hoàn toàn nội dung (HTML) khỏi phong cách (CSS) vài năm trước, tôi gãi đầu khi Nicole "stubbornella" Sullivan nói về nó trong một hội nghị mà tôi đã tham dự nhưng bây giờ tôi đang làm việc trên các dự án được tạo từ hàng chục trang đến nơi chúng tôi phải chuyển từ PSD sang HTML/CSS cho một khách hàng bên trong một nhóm gồm vài người, yêu cầu của tôi đã thay đổi đáng kể! Làm việc một mình trên CSS mà không ai khác sẽ sửa đổi hoặc trong một nhóm trên một dự án khi khởi động hoặc trong nhóm cho khách hàng sẽ sử dụng lại CSS bạn tạo không giống nhau.

Tìm hiểu về OOCSS và những gì nó có thể làm cho bạn, hãy thử và không sử dụng nó trong các dự án của bạn nếu nó không phù hợp. Hoặc làm.

Sử dụng bộ tiền xử lý CSS hoặc không hoàn toàn không có liên quan ở đây: nếu bạn sử dụng chúng để xuất bộ chọn dài 1 km, bạn đang sử dụng chúng sai rõ ràng. Chúng chỉ là một cách để viết CSS nhanh hơn và ít đau hơn (không phải bận tâm tìm hiểu tiền tố nào cần thiết cho mỗi thuộc tính CSS3 nhờ các macro là tuyệt vời, nhưng chúng vẫn xuất nhiều hay ít CSS giống nhau trước đây). Vấn đề là viết CSS hiệu quả, có hoặc không có bộ tiền xử lý. Tương tự với ZenCoding/Emmet: bạn biết bạn cần nó khi bạn chán ngấy với việc viết các dòng/hướng dẫn lặp đi lặp lại cùng ngày này qua ngày khác. Nhưng họ sẽ xuất ra những dòng CSS tương tự, không có gì huyền diệu ở đây.