• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML- class czy ID

VPS Starter Arubacloud
+4 głosów
7,569 wizyt
pytanie zadane 16 lutego 2016 w HTML i CSS przez Pasnik Nowicjusz (160 p.)
Witam, dopiero zaczynam moją przygodę z HTML'em (towarzyszy mi kurs p.Mirosława) i zastanawiam się, czy warto w ogóle zwracać uwagę na podział oznaczeń divów na class i id. Nie można po prostu wszędzie wpisywać class? Czy coś się stanie, jeżeli użyję diva oznaczonego jako class tylko jednokrotnie? Czy to jakoś zwiększa wagę kodu?

7 odpowiedzi

+14 głosów
odpowiedź 16 lutego 2016 przez Comandeer Guru (599,730 p.)
edycja 16 lutego 2016 przez Comandeer

Pozwolę sobie zacytować samego siebie:

W CSS-ie różnica między [id] a [class] jest związana ze specyficznością selektorów – tylko i wyłącznie! Unikatowość [id] jest wymagana na poziomie DOM – nie CSS. Dlatego w CSS lepiej używać jedynie klas do stylowania (tak, jak robi to np. BEM, dodatkowo spłaszczając zależności między elementami do całkowicie niezbędnego minimum).

 [id] służyć powinien do dwóch celów:

  • przypinania skryptów JS/innych bindingów (np. ARIA)
  • służenia jako punkt nawigacyjny; de facto każda sekcja powinna mieć [id] w JĘZYKU STRONY (a najlepiej, żeby zawartość tego atrybutu była slugiem z nagłówka dla danej sekcji)

Natomiast w CSS [id] robi więcej szkody niż pożytku – właśnie z powodu specyficzności → http://www.standardista.com/css3/css-specificity/

A dla niedowiarków: dowód, że w CSS unikalność [id] to całkowita mrzonka → http://bzdety.comandeer.pl/id.html

komentarz 17 lutego 2016 przez HaKIM Szeryf (87,590 p.)
Hahaha, dobre. Ta, powinieneś użyć class mimo to. : )

 W sumie to nie wiem po cholerę nam dwa selektory do stylowania, tylko potem problem, bo się nie pamięta czy to była klasa, czy id. Ja przez takie zróżnicowanie szukałem błędu w kodzie ponad półgodziny.
komentarz 17 lutego 2016 przez Czort Nałogowiec (32,500 p.)
ID nie służy do stylowania w css, co nie zmienia faktu, że można, a nawet należy je używać w html (oczywiście jeżeli jest to uzasadnione użycie).
1
komentarz 17 lutego 2016 przez Comandeer Guru (599,730 p.)

Po prostu przeglądarki internetowe są odporne na tego typu rzeczy, ale niczego to nie dowodzi :) Standard mówi na temat ID jedno.

No właśnie chyba nikt go nie czytał ;) Ze specyfikacji selektorów:

Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies.

Jak widać, [id] jest określane przez język dokumentu, nie przez CSS. Dodatkowo, w stosunku do wszystkich selektorów, jest określone:

A selector consisting of a single sequence of simple selectors represents any element satisfying its requirements.

 Natomiast w HTML5 jest napisane:

The id attribute specifies its element's unique identifier (ID). [DOM]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

I dopiero na tym poziomie unikalność selektora jest określona.

Czy np. dla pojedynczych elementów na stronie, niepowtarzających się, jak np. stopka, slider, menu, nagłówek z logiem, powinienem użyć ID czy CLASS ?

Jak już mówiłem, [id] służyłby wówczas jako hook dla JS i/lub kotwica nawigacyjna. Natomiast obok niego może istnieć klasa do stylowania. Po prostu te atrybuty służą różnym celom IMO, a co potwierdzają najlepsze praktyki w środowisku.

 W sumie to nie wiem po cholerę nam dwa selektory do stylowania, tylko potem problem, bo się nie pamięta czy to była klasa, czy id.

