Czy mogę używać nieistniejących klas CSS?

Mam tabelę, w której pokazuję / ukryję pełną kolumnę według jQuery za pośrednictwem klasy CSS, która nie istnieje:

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

Za pomocą tego DOMa mogę to zrobić w jednym wierszu za pomocą jQuery: $('.target').css('display','none');

Działa to doskonale, ale czy można używać klas CSS, które nie są zdefiniowane? Czy powinienem utworzyć dla niego pustą klasę?

<style>.target{}</style>

Czy są jakieś skutki uboczne lub czy istnieje lepszy sposób, aby to zrobić?

„Klasa CSS” jest mylącą nazwą; classto atrybut (lub właściwość pod względem skryptów) przypisywany do elementów HTML. Innymi słowy, można zadeklarować klas w HTML, CSS nie, więc w przypadku klasy „target” robi w rzeczywistości istnieje na tych konkretnych elementów i znaczniki są całkowicie poprawny, jak to jest.

Nie musi to koniecznie oznaczać, że musisz mieć zadeklarowaną klasę w kodzie HTML, zanim będziesz mógł użyć jej w CSS. Zobacz komentarz ruakh. To, czy selektor jest prawidłowy, zależy całkowicie od jego składni , a CSS ma swój własny zestaw reguł obsługi błędów parsowania , z których żaden nie dotyczy w ogóle znaczników. Zasadniczo oznacza to, że HTML i CSS są całkowicie niezależne od siebie pod względem ważności. ¹

Kiedy to zrozumiesz, staje się jasne, że nie ma efektu ubocznego braku zdefiniowania .targetreguły w arkuszu stylów. ² Kiedy przypisujesz klasy do swoich elementów, możesz odwoływać się do tych elementów przez te klasy albo w arkuszu stylów, albo w skrypcie, albo w obu. Żadna z nich nie jest zależna od drugiej. Zamiast tego oba odnoszą się do znaczników (a ściślej do jego reprezentacji DOM). Zasada ta obowiązuje nawet wtedy, gdy używasz JavaScript do stosowania stylów, tak jak robisz to w swojej jednowierszowej wersji jQuery.

Kiedy piszesz regułę CSS za pomocą selektora klasy, mówisz tylko: „Chcę zastosować style do elementów należących do tej klasy”. Podobnie, kiedy piszesz skrypt do pobierania elementów o określonej nazwie klasy, mówisz: „Chcę robić rzeczy z elementami należącymi do tej klasy”. Czy tam są elementy, które należą do danej klasy jest zupełnie odrębna kwestia.

¹ _{Z tego powodu selektor identyfikatora CSS dopasowuje wszystkie elementy o podanym identyfikatorze, niezależnie od tego, czy identyfikator pojawia się dokładnie raz, czy wielokrotnie (w wyniku czego dokument HTML jest niezgodny).}

² _{Jedyną sytuacją, w której zdaję sobie sprawę z tego, gdzie taka pusta reguła CSS jest konieczna, jest sytuacja, gdy niektóre przeglądarki odmawiają prawidłowego zastosowania niektórych innych reguł w wyniku błędu; utworzenie pustej reguły spowoduje zastosowanie innych reguł z jakiegoś powodu. Zobacz tę odpowiedź, aby zobaczyć przykład takiego błędu. Jest to jednak po stronie CSS i dlatego nie powinno mieć nic wspólnego ze znacznikami.}

Nie ma żadnych złych efektów, aby używać klas, które nie mają stylów. Rzeczywiście, jest to część użyteczności CSS polegającej na tym, że jest on odłączony od znaczników i może stylizować elementy / klasy / itp. w razie potrzeby.

Nie myśl o nich jako o „klasach CSS”. Pomyśl o nich jak o „klasach”, których CSS używa także w razie potrzeby.

Zgodnie ze specyfikacją HTML5 :

Atrybut klasy musi mieć wartość będącą zbiorem tokenów oddzielonych spacjami reprezentujących różne klasy, do których należy element. ... Nie ma żadnych dodatkowych ograniczeń dotyczących tokenów, których autorzy mogą używać w atrybucie klasy, ale autorzy są zachęcani do używania wartości opisujących naturę treści, a nie wartości opisujących pożądaną prezentację treści.

Ponadto w wersji 4 :

Atrybut klasy ma kilka ról w HTML:

• Jako selektor arkuszy stylów (gdy autor chce przypisać informacje o stylu do zestawu elementów).
• Do przetwarzania ogólnego przeznaczenia przez aplikacje klienckie.

Twój przypadek użycia mieści się w drugim scenariuszu, co czyni go uzasadnionym przykładem użycia atrybutu klasy.

Możesz użyć klasy, która nie ma stylów, jest to całkowicie poprawny HTML.

Klasa, do której odwołuje się plik CSS, nie jest definicją klasy, służy jako reguła selektora do celów stylizacji.

Kiedy używasz nazwy klasy w JavaScript, nie patrzy na CSS, aby znaleźć tę klasę. Wygląda bezpośrednio w kodzie HTML.

Wymagane jest jedynie, aby nazwa klasy była w kodzie HTML. Nie musi być w CSS.

W rzeczywistości wiele osób uważa, że dobrym pomysłem jest używanie oddzielnych klas w CSS i JavaScript , ponieważ pozwala to projektantom i programistom pracować niezależnie, nie wchodząc sobie nawzajem w siebie nawzajem.

(uwaga, powyższy akapit jest oczywiście bardziej odpowiedni dla większych projektów, więc nie myśl, że musisz przejść do tego ekstremum, jeśli pracujesz na własną rękę; wspomniałem o tym, aby podkreślić, że oba mogą być całkowicie oddzielne )

