Tôi có thể sử dụng các lớp CSS không tồn tại không?

Tôi có một bảng nơi tôi hiển thị / ẩn một cột đầy đủ bằng jQuery thông qua một lớp CSS không tồn tại:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

Với DOM này tôi có thể thực hiện điều này trong một dòng thông qua jQuery: $('.target').css('display','none');

Điều này hoạt động hoàn hảo, nhưng nó có hợp lệ để sử dụng các lớp CSS không được xác định không? Tôi có nên tạo một lớp trống cho nó không?

<style>.target{}</style>

Có bất kỳ tác dụng phụ hoặc có một cách tốt hơn để làm điều này?

"Lớp CSS" là một cách viết sai; classlà một thuộc tính (hoặc một thuộc tính, về mặt kịch bản) mà bạn gán cho các phần tử HTML. Nói cách khác, bạn khai báo các lớp học dưới dạng HTML, CSS không, vì vậy trong trường hợp của bạn lớp "mục tiêu" thực hiện trên thực tế tồn tại trên những yếu tố cụ thể, và đánh dấu của bạn là hoàn toàn hợp lệ vì nó là.

Điều này không nhất thiết có nghĩa là bạn cần phải có một lớp được khai báo trong HTML trước khi bạn có thể sử dụng nó trong CSS. Xem bình luận của ruakh. Việc một bộ chọn có hợp lệ hay không hoàn toàn phụ thuộc vào cú pháp của bộ chọn và CSS có bộ quy tắc riêng để xử lý các lỗi phân tích cú pháp , không có cái nào liên quan đến việc đánh dấu cả. Về cơ bản, điều này có nghĩa là HTML và CSS hoàn toàn độc lập với nhau về khía cạnh hợp lệ. ¹

Khi bạn hiểu điều đó, nó trở nên rõ ràng rằng không có tác dụng phụ của việc không xác định .targetquy tắc trong biểu định kiểu của bạn. ² Khi bạn gán các lớp cho các thành phần của mình, bạn có thể tham chiếu các thành phần đó theo các lớp đó trong biểu định kiểu hoặc tập lệnh hoặc cả hai. Không có một sự phụ thuộc vào người khác. Thay vào đó, cả hai đều đề cập đến đánh dấu (hoặc chính xác hơn là đại diện DOM của nó). Nguyên tắc này áp dụng ngay cả khi bạn đang sử dụng JavaScript để áp dụng các kiểu, như bạn đang thực hiện trong một lớp lót jQuery của mình.

Khi bạn viết quy tắc CSS bằng bộ chọn lớp, tất cả những gì bạn đang nói là "Tôi muốn áp dụng các kiểu cho các thành phần thuộc về lớp này." Tương tự, khi bạn viết một tập lệnh để truy xuất các phần tử theo một tên lớp nhất định, bạn đang nói "Tôi muốn làm mọi thứ với các phần tử thuộc về lớp này." Có hoặc không có là yếu tố thuộc về lớp trong câu hỏi là một vấn đề riêng biệt hoàn toàn.

¹ _{Đây cũng là lý do tại sao bộ chọn ID CSS khớp với tất cả các thành phần với ID đã cho bất kể ID xuất hiện chính xác một lần hay nhiều lần (dẫn đến tài liệu HTML không tuân thủ).}

² _{Tình huống duy nhất tôi biết về nơi cần một quy tắc CSS trống như vậy là khi một số trình duyệt từ chối áp dụng một số quy tắc khác đúng cách do lỗi; tạo ra một quy tắc trống sẽ khiến những quy tắc khác được áp dụng vì một số lý do. Xem câu trả lời này cho một ví dụ về một lỗi như vậy. Tuy nhiên, đây là về phía CSS và do đó không liên quan gì đến việc đánh dấu.}

Không có hiệu ứng xấu để sử dụng các lớp không có kiểu dáng. Thật vậy, đó là một phần của tính hữu ích của CSS là nó được ghép nối từ đánh dấu và có thể tạo kiểu hoặc không tạo kiểu cho các thành phần / lớp / v.v. khi cần thiết

Đừng nghĩ chúng là "các lớp CSS." Hãy nghĩ về chúng như là "các lớp" mà CSS cũng sẽ sử dụng nếu cần.

Theo đặc tả HTML5 :

