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

HTML- class czy ID

+4 głosów
2,194 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

+12 głosów
odpowiedź 16 lutego 2016 przez Comandeer Mentor (376,970 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 Maniak (72,820 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,920 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).
komentarz 17 lutego 2016 przez Comandeer Mentor (376,970 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 Mentor (376,970 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 PATYL Maniak (65,800 p.)
edycja 16 lutego 2016 przez PATYL
Na stronie używaj class'y, tylko czasami ID będzie ci potrzebne, czy do podłączenia kotwiczek czy JS'a.
+1 głos
odpowiedź 16 lutego 2016 przez Arkadiusz Waluk Mędrzec (189,310 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 PATYL Maniak (65,800 p.)
A menu co z nim?
komentarz 16 lutego 2016 przez xSvilen Mądrala (5,750 p.)
<nav></nav> ?
komentarz 16 lutego 2016 przez PATYL Maniak (65,800 p.)
1
komentarz 16 lutego 2016 przez Arkadiusz Waluk Mędrzec (189,310 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ć.
0 głosów
odpowiedź 16 lutego 2016 przez mati10d Gaduła (3,170 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 (150,430 p.)

Za Comandeera masz yes

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

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

komentarz 16 lutego 2016 przez PATYL Maniak (65,800 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 argeento Szeryf (77,330 p.)
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,170 p.)
A co to jest? xD
komentarz 16 lutego 2016 przez Comandeer Mentor (376,970 p.)
https://bem.info → architektura frontendowa
0 głosów
odpowiedź 16 lutego 2016 przez xSvilen Mądrala (5,750 p.)
Lepsze classy, zawsze możesz użyć kilka razy jej.
komentarz 16 lutego 2016 przez PATYL Maniak (65,800 p.)
ID też są bardzo istotne.
komentarz 16 lutego 2016 przez xSvilen Mądrala (5,750 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 Mentor (376,970 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 Mentor (376,970 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 Mentor (376,970 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 Mentor (376,970 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,170 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 Mentor (376,970 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ź 104 wizyt
pytanie zadane 6 września 2016 w HTML i CSS przez kamrejare9 Nowicjusz (160 p.)
0 głosów
1 odpowiedź 109 wizyt
pytanie zadane 23 października w HTML i CSS przez mmaatteusz Nowicjusz (150 p.)
0 głosów
1 odpowiedź 94 wizyt
pytanie zadane 19 września 2016 w HTML i CSS przez schumix Nowicjusz (240 p.)

42,445 zapytań

81,749 odpowiedzi

162,269 komentarzy

20,388 pasjonatów

Przeglądających: 116
Pasjonatów: 1 Gości: 115

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...