Có sử dụng các lớp CSS để đánh dấu JS là một thực hành không tốt?

Question

Kịch bản:

• Một trang web được tạo ra với PHP và một mẫu động cơ.
• Trang này đang được thiết kế lại.
• Thiết kế mới dựa trên giao diện người dùng jQuery.
• Các CMS hiện tại sử dụng nhiều mẫu: một mẫu trang, một chi tiết bài viết mẫu, một mẫu bình luận, vv

Vấn đề: Một số mẫu (như các chi tiết bài viết mẫu) tạo ra mảnh html rằng nên sử dụng các phần tử giao diện người dùng jQuery như các tab. Hiện tại, nguồn dữ liệu của mẫu trang không chứa bất kỳ thông tin nào mà các phần tử cần được chuyển thành các phần tử jQuery UI trong cuộc gọi jQuery chính trong phần đầu tài liệu.

giải pháp có thể Thêm một lớp CSS như "jqTabs" để đánh dấu html của phụ mẫu và sử dụng bộ chọn .jqTabs trong kịch bản chính jQuery.

Câu hỏi Đây có phải là một ý tưởng tồi không?

BTW: "Sử dụng CMS khác" không phải là câu trả lời hợp lệ, vì đây là không phải tùy chọn ngay bây giờ (hạn chót, ngân sách, ... bạn đặt tên -.-).

Answer 1

Không phải là một ý tưởng tồi chút nào.

Đó là một trong những ứng dụng chính của lớp học.

Một lớp (như và ID) có thể được sử dụng như một cách để tạo kiểu cho một phần tử và/hoặc móc cho kịch bản.

Trong trường hợp này, nó có thể là giải pháp tốt nhất có thể, vì nó cho phép thay đổi đánh dấu tối thiểu cho việc thiết kế lại rộng hơn.

Và nó có thể dễ dàng đảo ngược.

Answer 2

Tôi tin rằng việc sử dụng các lớp CSS làm móc cho JavaScript thực sự có thể là một thực hành không tốt. Lý do tôi nói điều này là bởi vì cách tiếp cận này xen lẫn CSS và JavaScript của bạn và thường có thể dẫn đến sự nhầm lẫn không cần thiết.

Để tôi giải thích: Hiện tại, tôi đang làm việc để thêm các mẫu mới vào hệ thống hiện có sử dụng cài đặt quản trị viên người dùng được điều khiển động để kiểm soát thuộc tính CSS (chiều rộng trang, kích thước phông chữ, màu sắc, v.v.). Các cài đặt này cũng có thể ảnh hưởng đến các thuộc tính JS (tùy chọn trình chiếu, độ trễ giữa các trang trình bày, v.v.).

Vấn đề là vì có quá nhiều lớp CSS được sử dụng như các móc JavaScript, tôi đang gặp khó khăn khi xác định lớp nào được sử dụng cho các kiểu và lớp nào được sử dụng như các móc JS và cái nào được sử dụng cho cả hai! Kết quả là, khi thực hiện một mẫu mới, sẽ rất khó để bắt đầu từ đầu với đánh dấu mới vì tôi sẽ loại bỏ các lớp quan trọng khác nhau cho cả chức năng CSS và JS.

Nhiệm vụ sẽ dễ dàng hơn nhiều nếu các lớp CSS CHỈ được sử dụng để tạo kiểu và các móc JS khác chỉ được sử dụng cho JS.Tôi hình dung này được thực hiện với các thuộc tính dữ liệu HTML5, trong đó sẽ giống như thế này:

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a> 

Bằng việc sử dụng dữ liệu HTML5 thuộc tính cho móc JavaScript và các thuộc tính lớp cho phong cách CSS, chúng ta có thể chắc chắn rằng tất cả các lớp CHỈ liên quan đến CSS và bất kỳ thứ gì liên quan đến JavaScript chỉ đơn giản là nhận thuộc tính tùy chỉnh của nó.

Một tùy chọn khác mà tôi đã sử dụng là đặt trước bất kỳ lớp css nào với js- được JavaScript tham chiếu. Bằng cách đó bạn sẽ biết những lớp nào bạn có thể loại bỏ an toàn để tạo kiểu và những lớp nào phải duy trì cho chức năng hiện có.

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2"> 
    My link 
</a>