Patrz wyżej ;)

komentarz 17 lutego 2016 przez Comandeer Guru (599,730 p.)
http://www.standardista.com/wp-content/uploads/2012/01/specificity3.pdf → tutaj jest bardziej obrazowo wytłumaczone ;)
+2 głosów
odpowiedź 16 lutego 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)
Również potwierdzam, że dobrą praktyką jest stosowanie tylko klas do stylizacji elementów w CSS, a id używania tylko do JavaScriptu.
komentarz 16 lutego 2016 przez Eimens Maniak (69,240 p.)
A menu co z nim?
komentarz 16 lutego 2016 przez xSvilen Mądrala (5,740 p.)
<nav></nav> ?
komentarz 16 lutego 2016 przez Eimens Maniak (69,240 p.)
2
komentarz 16 lutego 2016 przez Arkadiusz Waluk Ekspert (287,550 p.)
Tam gdzie to konieczne - czyli w tym przypadku co podałeś to owszem, trzeba użyć id. Tyle, że nie na każdej stronie jest takie menu, które korzysta z odwołania po id. Ale tam gdzie to nie jest potrzebne nie widzę potrzeby.

Można przecież bez problemu nadać id i klasę - przez klasę dokonać stylizacji, a po id zrobić tego linka jak ktoś chce się bardzo tego trzymać.
+2 głosów
odpowiedź 16 lutego 2016 przez Eimens Maniak (69,240 p.)
edycja 16 lutego 2016 przez Eimens
Na stronie używaj class'y, tylko czasami ID będzie ci potrzebne, czy do podłączenia kotwiczek czy JS'a.
0 głosów
odpowiedź 16 lutego 2016 przez mati10d Gaduła (3,150 p.)
edycja 16 lutego 2016 przez mati10d
W html,css powinno się używać  tylko class do stylizowania. To jest dobra praktyka PS tak gdzieś słyszałem, Comandeer popraw mnie :)
komentarz 16 lutego 2016 przez Patrycjerz Mędrzec (192,340 p.)

Za Comandeera masz yes

komentarz 16 lutego 2016 przez mati10d Gaduła (3,150 p.)

Szkoda że za Comandeer'a, ale dziękuje heart

komentarz 16 lutego 2016 przez Eimens Maniak (69,240 p.)
Jak to było by takie fajne, to po co komu ID w HTML'u? Widzisz jednak przydaje się do JS'a, menu itp.
komentarz 16 lutego 2016 przez niezalogowany
Jeszcze zanim skończyłem czytać twój komentarz w głowie pojawił mi się Comandeer polecający BEM : )
komentarz 16 lutego 2016 przez mati10d Gaduła (3,150 p.)
A co to jest? xD
komentarz 16 lutego 2016 przez Comandeer Guru (599,730 p.)
https://bem.info → architektura frontendowa
0 głosów
odpowiedź 16 lutego 2016 przez xSvilen Mądrala (5,740 p.)
Lepsze classy, zawsze możesz użyć kilka razy jej.
komentarz 16 lutego 2016 przez Eimens Maniak (69,240 p.)
ID też są bardzo istotne.
komentarz 16 lutego 2016 przez xSvilen Mądrala (5,740 p.)
Owszem, zgadzam się.
0 głosów
odpowiedź 16 lutego 2016 przez shimizu Obywatel (1,650 p.)
Na pewno już było zadawane to pytanie. Nawet Pan Mirosław chwalił w którymś odcinku gościa co na nie odpowiedział. Używasz id do rzeczy które pojawiają się raz na stronie a klas dla elementów które pojawiają się wielokrotnie. Można stosować tylko class ale moim zdaniem jest to błędem.

Jak używa się id to kod jest o wiele lepszy. Od razu widać wyodrębnione elementy na stronie.
komentarz 16 lutego 2016 przez Comandeer Guru (599,730 p.)

Akurat do tego bezpośrednio się odniosłem swego czasu:

