Czy używanie klas CSS dla znaczników JS jest szkodliwe?

Question

Scenariusz:

• stronę główną, która jest generowana z PHP i silnika szablonów.
• Strona jest przeprojektowywana.
• Nowy projekt oparty jest na interfejsie użytkownika jQuery.
• Obecny CMS wykorzystuje wiele szablonów: szablon strony, szablon Szczegóły artykułu, szablon komentarzy itp

Problem: Niektóre szablony (np szablonu Szczegóły artykułu) generują fragmenty HTML, który powinien używać elementów interfejsu użytkownika jQuery, takich jak karty. Obecnie źródło danych szablonu strony nie zawiera żadnych informacji, które elementy należy przekształcić w elementy jQuery UI w głównym wywołaniu jQuery w nagłówku dokumentów.

Możliwe rozwiązanie Dodaj klasę CSS jak „jqTabs” do znaczników html sub-szablony i używać selektora .jqTabs w głównym skrypcie jQuery.

Pytanie Czy to zły pomysł?

BTW: "Użyj innego CMS" nie jest poprawną odpowiedzią, ponieważ jest toopcja teraz (termin, budżet, ... wymieniasz go na -.-).

Answer 1

Niezły pomysł.

Jest to jedno z podstawowych zastosowań klas.

Klasa (jak i ID) może być używana jako sposób na styl elementu i/lub przechwytywanie skryptów.

W tym przypadku może to być najlepsze możliwe rozwiązanie, ponieważ pozwala na wprowadzenie minimalnych zmian w znacznikach w celu szerszego przeprojektowania.

Jest łatwo odwracalny.

Answer 2

Wierzę, że używanie klas CSS jako haków dla JavaScriptu może być naprawdę złą praktyką. Powodem, dla którego to mówię, jest to, że takie podejście miesza twoje CSS i JavaScript i często może prowadzić do niepotrzebnego zamieszania.

Pozwól mi wyjaśnić: Obecnie pracuję nad dodaniem nowych szablonów do istniejącego systemu, który używa dynamicznych kontrolowanych przez użytkownika ustawień administracyjnych do kontrolowania właściwości CSS (szerokość strony, rozmiary czcionek, kolory itp.). Te ustawienia mogą również wpływać na właściwości JS (opcje pokazu slajdów, opóźnienia między slajdami itp.).

Problem polega na tym, że ponieważ tak wiele klas CSS było używanych jako haki JavaScript, mam strasznie trudny czas decydując, które klasy są używane dla stylów i które są używane jako haki JS, i które z nich są używane dla obu! W rezultacie przy tworzeniu nowego szablonu bardzo trudno byłoby zacząć od zera z nowym znacznikiem, ponieważ pomijałbym różne ważne klasy zarówno dla funkcji CSS, jak i JS.

Zadanie byłoby znacznie łatwiejsze, gdyby klasy CSS były używane TYLKO do stylizacji, a inne haki JS były używane tylko dla JS.Wyobrażam sobie ten jest realizowany z atrybutów danych HTML5, która będzie wyglądać mniej więcej tak:

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

Korzystając atrybuty haki JavaScript danych HTML5 i atrybut klasy CSS stylizacji, możemy być pewni, że wszystkie zajęcia są TYLKO związane z CSS, a wszystko, co dotyczy JavaScript, otrzymuje po prostu jego atrybut niestandardowy.

Inną opcją, której użyłem, jest przedrostek dowolnej klasy css z js-, do której kiedykolwiek odwołuje się JavaScript. W ten sposób dowiesz się, które klasy można bezpiecznie usunąć w celu stylizacji i które z nich pozostały do ​​istniejącej funkcjonalności.

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