Możesz używać klas CSS bez korzystania z nich, ale sugeruję, że jeśli dodajesz klasy CSS tylko dla kodu JavaScript / jQuery, przedrostek z nim, js-YourClassNameaby programiści front-end nigdy nie używali tych klas do stylowania elementów. Powinni zrozumieć, że klasy te można usunąć w dowolnym momencie.

W momencie dodania klasy do kodu HTML klasa zostanie zdefiniowana, więc Twoje rozwiązanie będzie w porządku

Definiowanie klas CSS w arkuszu stylów nie jest konieczne . Powinno działać dobrze. Jednak dodanie go nie zaszkodzi.

Jedną z rzeczy, o których nikt tu nie wspomniał w pełni, jest to, że JavaScript (w tym przypadku wspierany przez jQuery) nie jest w stanie bezpośrednio modyfikować kaskadowego arkusza stylów dokumentu. css()Metoda jQuery zmienia jedynie dopasowany zestaw właściwości elementów style. CSS i JavaScript są całkowicie niezwiązane w tym aspekcie.

$('.target').css('display','none');w ogóle nie zmienia .target { }deklaracji CSS. Zamiast tego dzieje się tutaj, że dowolny element z class„celem” wygląda teraz mniej więcej tak:

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

Czy są jakieś skutki uboczne spowodowane brakiem wstępnego zdefiniowania reguły stylu CSS? Absolutnie nic.

Czy jest na to lepszy sposób? Pod względem wydajności, tak, jest!

Jak można poprawić wydajność?

Zamiast bezpośrednio modyfikować stylekażdy element, zamiast tego możesz wstępnie zdefiniować nową klasę i dodać ją do dopasowanych elementów za pomocąaddClass() (innej metody jQuery).

Na podstawie tej wcześniej istniejącej JSPerf który porównuje css()ze addClass()widzimy, że addClass()jest o wiele szybciej:

Jak sami możemy to zrealizować?

Po pierwsze możemy dodać w naszej nowej deklaracji CSS:

.hidden {
    display: none;
}

Twój HTML pozostanie taki sam, ta wstępnie zdefiniowana klasa jest po prostu gotowa do późniejszego wykorzystania.

Możemy teraz zmodyfikować JavaScript, aby addClass()zamiast tego używał :

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

Podczas uruchamiania tego kodu, zamiast bezpośrednio modyfikować stylewłaściwość każdego dopasowanego elementu „docelowego”, nowa klasa zostanie teraz dodana:

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

Dzięki nowej „ukrytej” klasie element ten odziedziczy styl deklarowany w twoim CSS, a twój element nie będzie już wyświetlany.

Jak wspomina wiele innych osób, tak, używanie klas bez przypisanego CSS jest całkowicie poprawne i zamiast myśleć o nich jako o „klasach CSS”, powinieneś po prostu rozpoznać semantykę klasy i identyfikatora odpowiednio jako grupy i poszczególne elementy.

Chciałem się przyłączyć, ponieważ czułem, że podany przykład nie podniósł ważnej kwestii. Jeśli kiedykolwiek będziesz potrzebować wizualnych manipulacji na elementach o zmiennej długości (w tym przypadku używasz wierszy tabeli), zawsze warto rozpoznać, że koszt zrobienia tego za pomocą Javascript może być bardzo drogi (np. Jeśli masz tysiące wierszy).

W tej sytuacji powiedzmy, że wiemy, że kolumna 2 zawsze ma potencjał do ukrycia (jest to świadoma funkcja twojej tabeli), wtedy warto zaprojektować styl CSS do obsługi tego przypadku użycia.

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

Następnie zamiast używać JS do przechodzenia między elementami DOM znajdującymi N, musimy po prostu przełączyć klasę na jednym (naszej tabeli).

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

Przypisując do tabeli identyfikator, byłoby to jeszcze szybsze i możesz nawet po prostu odwołać się do kolumny za pomocą :nth-childselektora, co jeszcze bardziej zmniejszy twoje znaczniki, ale nie mogę komentować wydajności. Innym powodem tego jest to, że nienawidzę stylizacji wbudowanej i dołożę wszelkich starań, aby ją wyeliminować!

Nie przyniesie to efektu, jeśli zastosujesz klasę do elementu HTML, a klasa ta nie zostanie zdefiniowana w CSS. Jest to powszechna praktyka i jak powiedział Aamir afridi, jeśli używasz klas wyłącznie w celu js, dobrą praktyką jest poprzedzenie ich js-.

Dotyczy to nie tylko calsses, ale także atrybutu id elementów HTML.

Nie ma żadnego problemu z użyciem klas do zapytania o elementy. Kiedyś nadawałem takim nazwom klas sys-prefiks (na przykład nazwę twoją klasę sys-target), aby odróżnić je od klas używanych do stylizacji. Była to konwencja stosowana w przeszłości przez niektórych programistów Microsoft. Zauważyłem również rosnącą praktykę używania js-prefiksu do tego celu.

Jeśli nie masz doświadczenia w używaniu klas do celów innych niż stylizacja, polecam użycie wtyczki jQuery Role.js, która pozwala osiągnąć ten sam cel za pomocą roleatrybutu, więc możesz napisać znaczniki jako <td role="target">i użyć zapytania $("@target"). Strona projektu ma dobry opis i przykłady. Używam tej wtyczki do dużych projektów, ponieważ naprawdę lubię utrzymywać klasy wyłącznie w celach związanych ze stylizacją.

Zobacz silnik sprawdzania poprawności jQuery . Nawet tam używamy nieistniejących klas do dodawania reguł sprawdzania poprawności atrybutów HTML . Więc nie ma nic złego w korzystaniu z klas, które nie zostały zadeklarowane w arkuszu stylów.