Sử dụng các lớp CSS làm trang trí - một mô hình tốt?

Tôi đã xây dựng một ứng dụng web với GUI khá phức tạp - nhiều yếu tố nhỏ bên cạnh nhau và trong các yếu tố khác cần các hành vi khác nhau (kéo, nhấp, nhưng nhạy cảm theo ngữ cảnh).

Mã của tôi có xu hướng hoạt động như thế này:

điều khiển bắt đầu dưới dạng thẻ html

<li>

sau đó tôi thêm các lớp vào thẻ

<li class = 'static passive included'>

một số lớp có thể dành cho kiểu css ảnh hưởng đến ngoại hình

.static {background: blue; float: left;}

trong khi những người khác bị jQuery hành động để đưa ra hành vi cho các sự kiện DOM liên quan

$("#container").delegate(".passive", function {onclick : //do-stuff})

và những người khác có thể được chọn bởi javascript thông thường khi quét tài liệu, ví dụ. thu thập các giá trị văn bản của tất cả các nút với lớp 'bao gồm'. Vì vậy, các phần tử DOM nhất định là các đối tượng GUI triển khai các lớp được định nghĩa thông qua sự kết hợp của css và jQuery.

Câu hỏi của tôi là, đây có phải là một cách tốt để làm việc? Và đây cũng là những 'người trang trí' thực sự - họ chắc chắn 'thêm trách nhiệm bổ sung cho một đối tượng một cách linh hoạt' nhưng tôi không chắc về thuật ngữ đó. Cuối cùng, bạn có sử dụng mô hình này trong các trang web của riêng bạn?

Tôi nghĩ những gì bạn đang làm là chết trên. Lợi ích của việc sử dụng các lớp, trái với việc tạo ra các tên thuộc tính, là bạn vẫn có thể xác nhận trang. Không có trình duyệt hiện đại nào sẽ khó chịu về các lớp CSS không xác định và chúng không đáng để sử dụng với jQuery, et al.

Các lớp đều ổn, nhưng tôi cũng sẽ xem xét các thuộc tính dữ liệu HTML . Thông thường, một tên lớp đơn giản là không truyền tải đủ thông tin để cho phép kết nối javascript thích hợp (không có tên id của phần tử mã hóa cứng). Các thuộc tính dữ liệu HTML cung cấp một cách khác để phân loại và chọn các thành phần và đính kèm dữ liệu vào chúng cho các mục đích phụ trợ, như các cải tiến dựa trên JavaScript.

Với jQuery, các thuộc tính dữ liệu HTML cũng dễ sử dụng như các lớp CSS.

Hmmm ... có và không. Bạn có thể làm những việc như vậy là ổn, nhưng các lớp thực sự nên được đặt tên để hiển thị những gì phổ biến về dữ liệu trong chúng. Nếu không có gì chung giữa hai thẻ thì có khả năng yêu cầu của các lớp sẽ phân kỳ sau.

Yêu cầu ví dụ:

• tất cả các mục điều hướng sẽ có màu trắng trên nền xanh, helvetica với lề 1px
• tất cả các mô tả nhận xét sẽ có màu trắng trên nền xanh, arial với lề 4px và phần đệm là 2px

Có tốt hơn để cung cấp cho họ cả một lớp Whiteonblue không

.whiteonblue {
  font-color: white;
  background-color: blue;
}

hoặc có mã lặp lại

.navitems {
  font-color: white;
  background-color: blue;
// more css
}

.commentdesc {
  font-color: white;
  background-color: blue;
// more css
}

Tôi tranh luận sau. Không có mối liên hệ nào giữa navitems và bình luận và do đó, khả năng là khi một cái thay đổi, cái kia sẽ không. Bạn có thực sự muốn tìm kiếm thông qua html cho đúng lớp, loại bỏ lớp, thêm một cái mới (Whiteonred) trước khi đi đến CSS tại thời điểm đó không? Tôi không.

Javascript tương tự. Có thể bạn muốn điều tương tự onclick trong thiết kế ban đầu nhưng khả năng là nếu một thay đổi, cái khác sẽ không. Thật dễ dàng để nói

$(".navitems, .commentdesc")

Nếu bạn tuân thủ chính sách này, tôi nghi ngờ bạn sẽ thấy rằng câu hỏi của bạn sẽ biến mất khá nhanh, nhưng nếu không thì những gì bạn đang làm là ổn.