Moduli: il tuo css accetta il tuo markup o viceversa?

Question

Per quanto riguarda le forme html, un modello molto comune markup è:

<form ...> 
    <p> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

Quanto markup molto (classi, ecc) ti forniscono in genere per permettere la formattazione visuale più flessibile della forma? Cioè, quanto markup aggiungi per aiutare con i selettori di CSS e usi selettori generici?

<form ...> 
    <p class='name'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

vs.

<form class='person' ...> 
    <p class='name string'> 
    <label>Name:</label> 
    <input .../> 
    </p> 
    <p class='birthdate date'> 
    <label>Birthdate:</label> 
    <input .../> 
    </p> 
    .. 
    <input type=submit/> 
</form> 

Nel secondo caso, l'aggiunta di tipi generici ("data") direttamente dal database può rendere più facile da costantemente formato di data campi. Anche un raggruppamento ("persona") per mostrare il modello da cui provengono i campi può aiutare. (Oppure avrei potuto usare un DIV interno). Tuttavia, per aumentare il riutilizzo della css, mi ritrovo ad aggiungere markup extra. In alcuni libri che ho letto ho sentito che meno markup, meglio è (e quella linea può essere molto grigia anche se suona vera per me). Ad esempio, potrei benissimo aver usato il markup da uno dei blocchi precedenti e aggiunto molti più selettori al css.

Quali sono i tuoi principi per decidere quanto margine ha senso? O quanto mettere sul lato css?

Inoltre, so che posso selezionare il nome di ingresso, ma dal momento che è un elemento nidificato perdo la mia capacità di controllare la formattazione da l'involucro esterno ("p"), che di solito è dove voglio che il controllo in più .

Answer 1

Cerco di mantenere il markup html al minimo.

moduli HTML sono la cosa più difficile da mantenere html e css al minimo, in quanto è molto difficile indirizzare tutti i vari ingressi in tutti i browser senza l'aggiunta di classi a loro, come Casella di testo a caselle di testo, ecc

Se tutte le tue forme per quel sito utilizzano semplici caselle di testo e non molto altro, l'approccio di markup minimo funziona perfettamente. Tuttavia i controlli con markup complesso come i controlli RAD telerik non giocano con markup semplice e spesso sono necessari markup e classi extra.

Questi piccoli trucchi aggiungono un margine di profitto, ma rendono anche il css molto più pulito e senza dubbio renderà lo styling di tali elementi molto più semplice.

Per altre generale html/css, tendo a usare il minor numero di classi possibile, come ad esempio

.Menu {} 
.Menu li {} 
.Menu li a {} 

Questo tipo di modello può essere ri-usato un sacco per i dati ripetuti, e modelli possono essere fatti e progettato con pochissimo markup html.

A volte le sue classi di aggiunta non evitabili e quant'altro, ma penso che se si pensa generalmente sia a css che a html si dovrebbe finire con il markup slick.

Da sito a sito, utilizzo raramente i CSS. I suoi stili di abbattimento facili e veloci per tutto ciò che desideri, la riprogettazione di una pelle esistente per adattarsi a un nuovo sito spesso non ne vale la pena. IMO.

Principalmente con i CSS tendo a prendere la conoscenza che ho imparato da siti precedenti e applicarlo ai nuovi siti, per fare codifica per tutti i browser facile :)

Answer 2

Io tendo ad usare elenco di definizioni tag per stile le mie forme

<form> 
    <dl> 

    <dt><label for="name">Name:</label></dt> 
    <dd><input name="name" /></dd> 

    <dt><label for="birthdate">Birthdate:</label></dt> 
    <dd><input name="birthdate" /></dd> 

    ... 
    </dl> 
</form> 

Io uso anche il seguente CSS:

FORM DT { 
    clear:both; 
    width:33%; 
    float:left; 
    text-align:right; 
} 

FORM DD { 
    float:left; 
    width:66%; 
    margin:0 0 0.5em 0.25em; 
} 

Maggiori informazioni qui: http://www.clagnut.com/blog/241/

E 'un sacco di markup, ma l'effetto è coerente ed efficace.

Un altro metodo accettabile di moduli per lo styling è l'utilizzo delle tabelle. Basti pensare al modulo come "dati tabulari interattivi".

Answer 3

Non utilizzerei un tag <p> per raggruppare un'etichetta e il relativo campo, poiché non è un paragrafo. Se non hai altri usi per <fieldset> potresti usarne uno per "riga". Se hai tre ingressi per il compleanno, un fieldset è del tutto appropriato.

Un elenco di definizioni suggerito da Gavin non è una cattiva idea, ma sembra un markup superfluo: puoi semplicemente applicare etichette e input alle larghezze corrette e renderle mobili.

L'aggiunta di classi wrapper è inoltre perfettamente valida. Ricordare che non è necessario utilizzarli in CSS, ma aggiungono uno strato semantico a prescindere. In alcuni casi potrebbe essere presente anche un microformat.

È inoltre possibile utilizzare i selettori di attributo per ingressi stile piacevolmente:

input[type="text"], input[type="password"] { 
    border: 1px solid #ccc; 
    background: #fff; 
} 
input[type="submit"], input[type="reset"] { 
    border: 1px solid #666; 
    background: #ccc; 
} 

Answer 4

Personalmente ho solo fare:

<form> 
    <label for="foo">Foo</label> 
    <input type="text" id="foo" name="foo" /> 
    <br /> 
    <label for="foo2" class="block">Foo 2</label> 
    <textarea id="foo2" name="foo2"></textarea> 
    <br /> 

Poi per css Dipende se o non voglio l'elemento per essere in linea con o no

form label.block{ 
    display: block; 
} 

oppure si può bloccare + galleggiare loro come @DisgruntledGoat ha scritto. (Io odio markup extra)

Answer 5

Dopo molti anni, sono arrivato a:

 
<fieldset> 
    <div> 
    <label for="Whatever">A text field</label> 
    <input type="text" id="Whatever" /> 
    </div> 
    <div class="required"> 
    <label for="RequiredField">A required field</label> 
    <input type="text" id="RequiredField" /> 
    </div> 
    <div class="stretch"> 
    <label for="LongField">A long field (stretched across 100% form width)</label> 
    <input type="text" id="LongField" /> 
    </div> 
    <div class="cmd"> 
    <button type="submit">Do whatever</button> 
    </div> 
<fieldset> 

Inoltre, ho due classi CSS che posso applicare:

 
fieldset div { 
    clear: both; 
} 

fieldset.block label { 
    display: block; 
    font-weight: bold; /* labels above fields */ 
} 

fieldset.aligned label:first-child { 
    width: 20%; 
    float: left; 
} 

fieldset.block .stretch input, 
fieldset.block .stretch textarea, 
fieldset.block .stretch select { 
    width: 100%; 
} 

fieldset.aligned .stretch input, 
fieldset.aligned .stretch textarea, 
fieldset.aligned .stretch select { 
    width: 79%; /* leave space for the label */ 
}