Ce să folosiți în loc de ID-uri în selectori în CSS (Inginerie software, Stil De Codare, Standarde De Codare, Html, Css)

Leo C Han a intrebat.

Am instalat recent un pachet csslint pentru editorul meu de text Atom. Tot primesc avertismente care spun „Nu folosiți ID-uri în selectori”. Mi s-a părut ciudat acest lucru, deoarece am folosit întotdeauna ID-uri în selectori în CSS și nu am întâmpinat probleme de codare sau sintactice folosindu-le.

Pe StackOverflow, am găsit postări, cum ar fi aceasta, în care se afirmă că nu ar trebui să folosesc ID-uri deoarece acestea au prioritate față de clase. Cu toate acestea, am găsit o altă postare care afirmă că ar trebui să folosesc ID-uri deoarece acestea au prioritate față de clase. Înțeleg ambele postări, dar tot nu știu dacă ar trebui să continui să le folosesc sau nu.

Să spunem că am acest cod ca exemplu:

HTML

<div id="opening-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>
<div id="body-subject-container">
    <div class="subject"></div>
    <div class="subject"></div>
    <div class="subject"></div>
</div>

CSS

.subject {
    width: 100%;
    height: 20px;
}
#opening-subject-container .subject {
    background-color: red;
}
#body-subject-container .subject {
    background-color: blue;
}

în care vreau ca primul subjects din containerul de deschidere să fie roșu, iar celelalte subjects în containerul corpului să fie albastru.

Dacă nu ar trebui să folosesc niciodată ID-uri în selectori CSS, ce ar trebui să folosesc în schimb?


Mulțumesc pentru sfaturile tuturor. Am decis să rămân la utilizarea ID-urilor, deoarece sunt convenabile și sunt capabil să țin evidența când ar trebui să folosesc un ID și când nu. M-am săturat de mesajele de avertizare din lint, așa că am schimbat codul sursă și am eliminat unele reguli care afișează avertismente de genul acesta.

Comentarii

  • Am o regulă absolută despre a spune să nu faci niciodată ceva: nu face niciodată o regulă absolută care să spună să nu faci niciodată ceva. – user22815
  • Obișnuiam să îmi pese de astfel de chichițe de front-end ca acestea până când mi-am dat seama că era doar o masturbare de cod HTML-nerd cu un impact foarte mic sau deloc în lumea reală asupra tipurilor de lucruri la care lucrez. –  > Por Graham.
  • RE editarea ta: Cred că ai făcut ceea ce trebuia. Pentru asta sunt cei care se ocupă de linters. Ei expun capcanele comune și, dacă, după ce ați examinat raționamentul din spatele lor, decideți că nu se aplică, atunci adaptați regulile de linting la specificațiile dvs. și mergeți mai departe cu viața. –  > Por Eric King.
  • Gândiți-vă, atunci când aveți nevoie de o a treia listă care conține date din aceeași clasă (de exemplu, deschidere), ar trebui să duplicați css-ul pentru a o stiliza în mod specific. Pentru că puteți folosi un ID doar o singură dată. Cu clasele ai putea doar să copiezi html-ul și stilizarea se va potrivi. De asemenea, din punct de vedere semantic are sens, deoarece este vorba de același tip de date care, din acest motiv, primesc aceeași clasă. –  > Por Luc Franken.
6 răspunsuri
Abhinav Gauniyal

ID-urile sunt necesare pentru a fi unice, în timp ce clasele tind să grupeze stilul mai multor elemente. Am citit undeva ca această analogie :

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Cărțile de identitate ale studenților sunt distincte. Nu există doi studenți din campus care să aibă aceeași carte de identitate a studentului. Cu toate acestea, mulți studenți pot și vor împărți cel puțin o clasă între ei.

În plus , elementele ID tind să aibă o prioritate mai mare față de alți selectori, ceea ce face mai dificilă reaplicarea regulilor asupra lor. a existat un răspuns pe stackoverflow cu privire la o funcție JS care selectează doar prima apariție a acelorași elemente ID (voi include linkul cât mai curând posibil).

EDIT : încercați să obțineți o grămadă de elemente folosind getElementByID() în js și veți observa ce am încercat să spun.

Pe de altă parte , IMO nu ar trebui să iei plângerile csslint prea strict pe regulile tale css. Unele dintre ele sunt greșite prin natura lor.

referință

Comentarii

  • Ceea ce spune acest lucru este în mare parte adevărat; doar că nu răspunde deloc la întrebarea pusă, deloc, așa că mă întreb care a fost întrebarea cu adevărat, din moment ce aceasta a fost acceptată. –  > Por Jukka K. Korpela.
  • @JukkaK.Korpela răspunsul este „class’es”. Iar eu am inclus doar informații relevante pentru OP, astfel încât să își facă o idee despre ‘de ce și ce’ 🙂 –  > Por Abhinav Gauniyal.
  • Acest răspuns este încă doar implicit, și, ceea ce este mai rău, este doar un răspuns implicit. opinie, și tinde să deruteze mai mult decât să ajute. Nu este un răspuns corect la întrebarea „ce ar trebui să folosesc în loc de selectori id”, pentru că nu există un răspuns corect; întrebarea este greșită, bazată pe premise false, presupunând că un linter este corect în instrucțiunile sale. –  > Por Jukka K. Korpela.
Eric King

