Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

CSS: js-*

  • 07.04.2014 21:32:14
  • CSS
  • 4

Większe projekty, nad którymi pracuje kilka osób mają to do siebie, że ciężko jest zapanować nad porządkiem. O ile w przypadku JS jest prościej, tak w przypadku CSS jest trudniej, bo każdy ma swój styl kodowania i ciężko jest się od niego odzwyczaić. Robi się jeszcze ciekawiej, gdy do jednego elementu HTML jest podpiętych kilka zdarzeń za pomocą JavaScript.

Problem

Dlaczego jest ciekawie? Niech jako przykład posłuży życiowy przykład. W jednym projekcie przy którym intensywnie działam można znaleźć elementy HTML z takimi klasami CSS context_menu menu_people new_contact_list. Oczywiście po kliknięciu w ten element coś się pojawia, coś jest obliczane względem kursora. I teraz pytanie brzmi: pod którą klasę zostały podpięte zdarzenia? Przy odrobinie szczęście uda mi się namierzyć to połączenie za pierwszym razem. W najgorszym przypadku będę musiał przeszukać całe repozytorium 3 razy.

Już wiecie w czym jest problem? Tak, problemem jest czytelność kodu. Za każdym razem gdy trzeba będzie coś zmienić w tym miejscu za jakiś czas, cały proces poszukiwania trzeba będzie zaczynać od początku. Z drugiej strony - dobra rzecz dla wdrożenia się nowej osobie ;).

Rozwiązanie: js-*

Rozwiązanie tego, konretnego problemu jest stosunkowo proste. Każdemu takiemu elementowi można dodać specjalną klasę js-*. Dzięki temu mamy oddzieloną warstwę prezentacyjną - style CSS - od warstwy interaktywnej - zdarzenia podpinane za pomocą JavaScript. Koszt dodania dodatkowej klasy w HTML jest zerowy, a dzięki temu dostajemy czytelny kod, który łatwo i szybko możemy zlokalizować, bo szukamy konkretnego stringa w plikach *.js.

Co więcej, podobną konwencję można zastosować do elementów którym zawartość również jest zmieniana za pomocą JavaScript.

Przykładowy element mógłby wtedy wyglądać następująco: context_menu menu_people new_contact_list js-show-contextmenu. Proste?

Teraz trzeba będzie tylko przestawić się na nową konwencję. Czy ktoś z tego korzysta? Zajrzycie sobie w źródło Twittera :). Szybki przykład z Twittera: with-icn js-action-reply js-tooltip. Szybki rzut w kod i wiemy już co robi dany element.

TIP: Jeżeli jakaś funkcjonalność dotyczy konkretnego modułu na stronie można przyjąć konwencję: js-module-* np. js-comments-*.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Comandeer

09.04.2014 Comandeer

Tylko, że ja nie widzę zbytniego sensu w takim kombinowaniu ;) Klasy są dla mnie hookiem głównie dla stylowania, natomiast JS przypinam poprzez id.
Zresztą nawet w przedstawionym tutaj przypadku sama klasa nie wystarczy, żeby przekazać wszystkie potrzebne skryptowi dane (w końcu menu kontekstowe z czegoś trza zbudować). Skoro takie dane przekazujemy, to czemu nie data-* (np data-action)? Wydaje mi się to sensowniejsze.

Gavatar shpyo

11.04.2014 shpyo

@Comandeer - to jak masz kilka podobnych elementów to też podpinasz przez ID? :)
Przekazywanie danych do JS za pomocą data-* jest jak najbardziej ok i PRO :)

Gavatar look997

12.04.2014 look997

Nie wiem czy piszesz serio czy żartujesz -> " :)"

Czy korzystanie z data-* jest równie wydajne co korzystanie z klas?

Gavatar Comandeer

18.04.2014 Comandeer

@shpyo - głównie tak, bo rodzic dla takich elementów ma id a całą resztę obsługuję przez event delegation. owszem, jeśli mam ileś elementów poza wspólnym rodzicem, to wówczas se podepnę pod klasę (chociaż IMO .context-menu wystarczająco dobitnie mówi co ten element robi).
@look997 - pewnie jest jakiś minimalny spadek wydajności, ale powinien się mieścić w akceptowalnej skali.

Dodaj komentarz