Чи можу я використовувати неіснуючі класи CSS?

У мене є таблиця, де я показую / приховую повний стовпчик від jQuery через клас CSS, який не існує:

<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>

З цим DOM я можу це зробити в одному рядку через jQuery: $('.target').css('display','none');

Це прекрасно працює, але чи дійсно використовувати класи CSS, які не визначені? Чи слід створити для нього порожній клас?

<style>.target{}</style>

Чи є побічні ефекти чи є кращий спосіб зробити це?

"Клас CSS" - неправильне слово; classє атрибутом (або властивістю з точки зору сценаріїв), який ви присвоюєте елементам HTML. Іншими словами, ви оголошуєте класи в HTML, а не CSS, тому у вашому випадку клас «мішень» робить насправді існує на тих конкретних елементів, і розмітка цілком допустимо , як це.

Це не обов'язково означає, що вам потрібно мати клас, задекларований у HTML, перш ніж ви зможете використовувати його в CSS. Дивіться коментар ruakh. Чи дійсний селектор чи ні, повністю залежить від синтаксису селектора , і CSS має власний набір правил для обробки помилок розбору , жодне з яких взагалі не стосується розмітки. По суті, це означає, що HTML і CSS абсолютно незалежні один від одного в аспекті дійсності. ¹

Після того, як ви це зрозумієте, стає зрозуміло, що немає побічного ефекту від того, щоб не визначити .targetправило у вашій таблиці стилів. ² Призначаючи класи своїм елементам, ви можете посилатися на ці елементи цими класами або в таблиці стилів, або в сценарії, або в обох. Ні одна не має залежності від інших. Натомість вони обоє посилаються на розмітку (або, точніше, на її представлення DOM). Цей принцип застосовується навіть у тому випадку, якщо ви використовуєте JavaScript для застосування стилів, як це робите в однокласиці jQuery.

Коли ви пишете правило CSS із селектором класів, все, що ви говорите, - «я хочу застосувати стилі до елементів, що належать до цього класу». Аналогічно, коли ви пишете сценарій для отримання елементів за певним іменем класу, ви говорите "Я хочу робити речі з елементами, що належать до цього класу". Незалежно від того , є чи ні в елементи , які належать до цього класу окреме питання взагалі.

¹ _{Ось чому селектор CSS ID відповідає всім елементам із заданим ідентифікатором, незалежно від того, відображається він точно один раз або кілька разів (в результаті чого HTML-документ не відповідає).}

² _{Я знаю єдину ситуацію, коли потрібне порожнє правило CSS, коли деякі браузери відмовляються належним чином застосовувати певні інші правила внаслідок помилки; створення порожнього правила чомусь застосує ті інші правила. Дивіться цю відповідь на прикладі такої помилки. Однак це на стороні CSS і тому не повинно мати нічого спільного з розміткою.}

Немає жодних негативних ефектів для використання класів, у яких немає стилів. Дійсно, це є частиною корисності CSS у тому, що він від'єднаний від розмітки і може стилістично стилювати елементи / класи / тощо. по мірі необхідності.

Не думайте про них як про "класи CSS". Розгляньте їх як "класи", які, звичайно, використовують і CSS, якщо це потрібно.

Відповідно до специфікації HTML5 :

Атрибут класу повинен мати значення, яке є набором розділених пробілом лексем, що представляють різні класи, до яких належить елемент. ... Ніяких додаткових обмежень для лексем автори не можуть використовувати в атрибуті класу, але авторам рекомендується використовувати значення, що описують природу вмісту, а не значення, що описують бажане представлення вмісту.

Також у версії 4 :

Атрибут класу має кілька ролей у HTML:

• Як селектор аркуша стилів (коли автор бажає призначити інформацію стилю набору елементів).
• Для обробки загальних цілей користувачами-агентами.

Випадок використання підпадає під другий сценарій, що робить його законним прикладом використання атрибута класу.

Можна використовувати клас, який не має стилів, це цілком дійсний HTML.

Клас, на який посилається у файлі CSS, не є визначенням класу, він використовується як правило вибору для цілей стилізації.

Коли ви використовуєте ім'я класу в JavaScript, він не дивиться на CSS, щоб знайти цей клас. Це виглядає безпосередньо в коді HTML.

Все, що потрібно - це те, що ім'я класу знаходиться в HTML. Це не потрібно бути в CSS.

Насправді багато людей думають, що це насправді гарною ідеєю є використання окремих класів за допомогою CSS та Javascript , оскільки це дозволяє вашим дизайнерам та кодерам працювати самостійно, не переходячи один на одного, використовуючи класи один одного.

(зауважте, що вищезазначений абзац, очевидно, більше застосовний для великих проектів, тому не відчувайте, що вам доведеться йти в цю крайність, якщо ви працюєте самостійно; я згадав це, щоб зробити висновок, що ці два можуть бути повністю окремими )

