Ci sono motivi per non usare mai più classi o id?

Question

Ci sono motivi per non usare mai più classi o id?

#1 da (13 voti)
#2 da (0 voti)

2

Comprendo un javascript non invadente. Anche nel mio CSS ora non uso quasi mai le classi o gli id perché mi piacciono i file html puliti, facili da leggere e poco chiari. Ad esempio, perché usare questo:

<body id="anchor" ontouchstart="">
  <nav id="nav">
    <div id="design" class="option">
      <p class="vCenter">design</p>
    </div>
    <div id="function" class="option">
      <p class="vCenter">function</p>
    </div>

    <div id="rule"></div>

    <div id="advanced" class="option">
      <p class="vCenter">advanced</p>
    </div>
  </nav>
</body>

Quando posso usare questo:

<body>
  <nav>
    <div>
      <p>design</p>
    </div>
    <div>
      <p>function</p>
    </div>  
    <div></div>
    <div>
      <p>advanced</p>
    </div>
  </nav>
</body>

E poi usa i potentissimi selettori CSS3 per accedere a tutti i miei elementi. Oppure potrei usare JavaScript per dare a questi elementi classi e id. Sono troppo ossessionato dal codice pulito? O è questo un modo più futuro e più pulito di sviluppo?

html javascript css

posta carb0nshel1 22.04.2016 - 18:27

fonte

2 risposte

0

La risposta è che probabilmente non dovresti sputare l'HTML grezzo e quindi collegare JS e CSS ad esso.

Il problema principale è che gli ID e le classi sono fondamentalmente uno stato mutabile globale, dal momento che chiunque può mutare il DOM con qualsiasi nome di classe o id per un elemento. In alternativa, possono leggere o mutare facilmente il tuo stato osservandolo per ID o classe e poi applicare stili casuali o mutazioni casuali attraverso JS.

L'intera cosa diventa un gigantesco mondo di id e nomi di classe e 99 selettori e una cagna non è teoricamente uno ma non ne sarei sorpreso. Non puoi cambiare nulla senza dover controllare l'intera dannata base di codice.

Invece, è molto meglio mettere tutto in un unico posto con una tecnologia come React. Fondamentalmente non hai più bisogno degli id degli elementi DOM e anche i nomi di classe sono quasi completamente ridondanti. Puoi mantenere tutta la logica su un dato pezzo di HTML in un unico posto senza stupidi stati globali.

risposta data 22.04.2016 - 20:10

fonte

Leggi altre domande sui tag html javascript css

Come implementare le procedure aziendali durante l'utilizzo di scrum? Rappresentazione DDD di entità e database

score 13 · Accepted Answer

Questa mi sembra una pessima idea. definire le regole css per le classi e aggiungere tali classi all'html è un ottimo modo per rendere il tuo css riutilizzabile. Il modo in cui stai suggerendo, con un selettore complesso, sembra una ricetta per i fogli di stile mutilati. Certo, il tuo html è pulito come un fischio, ma ora il css è un dolore nel sedere da mantenere.

Si consideri:

.centre-box {
    /* your rules */
}

Vs

body div > div:nth-of-type(3) > div {
    /* your rules */
}

Poi la settimana prossima aggiungerai una div sopra la casella che vuoi essere centrata, ed è rotta. Per risolverlo, devi trovare la regola di css tangibile che ha come target il tuo box centrale prima e cambiarlo in qualcosa di nuovo. E tutto questo fastidio in modo che il tuo html sia più pulito?

Più tempo in anticipo, costi di manutenzione più elevati, nessuna circostanza attenuante che lo renda necessario. Fine della storia.

Addendum

Perché esistono anche selettori css complicati?

A volte vuoi stile più di un solo elemento. Considera questo esempio da bootstrap , un framework css molto popolare. (Nota: è scritto in less, che viene compilato in css. Supporta il nesting, quindi tutto quello che devi sapere quando leggi l'esempio è che foo { bar { /* rule */ } } in less è foo bar { /* rule */ } in css.)

Esempio: sorgente della barra di navigazione utilizza > selector ( selettore figlio diretto ) per ridimensionare i figli diretti dell'elemento .navbar-brand .

Ma in questo caso, si usa una classe con un nome significativo per mettere in relazione la regola css con una parte del DOM, e si usano i selettori di fantasia per lo stile degli elementi figli di quella classe.

Che ne dici di farlo in JavaScript?

Anche per me non sembra una soluzione ... per convertire da classi e ID e il vecchio foglio di stile con JavaScript, manterrai il tuo css lo stesso, semplificando il tuo html, ma aggiungi un file JavaScript completamente nuovo che deve (1) utilizzare selettori complessi con jQuery, quindi è tanto più un nido di topi quanto l'opzione del foglio di stile del pazzo selettore, oppure (2) usa JavaScript senza jQuery per attraversare il DOM e attache gli elementi se necessario.

(1) è altrettanto pessimo che metterlo in css, e (2) è peggio di (1) secondo me, perché fondamentalmente devi duplicare la tua struttura DOM nel tuo file JavaScript (solo in un formato diverso , ma le stesse informazioni), quindi hai ancora un DOM con ID e classi, è solo scritto in JavaScript. Questo è un lotto più complessità.

Quindi cos'è un discreto JavaScript?

Non lo tratterò completamente qui perché su Google ci sono molti se stai cercando dettagli. Ma il punto chiave in relazione a questo è che JavaScript non invadente è che non vuoi che il tuo JavaScript si intrometta nel tuo html. Questo si basa sull'uso di ID e classi per identificare gli elementi a cui attache il comportamento di JavaScript. JavaScript discreto dice: usa id e classi per allegare eventi agli elementi invece di integrare gli eventi JavaScript.

In poche parole

Le classi Css con nomi significativi sono il modo migliore per associare un insieme di regole css con una porzione di html che si desidera modificare. Questa è la convenzione corrente e le alternative suggerite aggiungono complessità e riducono la manutenibilità.