W CSS-ie różnica między [id] a [class] jest związana ze specyficznością selektorów – tylko i wyłącznie! Unikatowość [id] jest wymagana na poziomie DOM – nie CSS. Dlatego w CSS lepiej używać jedynie klas do stylowania (tak, jak robi to np. BEM, dodatkowo spłaszczając zależności między elementami do całkowicie niezbędnego minimum).

komentarz 16 lutego 2016 przez shimizu Obywatel (1,650 p.)
Pierwsze słyszę. Gdzie mogę o tym poczytać?
komentarz 16 lutego 2016 przez Comandeer Guru (599,730 p.)
https://bem.info → BEM

http://www.standardista.com/css3/css-specificity/ → specifishity

+ takie luźne przemyślenia: http://oli.jp/2011/ids/
komentarz 16 lutego 2016 przez Comandeer Guru (599,730 p.)

A tutaj jeszcze dowód na to, że unikatowość [id] na poziomie CSS jest mrzonką: http://bzdety.comandeer.pl/id.html

komentarz 16 lutego 2016 przez shimizu Obywatel (1,650 p.)
Wiem że można użyć parę razy tego samego id. Jednak #id wyróżnia się w kodzie css. Chodziło mi o to, że lepiej jest użyć id dla jakiś głównych bloków na stronie. Na przykład content, menu, header, footer itp.
komentarz 16 lutego 2016 przez Comandeer Guru (599,730 p.)

Takie główne bloki i tak mogą mieć [id], ale do ich stylowania lepiej używać tak czy inaczej klasy. Właśnie z powodu problemów ze specyficznością.

Dodatkowo taki BEM pozwala nam wprowadzić konwencje nazewniczą identyczną na wszystkich poziomach developmentu – nawet na poziomie projektu graficznego (warstwy w PSD będą miały nazwy kolejnych bloków). Tym samym klasy są spoiwem łączącym HTML, CSS, JS i całą strukturę projektu. I to dla każdego elementu. W przypadku [id] tego się uzyskać po prostu nie da, bo… [id] służy do jednoznacznej identyfikacji elementów.

Przy współczesnym workflow, gdzie każdy moduł ma osobny plik CSS czy JS, "wyróżnianie się" czegokolwiek w arkuszu praktycznie nie jest już żadnym argumentem. Ba, większa część kodu CSS jest obecnie i tak generowana, więc istnieje możliwość, że dev wgl nie ma styczności z selektorami (patrz: CSS Modules i style jako moduły JS).

–2 głosów
odpowiedź 17 lutego 2016 przez meteor Nowicjusz (220 p.)

Witam

Jak zwykle prawda lezy po srodku :) ID's sa poto zeby je uzywac i wszystkie BEST PRACTICE w sieci , sa THE BEST ale tylko dla tego , kto ja napisal , nie sa to rozwizania dla wszystki problemow.

Wiadomo przeciez wszystkim ze Koderzy to taki leniwy narod , dlate mamy funkcje , loopy i takie tam inne rzeczy :)

I jak wszystkim powinno byc wiadomo ID sa Identyfikatorami , ktore sie bardzo ciezko daje zmieniac jak juz istnieja , co jest oczywiscie bardzo malo wygodne dla Developkow , po prostu uciazliwe i takie sie nie klejace do lapy.

Z tego co wiem to przegladarki maja swoje specifikacje jak podejsc do CSS i jak sie z danymi selektorami i jest nadawana punktacja na podstawie ktorej , jest potem odpowiedni selektor przypisany i tak :

Element: 1

Klassen: 10

IDs: 100

Inline Styles: 1000

 

po zliczeniu tych wszystkich punktow , jest przypisywany styl !!

A co do bzedtow Comandeera ......)

a wpisz moze 2 rozne Tagi ....a jak nie to moze cos takiego

<p id="orange" class="yellow">Ktora farba wygra?</p>

 

a pozatym , to wystarczy tylko dopowiedziec .......robicie jak chcecie ale robcie ;)))

 