Một thuộc tính lớp phải có một giá trị là một tập hợp các mã thông báo được phân tách bằng dấu cách đại diện cho các lớp khác nhau mà phần tử thuộc về. ... Không có hạn chế bổ sung nào đối với các tác giả mã thông báo có thể sử dụng trong thuộc tính lớp, nhưng các tác giả được khuyến khích sử dụng các giá trị mô tả bản chất của nội dung, thay vì các giá trị mô tả cách trình bày nội dung mong muốn.

Ngoài ra, trong phiên bản 4 :

Thuộc tính lớp có một số vai trò trong HTML:

• Là một bộ chọn biểu định kiểu (khi tác giả muốn gán thông tin kiểu cho một tập hợp các phần tử).
• Đối với xử lý mục đích chung bởi các tác nhân người dùng.

Ca sử dụng của bạn nằm trong kịch bản thứ hai, điều này làm cho nó trở thành một ví dụ hợp pháp của việc sử dụng thuộc tính lớp.

Bạn có thể sử dụng một lớp không có kiểu, đây là HTML hoàn toàn hợp lệ.

Một lớp được tham chiếu trong tệp CSS không phải là định nghĩa của lớp, nó được sử dụng làm quy tắc chọn cho mục đích tạo kiểu.

Khi bạn sử dụng tên lớp trong JavaScript, nó không nhìn vào CSS để tìm lớp đó. Nó nhìn trực tiếp vào mã HTML.

Tất cả những gì được yêu cầu là tên lớp nằm trong HTML. Nó không cần phải có trong CSS.

Trên thực tế, nhiều người nghĩ rằng thực sự nên giữ các lớp riêng biệt sử dụng với CSS và Javascript , vì nó cho phép các nhà thiết kế và lập trình viên của bạn làm việc độc lập mà không gặp nhau bằng cách sử dụng các lớp của nhau.

(lưu ý, đoạn trên rõ ràng có thể áp dụng nhiều hơn cho các dự án lớn hơn, vì vậy đừng cảm thấy rằng bạn phải đi đến cực điểm này nếu bạn đang tự mình làm việc; tôi đã đề cập đến nó để làm cho hai điểm có thể tách biệt hoàn toàn )

Bạn có thể sử dụng các lớp CSS mà không cần sử dụng nó, nhưng tôi khuyên rằng nếu bạn thêm các lớp CSS chỉ cho mã JavaScript / jQuery, hãy thêm tiền tố vào nó js-YourClassNameđể các nhà phát triển front-end không bao giờ sử dụng các lớp này để định kiểu các phần tử. Họ nên hiểu rằng các lớp này có thể được gỡ bỏ bất cứ lúc nào.

Thời điểm bạn thêm Lớp trong HTML, Lớp sẽ được xác định, vì vậy giải pháp của bạn hoàn toàn ổn

Không cần thiết phải xác định các lớp CSS trong biểu định kiểu của bạn. Nó nên hoạt động tốt. Tuy nhiên, thêm nó sẽ không gây hại.

Một điều mà không ai ở đây đã đề cập đầy đủ là JavaScript (được hỗ trợ bởi jQuery trong trường hợp này) không thể sửa đổi trực tiếp biểu định kiểu xếp tầng của tài liệu. css()Phương thức của jQuery chỉ thay đổi tập hợp các thuộc tính của các phần tử phù hợp style. CSS và JavaScript hoàn toàn không liên quan đến khía cạnh này.

$('.target').css('display','none');hoàn toàn không thay đổi .target { }khai báo CSS của bạn . Điều đã xảy ra ở đây thay vào đó là bất kỳ yếu tố nào có class"mục tiêu" bây giờ trông giống như thế này:

<element class="target" style="display:none;"></element>

Có bất kỳ tác dụng phụ nào gây ra bởi việc không xác định trước quy tắc kiểu CSS không? Không có gì.

Có cách nào tốt hơn để làm điều này? Hiệu suất-khôn ngoan, đúng là có!

Làm thế nào hiệu suất có thể được cải thiện?

Thay vì trực tiếp sửa đổi styletừng phần tử, thay vào đó bạn có thể xác định trước một lớp mới và thêm phần tử đó vào các phần tử phù hợp của mình bằng cách sử dụngaddClass() (một phương thức jQuery khác).

Dựa trên này tồn tại trước đó JSPerf mà so sánh css()với addClass(), chúng ta có thể thấy rằng addClass()thực sự là nhanh hơn nhiều:

Làm thế nào chúng ta có thể tự thực hiện điều này?

Đầu tiên chúng ta có thể thêm vào khai báo CSS mới của mình:

.hidden {
    display: none;
}