Ви можете використовувати класи CSS, не використовуючи його, але я пропоную, якщо ви додаєте CSS-класи лише для коду JavaScript / jQuery, префікс з ним, js-YourClassNameщоб розробники на передньому кінці ніколи не використовували ці класи для стилювання елементів. Вони повинні розуміти, що ці класи можна видалити в будь-який час.

Щойно ви додасте Клас у свій HTML, Клас буде визначений, тож ваше рішення буде повністю чудовим

Не потрібно визначати класи CSS у вашому таблицю стилів. Це повинно працювати чудово. Однак додавання це не зашкодить.

Одне, що тут ніхто повністю не згадує, - це те, що JavaScript (що допомагає jQuery в даному випадку) не може безпосередньо змінити каскадний аркуш стилів документа. css()Метод jQuery просто змінює відповідний набір властивостей елементів style. CSS та JavaScript абсолютно не пов'язані в цьому аспекті.

$('.target').css('display','none');взагалі не змінює вашу .target { }декларацію CSS. Тут натомість відбулося те, що будь-який елемент із class"цільовим" виглядає приблизно так:

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

Чи є побічні ефекти, спричинені тим, що заздалегідь не визначено правило стилю CSS? Нічого.

Чи є кращий спосіб зробити це? Продуктивність, так, є!

Як можна покращити продуктивність?

Замість того, щоб безпосередньо змінювати styleкожен елемент, замість цього ви можете заздалегідь визначити новий клас і додати його до своїх збігаються елементів, використовуючиaddClass() (інший метод jQuery).

На основі цього вже існуючого JSPerf, який порівнюється css()з addClass(), ми можемо побачити, що addClass()насправді набагато швидше:

Як ми можемо це реалізувати самостійно?

По-перше, ми можемо додати до нашої нової декларації CSS:

.hidden {
    display: none;
}

Ваш HTML залишиться незмінним, цей попередньо визначений клас просто створений для подальшого використання.

Тепер ми можемо змінити JavaScript, щоб використовувати addClass()замість цього:

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

Під час запуску цього коду, а не безпосередньо модифікації styleвластивості кожного зі збіганих "цільових" елементів, цей новий клас тепер буде додано:

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

З новим "прихованим" класом цей елемент успадкує стилі, оголошені у вашій CSS, і ваш елемент не буде відображатися більше.

Як згадується багатьма іншими, так, якщо використовувати класи без призначеного CSS, цілком справедливо, і замість того, щоб вважати їх як "CSS-класи", ви повинні просто визнати семантику класу та ID відповідно групами та окремими елементами.

Я хотів сколотитися, тому що я вважав, що важливий момент не піднімався за прикладом. Якщо вам коли-небудь потрібно робити візуальні маніпуляції зі змінною довжиною елементів (у цьому випадку ви використовуєте рядки таблиці), то завжди має сенс визнати, що вартість цього через Javascript може бути дуже дорогою (наприклад, якщо у вас є тисячі рядків).

Скажімо, у цій ситуації ми знаємо, що стовпець 2 завжди може бути прихованим (це усвідомлена функція вашої таблиці), тоді є сенс розробити стиль CSS для обробки цього випадку використання.

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

Тоді замість використання JS для переходу через DOM, що знаходить N елементів, нам просто потрібно переключити клас на один (наша таблиця).

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

Присвоївши таблицю ідентифікатор, це було б ще швидше, і ви навіть можете просто посилатися на стовпець, використовуючи :nth-childселектор, який ще більше зменшить розмітку, але я не можу коментувати ефективність. Ще одна причина цього - те, що я ненавиджу стильний стиль, і буду намагатися викорінити його!

Це не матиме ефекту, якщо ви застосуєте клас до елемента HTML, і цей клас не визначений у CSS. Це звичайна практика, і, як сказав Аамір afridi, якщо ви використовуєте класи лише для js, це є хорошою практикою приєднати їх до js-.

Він не тільки дійсний для викликів, але і для атрибута id елементів html.

Зовсім немає проблем із використанням класів для запиту елементів. Я раніше давав таким іменам класу sys-префікс (наприклад, я назву ваш клас sys-target), щоб відрізнити їх від класів, що використовуються для стилізації. Це була умова, яку використовували деякі розробники мікрософт у минулому. Я також помітив зростаючу практику використанняjs- префікса для цієї мети.

Якщо вам не зручно використовувати класи для інших цілей, ніж стилізація, я рекомендую використовувати плагін Role.js jQuery, який дозволяє вам досягти тієї ж мети за допомогою roleатрибута, тож ви можете написати свою розмітку як <td role="target">і запит для неї, використовуючи $("@target"). На сторінці проекту є хороший опис та приклади. Я використовую цей плагін для великих проектів, тому що мені дуже подобається тримати заняття лише для цілей стилізації.

Зверніться до механізму перевірки jQuery . Навіть там ми також використовуємо неіснуючі класи для додавання правил перевірки атрибутів HTML . Тож немає нічого поганого у використанні класів, які насправді не задекларовані в таблиці стилів.