Object hướng CSS

Question

tôi xem presentation about object oriented css này, nhưng tôi nghĩ tôi hoặc là không hiểu nó một cách chính xác hoặc không hiểu được lợi ích của việc sử dụng OO CSS:

HTML mẫu:

<div class="border-1 bg-2 color-1 font-1"> 
</div> 

Ví dụ CSS :

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */ 

Tôi thấy một lợi thế trong việc có thể thay đổi kiểu cho nhiều phần tử một cách nhanh chóng, chẳng hạn, có thể chuyển đổi bảng màu sẽ rất hữu ích.

Nhưng thực tế, bạn đang xác định kiểu/xem bên trong HTML hoặc ít nhất là một phần của nó. Tất nhiên, nó tốt hơn là sử dụng thuộc tính style, bởi vì bạn vẫn có thể trao đổi kiểu cho một tập hợp các nhóm.

Vấn đề là bạn định nghĩa các nhóm kiểu bên trong HTML, nhưng tôi biết rằng bạn nên tạo các nhóm "hợp lý" bên trong HTML (ví dụ: class="nav-item"/class="btn submit-btn") và CSS hoàn toàn áp dụng kiểu đó và xác định yếu tố nào thuộc về nhau từ quan điểm "phong cách" (ví dụ: .nav-item, .submit-btn { background: red; }).

Có lẽ tôi hoàn toàn hiểu lầm khái niệm. Tuy nhiên, tôi vẫn không biết một cách tốt để xây dựng CSS của tôi.

Answer 1

CSS không hướng đối tượng. Đề xuất của tôi là quên những gì bạn đã đọc về "CSS hướng đối tượng" và thay vào đó tập trung vào các vấn đề với CSS mà bạn đang cố giải quyết. Nếu họ làm cho CSS dễ dàng hơn để viết, đọc và duy trì hoặc để có thêm nhiều tính năng hơn (như biến CSS), tôi nghĩ rằng Less hoặc Sass sẽ phù hợp với nhu cầu của bạn tốt hơn nhiều.

Sử dụng CSS như những gì được đề xuất với "CSS hướng đối tượng" chỉ dẫn đến CSS khủng khiếp, không ngữ nghĩa và vô nghĩa mà về lâu dài không dễ bảo trì hơn CSS thông thường. Cả hai id và class phải có semantic and meaningful names, do đó, bằng cách sử dụng một khuôn khổ cho phép bạn viết ngữ nghĩa CSS (mô tả ý định thay vì trình bày) là trong ý kiến ​​khiêm tốn của tôi tốt hơn nhiều.

Answer 2

Đây là một cách "giảm tên", đó là phương pháp thực tế. Mã bạn đã hiển thị thường bị xúc phạm là "enterprise css", không có lý do gì cho mã đó.

Hơn thế nữa, việc có nhiều lớp học trên các yếu tố thực sự làm giảm hiệu suất.

Tôi khuyên bạn nên tuân thủ Mozilla's guidelines khi tạo CSS, cũng hoạt động tương tự cho các trình duyệt khác. Và tạo tệp .css chuyên dụng có hack cho IE6, 7 và 8.