CSS Frameworks e “Naming Semantic”

Question

Ho guardato due quadri CSS che mi potrebbe risparmiare un sacco di tempo (Blueprint, 960gs) ma hanno domande su come usarli e conformi con gli standard web. Ad esempio, Blueprint ha cose come:

<div class="span-24 last">

e 960gs come: <div class="grid_6 prefix_3 suffix_3">

Questo non mi preoccupa personalmente, ma ho visto menzione che l'utilizzo di questi nomi non standard per le classi, non è consigliato e va contro gli standard web. Come più di uno sviluppatore di back-end, non sono aggiornati sulle ultime Web Standards, l'accessibilità, ecc, ma mi piacerebbe almeno rimanere in qualche modo compatibile. Avrebbe funzionato semplicemente aggiunta di ID significativi? Come: <div class="grid_12" id="menu"> C'è una buona pratica quando si utilizzano framework CSS come questi

?

Nota:! Mi piace anche il suggerimento di utilizzare Compass / Sass delle nicholaides

Answer 1

Credo che tu stia confondendo un argomento stile con un argomento standard. Ci sono persone che sostengono che quando si crea una classe che si dovrebbe chiamare 'titolo' e non 'blu' - semplicemente perché se il titolo deve diventare verde, è necessario modificare la definizione di classe e il codice HTML e non solo ridefinire il 'titolo ' classe. Questa è una preferenza personale, è buono stile, ma non relative a qualsiasi standard.

Non ci sono i nomi di 'standard' per le classi, è possibile chiamare loro tutto quello che vuoi, in modo da non preoccuparsi di denominazione classi alcun modo particolare dal punto di vista tecnico standard.

Inoltre, dal momento che le classi che un quadro CSS creare non sono destinate ad essere a cura di esseri umani, ma utilizzato solo nel contesto del quadro, la loro mancanza di significato semantico è irrilevante al di fuori del quadro.

Answer 2

Non vedo come

<div class="span-24 last">

e

<div class="grid_6 prefix_3 suffix_3">

non rispetta gli standard web. Questo è semplicemente più classi assegnate ad un singolo elemento.

Answer 3

Nel lungo periodo, il tempo risparmiato andranno persi. Si possono trovare te per sempre lanciando tra il CSS e il codice HTML, cercando di ricordare cosa "grid_6" è. i nomi delle classi descrittivi aiuterà molto.

Answer 4

Bussola .

Si utilizza Sass (che compila a CSS) e che utilizza le funzionalità di una serie di framework CSS popolari . (Non è così spaventoso / bizzarro come sembra. Sass è un ottimo sostituto per i CSS, anche senza l'appoggio quadro CSS.)

Invece di fare

<ul class="column_6">...</ul>

Lo fai:

ul.naviation
  color: #fff
  +column(6)

che compila a

ul.navigation {
  color: #fff;
  /* all the rules for the 6th column a placed here */
}

È possibile usufruire di quadri CSS, mantenendo il vostro markup pulito e semantico.

Answer 5

Non utilizzare i CSS Framework
perché il vostro sito non userà tutto il quadro offre.

E 'solo buono da prendere come riferimento e scrivere il proprio CSS.
Sarà più facile da mantenere, e il file css sarà più piccolo.

Solo una parte vorrei utilizzare is..the file di reset.css da 960.gs
Il file di reset css è ampiamente utilizzato per rimuovere tutto lo spazio bianco di default con elementi DOM.

Answer 6

Si potrebbe provare a denominazione elementi con id delle prossime Specifiche Nome HTML5: hml5 foglio che è piuttosto ampia specificato per l'uso in tutto il mondo . Se ti infili a questa denominazione convenzioni si dovrebbe ricordare mediatamente scopo di elemento di design. Se più precisione è necessario cercare di utilizzare alcuni formato leggibile che si capirà -. Il vostro comfort di scrittura è la chiave per la qualità del codice

Se siete interessati più in quella argomento leggere l'articolo completo su Smashing Magazine "HTML5 e il futuro del web" (google: nuovo limite di collegamento utente: /)