Cred că esența argumentului, pentru cei care sunt de acord cu el, este de a utiliza class pentru selectori css în loc de id. Astfel se evită aplicarea unor reguli de precedență css neintenționate.

Dacă știi ce faci (re class vs id selectori) și funcționează pentru tine, eu nu aș schimba doar de dragul de a schimba, totuși.

De la http://csslint.net/about.html:

ID-urile nu ar trebui să fie folosite în selectori deoarece aceste reguli sunt prea strâns legate de HTML și nu au nicio posibilitate de refolosire. Este mult mai bine să folosiți clase în selectori și apoi să aplicați o clasă unui element din pagină.

Comentarii

  • Selectorii de clasă și id au rolurile lor; CSS le are pe amândouă cu un motiv. Acest răspuns citează un argument dezordonat care nu este susținut de fapte sau referințe. Un selector id poate fi refolosit la fel ca un selector de clasă; doar că are un rol diferit. Selectorul id nu este nici mai puțin (și nici mai mult) „cuplat cu HTML” decât selectorul de clasă. –  > Por Jukka K. Korpela.
  • @JukkaK.Korpela Ca să se știe, nu susțin argumentul, ci doar îl citez. Întrebarea întreabă care este alternativa sugerată, iar răspunsul este clar. –  > Por Eric King.
Paul Clark

Răspunsul evident la întrebarea lui OP – „Ce să folosim în loc de ID-uri?” – este „Clase”.

Să zicem că am un div pe fiecare pagină care conține meniul meu. Să spunem, de asemenea, că am un JavaScript care vizează acest meniu, folosind ID-ul său, care este …oh, nu știu… id="menu".

Meniul constă într-o listă neordonată, iar eu folosesc CSS pentru a o transforma dintr-o listă normală de puncte în ceva care arată ca un meniu. Până aici, totul este convențional.

Ceea ce spune Lint este că, deși nu voi avea decât un singur meniu pe pagina mea, și deși nu aș vrea să aplic stilul de tip meniu la nicio altă listă neordonată, și deși aș vrea ca stilurile mele de meniu să prevaleze asupra oricăror stiluri mai generale pe care le aplic la toate celelalte liste neordonate, este o practică proastă să direcționez stilurile mele către #menu. În mod logic, prin urmare, div-ul meu ar trebui să arate ca:

<div id="menu" class="menu">My menu code here</div>

Bineînțeles, voi avea grijă să aplic clasa „menu” într-un singur loc pe fiecare pagină, deoarece voi afișa meniul doar o singură dată.

</sarcasm-mode>

În timp ce sugestia lui Lint – și obiecția de a selecta pe baza ID-urilor – poate fi uneori justificată, exemplul de mai sus arată, cred, că este o idioțenie să fie aplicată ca o regulă strictă. În cazul în care avem conținut în pagină care este „structural” și care este cu adevărat unic pe pagină – antet, meniu, subsol etc. – aceste elemente sunt identificate corect prin ID-uri și selectate corect în același mod în CSS-ul nostru.

Andrew Hoffman

Există multe motive pentru a selecta după un id. Cred că spiritul acestui mesaj de la lint este că ar trebui să aplicați în primul rând stilizarea prin clase.

Selectarea prin id poate fi excepție în cazul în care stilul este împărțit între elemente similare, cu excepția acesta, sau doar acesta.

Puteți folosi clasele pentru a acționa ca un id, dar cred că asta este probabil evanghelizare. Asta ar fi ca și cei care insistă să nu folosească niciodată un tabel, chiar și atunci când un tabel este perfect adecvat.

Zantier

La asta mă rezum în general.

Principalul scop, în opinia mea, de a avea un fișier css separat este că acesta poate fi partajat între mai multe pagini, care pot folosi stilurile în moduri diferite. Folosind clase css în loc de ID-uri, este mai puțin restrictiv, permițându-vă să nu vă faceți griji cu privire la ID-urile duplicate, în timp ce specificitatea mai mică permite o personalizare mai ușoară a stilului (fie într-un alt fișier css, fie în capul HTML).

Atunci când scrieți css în capul HTML, cred că utilizarea ID-urilor este bună atunci când faceți referire la un anumit element din pagină. Mai târziu, puteți decide că css-ul care face referire la ID-uri ar fi util pe o altă pagină. Atâta timp cât păstrați css-ul în head, mai degrabă decât în inline, ar trebui să fie destul de ușor să îl refactorizați într-un fișier css separat, înlocuind ID-urile cu clasele, dacă este cazul.

herby

A folosi id-uri este ca și cum ai folosi singletons, iar singletons nu sunt un stil foarte bun. Pentru prototip, da, dar în încercarea de a face lucrurile bine, nu presupuneți că „acest tip de lucru va fi întotdeauna aici o dată și numai o dată”, decât dacă știți cu siguranță. Este mai flexibil să fii pregătit pentru 0 și multe, nu doar pentru 1.

Și, bineînțeles, precedența CSS este, de asemenea, o preocupare valabilă.

De exemplu, în exemplul dvs. ar trebui să existe class="opening subject-container" și class="body subject-container" și puteți selecta singur dacă stilul este aplicabil la toate .opening lucruri sau numai pentru .opening.subject-container, , în plus, puteți stiliza lucruri comune pentru toate .subject-containers, de asemenea. Doar un exemplu posibil.