HTML của bạn sẽ giữ nguyên, lớp được xác định trước này chỉ đơn giản là để sử dụng sau này.

Bây giờ chúng ta có thể sửa đổi JavaScript để sử dụng addClass()thay thế:

$('.target').addClass('hidden');

Khi chạy mã này, thay vì trực tiếp sửa đổi thuộc styletính của từng thành phần "mục tiêu" phù hợp của bạn, lớp mới này sẽ được thêm vào:

<element class="target hidden"></element>

Với lớp "ẩn" mới, phần tử này sẽ kế thừa kiểu dáng được khai báo trong CSS của bạn và phần tử của bạn sẽ được đặt thành không hiển thị nữa.

Như được đề cập bởi rất nhiều người khác, vâng, sử dụng các lớp không có CSS ​​được gán là hoàn toàn hợp lệ và thay vì nghĩ chúng là 'các lớp CSS', bạn chỉ cần nhận ra ngữ nghĩa của lớp và ID tương ứng là các nhóm và các thành phần riêng lẻ.

Tôi muốn gắn chíp vì tôi cảm thấy một điểm quan trọng chưa được nêu ra làm ví dụ. Nếu bạn cần thực hiện các thao tác trực quan với các phần tử có độ dài thay đổi (trong trường hợp này là bạn đang sử dụng các hàng của bảng) thì sẽ luôn có ý nghĩa khi nhận ra rằng chi phí để thực hiện thông qua Javascript có thể rất tốn kém (ví dụ: nếu bạn có hàng ngàn hàng).

Trong tình huống này, giả sử chúng ta biết rằng cột 2 luôn có khả năng bị ẩn (đó là chức năng có ý thức của bảng của bạn) thì việc thiết kế một kiểu CSS để xử lý trường hợp sử dụng này là điều hợp lý.

table.target-hidden .target { display: none; }

Sau đó, thay vì sử dụng JS để duyệt qua DOM tìm N phần tử, chúng ta chỉ cần chuyển một lớp trên một (bảng của chúng ta).

$("table").addClass("target-hidden")

Bằng cách chỉ định bảng, ID này sẽ nhanh hơn nữa và bạn thậm chí có thể chỉ cần tham khảo cột bằng cách sử dụng công :nth-childcụ chọn để giảm đánh dấu của bạn hơn nữa nhưng tôi không thể nhận xét về hiệu quả. Một lý do khác để làm điều này là tôi ghét kiểu dáng nội tuyến, và sẽ cố gắng hết sức để xóa nó!

Nó sẽ không có hiệu lực nếu bạn áp dụng một lớp trên một phần tử HTML và lớp đó không được xác định trong CSS. Đó là một thực tế phổ biến và như Aamir afridi đã nói nếu bạn đang sử dụng các lớp chỉ cho mục đích js, thì đó là một cách thực hành tốt để thêm tiền tố vào chúng với js-.

Nó không chỉ hợp lệ cho calsodes, mà còn cho thuộc tính id của các phần tử html.

Không có vấn đề gì trong việc sử dụng các lớp để chỉ truy vấn các phần tử. Tôi đã từng đặt tên lớp như vậy làm sys-tiền tố (ví dụ: tôi sẽ đặt tên lớp của bạn sys-target) để phân biệt chúng với các lớp được sử dụng để tạo kiểu. Đây là một quy ước được sử dụng bởi một số nhà phát triển microsoft trong quá khứ. Tôi cũng nhận thấy một thực tế ngày càng tăng của việc sử dụngjs- tiền tố cho mục đích này.

Nếu bạn không hài lòng với việc sử dụng các lớp cho các mục đích khác ngoài kiểu dáng, tôi khuyên bạn nên sử dụng plugin jQuery.js cho phép bạn đạt được mục đích tương tự bằng cách sử dụng rolethuộc tính, vì vậy, bạn có thể viết đánh dấu của mình <td role="target">và truy vấn cho nó bằng cách sử dụng $("@target"). Trang dự án có mô tả và ví dụ tốt. Tôi sử dụng plugin này cho các dự án lớn vì tôi thực sự thích giữ các lớp chỉ cho mục đích tạo kiểu.

Tham khảo công cụ xác nhận jQuery . Ngay cả trong đó, chúng tôi cũng sử dụng các lớp không tồn tại để thêm các quy tắc xác thực trên các thuộc tính HTML . Vì vậy, không có gì sai khi sử dụng các lớp không thực sự được khai báo trong biểu định kiểu.