Cách tốt nhất để theo dõi số nhận dạng của bạn cho Jquery và CSS của bạn là gì?

Question

Đây là một câu hỏi về tổ chức liên quan đến Jquery.

Sử dụng ví dụ đơn giản sau:

<a href="#" class="click">click me</a> 

<script> 
$(document).ready(function(){ 
    $('.click').on('click',function(){ 
      alert('Clicked!'); 
    }); 
}); 
</script> 

Bây giờ nhân này bằng 1000 trên trang web của bạn, nó có thể nhanh chóng nhận được lộn xộn. Bạn cũng có thể quên những lớp nào bạn đã gán cho Jquery hoặc cho CSS của bạn. Tôi thường cố gắng tránh pha trộn cả hai, vì vậy tôi thêm các lớp của mình cho CSS và các lớp khác cho Jquery, trong trường hợp tôi thay đổi bố cục hoặc sử dụng phần đó ở một nơi khác, ... Tôi có thể thay đổi CSS. Nhưng làm thế nào để bạn nhớ cái nào là dành cho CSS hay Jquery? Bạn có đặt tên cho các lớp của bạn là "JSclassName" hoặc một cái gì đó như thế?

Hãy cho tôi biết nếu tôi không rõ ràng và cảm ơn sự giúp đỡ của bạn.

Answer 1

• Có một sơ đồ đặt tên phù hợp cho "phần" của bạn về vụ án và nghĩa
• Giữ tên id và class giống nhau cho cả CSS và JS để tránh sự nhầm lẫn.
• Liên quan đến mã ngữ nghĩa, bạn cũng nên cung cấp ý nghĩa cho tên lớp/id. Điều này giúp bạn nhớ những gì bạn đang thêm mã cho. Không sử dụng một cái gì đó như "centeredContainer" hoặc "thisIsClickable".

Ví dụ:

<section class="weatherWidget"> 
    <ul class="forecast"> 
     <li class="vicinity"> 
      ... 
    <ul class="news"> 
     <li class="region"> 
      ... 

Tôi cũng không gian tên CSS và JS của tôi để tránh xung đột. Các mã sau đây đảm bảo rằng nội dung phụ tùng chỉ thời tiết được tham chiếu bởi các mã:

//this click event is only for weatherWidget vicinity 
$('.weatherWidget .vicinity').on('click',function{...}); 

//this CSS is only for weatherWidget regions 
.weatherWidget .region{...} 

Ngoài ra, mặc dù tôi không thực sự sử dụng chúng cũng không ủng hộ việc sử dụng chúng, LESS và Sass khuôn khổ cũng có thể giúp về mặt tránh CSS dư thừa bằng cách sử dụng các biến.

Answer 2

Trước tiên, hãy cung cấp tên nhận dạng của bạn các tên có ý nghĩa hơn. Theo tôi, click không phải là lý tưởng. Một nút có thể nhấp, do đó, là một neo, thậm chí là một phần tử div.

Thứ hai, nếu bạn có hàng trăm số nhận dạng, hãy thử sử dụng không gian tên để phân biệt mã định danh CSS/JavaScript. Nhưng tôi nghĩ điều này là không cần thiết, sử dụng mã định danh CSS trong JavaScript của bạn là tự nhiên, một tên có ý nghĩa ở vị trí đầu tiên.

<style> 
    .ui-cart-button{ }; 
</style> 
<a href="#" class="js-add-to-cart ui-cart-button">Buy</a> 

Không gian tên là cách hay để làm cho mã của bạn sạch hơn và dễ đọc hơn, tôi khuyên bạn nên xem mã nguồn của jQueryUI.

Answer 3

Dưới đây là các đề xuất của tôi;

• Luôn sử dụng các ID duy nhất. Các ID phải là duy nhất, được chỉ định cho một phần tử hoặc bộ chọn cụ thể trong khi các lớp có thể được cấp cho nhiều bộ chọn.
• Không cần sử dụng cùng một lớp cho JavaScript và CSS vì có thể gán nhiều lớp cho một bộ chọn như <div class="class1 class2">
• Sử dụng tệp đính kèm theo kiểu cho các mục phổ biến xuất hiện trong nhiều trang để giới hạn kiểu nhúng và nội tuyến.

Các liên kết bên dưới sẽ đề xuất một số nguyên tắc cho bạn.

30 CSS Best Practices for Beginners
15 Best CSS Practices to Make Your Life Easier
10 Best CSS Practices to Improve Your Code

Tất cả các thông tin nêu trên là để cho bạn biết về việc sử dụng CSS. Từ tất cả các thông tin này, bạn có thể xây dựng tùy chọn tốt nhất lý tưởng cho nhu cầu của mình.