pzdr

meteor

 

komentarz 17 lutego 2016 przez mati10d Gaduła (3,150 p.)

Poczułem się urażony masz, mnie oficjalnie przeprosić. "Wiadomo przeciez wszystkim ze Koderzy to taki leniwy narod , dlate mamy funkcje , loopy i takie tam inne rzeczy :)" . PS Comandeer już wyjaśnił temat :P 

komentarz 17 lutego 2016 przez meteor Nowicjusz (220 p.)

przepraszam oficjalniesmiley

komentarz 17 lutego 2016 przez Comandeer Guru (599,730 p.)

ID's sa poto zeby je uzywac i wszystkie BEST PRACTICE w sieci , sa THE BEST ale tylko dla tego , kto ja napisal , nie sa to rozwizania dla wszystki problemow.

W takim razie polecam się przyjrzeć tym praktykom. Konwencje typu BEM, SUIT, SMACSS itd. powstały z rąk ludzi, którzy pracują na dużej skali – tam niespłaszczanie kaskady CSS oznacza bardzo duże kłopoty. Facebook, czyli bardzo duża skala, poszedł jeszcze dalej i doszedł do momentu, w którym stworzono filozofię "zero CSS", za główny powód uważając niemożliwą do obejścia globalną naturę CSS-a (co oczywiście nie jest prawdą, bo znów: spłaszczenie kaskady i specyficzności + wprowadzenie konwencji sprawę rozwiązuje; do tego dochodzi Shadow DOM). Jak chcesz sobie poczytać czemu się odrzuca CSS w FB, to "biblią" jest ta prezka: https://speakerdeck.com/vjeux/react-css-in-js → po raz kolejny są poruszane problemy, o których tu cały czas piszę, ale rozwiązanie tam podane jest o wiele bardziej radykalne od "mojego".

Rozwiązanie, które opisuje, powstawało przez wiele lat i było przemyślane przez wiele tęgich głów, z których kilka już w tym temacie wymieniłem. Więc hasła typu

A co do bzedtow Comandeera ......

de facto wyzwaniem rzuconym nie mnie, ale praktykom wypracowanym przez całe środowisko. I jeśli to jest jedyny argument przeciwko nim, to cóż… nie ma o czym dyskutować.

Z tego co wiem to przegladarki maja swoje specifikacje jak podejsc do CSS i jak sie z danymi selektorami i jest nadawana punktacja na podstawie ktorej , jest potem odpowiedni selektor przypisany i tak :

Specyficzność – cały czas o tym mówię…

Problemy ze specyficznością mam już na swojej małej stronie domowej, która nie stoi na BEM. Tam są raptem 3 elementy na krzyż, a już się to daje we znaki…

a wpisz moze 2 rozne Tagi ....a jak nie to moze cos takiego

I ten kod to jest właśnie książkowy przykład dlaczego [id] się do stylowania używać nie powinno.

I jak wszystkim powinno byc wiadomo ID sa Identyfikatorami , ktore sie bardzo ciezko daje zmieniac jak juz istnieja , co jest oczywiscie bardzo malo wygodne dla Developkow , po prostu uciazliwe i takie sie nie klejace do lapy.

ID mam po to, żeby się nie zmieniały. A że myślę o aplikacjach w sferze modułów, to ID służy do identyfikacji ściśle określonych części aplikacji, nie zaś: do określenia ich rodzaju. ID = identyfikator instancji, klasy = określenie czego to instancja.

Podobne pytania

0 głosów
1 odpowiedź 340 wizyt
pytanie zadane 6 września 2016 w HTML i CSS przez kamrejare9 Nowicjusz (160 p.)
0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 30 stycznia 2018 w HTML i CSS przez Oskar4002 Początkujący (470 p.)
0 głosów
1 odpowiedź 277 wizyt
pytanie zadane 23 października 2017 w HTML i CSS przez mmaatteusz Nowicjusz (150 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...