Css e div concatenati

[aasmdaa]

Se scrivo nel mio foglio di stile:

div#header div#box{
border:3px solid #C8C8C8;
font-size:2em;
margin-top:0px;
padding:0px;
width:200px;
}

div#content div#box{
border:1px solid #C8C8C8;
font-size:0.9em;
margin-top:30px;
padding:5px;
width:150px;
}

E poi nella pagina html:

<div id="header">
<div id="box">
lkdjfdslkjklf
</div>
</div>

<div id="content">
<div id="box">
lkdjfdslkjklf
</div>
</div>

I due box vengono correttamente formattati. Però il validatore mi dice che il div "box" è ripetuto. A questo punto è scorretto utilizzare la scrittura sul foglio di stile sopra? E' più corretto scrivere ad esempio:

div#box1{
border:3px solid #C8C8C8;
font-size:2em;
margin-top:0px;
padding:0px;
width:200px;
}

div#box2{
border:1px solid #C8C8C8;
font-size:0.9em;
margin-top:30px;
padding:5px;
width:150px;
}

Giusto o no?

[zoom]

un id è univoco in pagina.
quindi è scorretta la definizione che hai utilizzato tu nel caso il box sia sia in header che in content.

puoi usare una classe .box, sfruttando la stessa logica dei figli e dei padri del tuo esempio.

oppure puoi usare #box1 e #box2...

come sei più comodo

[pierofix]

Un suggerimento che apparentemente potrebbe non c'entrare nulla, ma che a mio avviso è importante: occorre scegliere sempre con cura i nomi degli id e delle classi.

Ricordiamo che (X)HTML è un linguaggio di marcatura, e come tale il suo scopo è attribuire significato. Ecco che questi nomi dovrebbero rispecchiare intelligentemente il significato dell'elemento che vanno a descrivere.

Quindi, non usare nomi asettici o legati all'aspetto visuale dell'elemento nella pagina. Nel caso di un menu di navigazione, ad esempio, meglio usare 'navigazione' piuttosto che 'fascia-sx': cosa succede se tra qualche giorno spostiamo il menù a destra?

A parte questo ultimo stupido esempio, pensare a queste cose non può far altro che migliorare ancor di più la qualità dei nostri documenti.

[aasmdaa]

Quindi non ha senso utilizzare questo metodo

div#header div#box{

che tra l'altro fa solo confusione nel foglio di stile ma è meglio fare

div#box

però è corretto questo?

div#box_c a{
display:block;
margin:10px 0px 0px auto;
}

per dare diverse formattazioni ai link ad esempio?

[pierofix]

Non capisco bene quali siano i dubbi in gioco. A parte tutto, hai provato a dare una letta a questo documento?

- www.w3.org/TR/CSS21/selector.html

Sono spiegati i cosiddetti selettori CSS, ovvero i diversi modi di puntare ad un elemento sfruttando l'albero della struttura di markup.

[aasmdaa]

il dubbio era se fosse corretto utilizzare questo metodo:

div#scheda img{
border:1px solid #000;
width:600px;
margin-right:20px;
float:left;
}

ad esempio per specificare la formattazione di una immagine all'interno del contenitore scheda.

oppure se fosse corretto usare questo:

div#scheda div#wowo{
border:1px solid #000;
width:600px;
margin-right:20px;
float:left;
}

ma in questo caso giustamente wowo è già univoco per cui non serve metterci davanti il div#scheda. Mentre credo che abbia senso se metto così invece:

div#scheda div.wowo{
border:1px solid #000;
width:600px;
margin-right:20px;
float:left;
}

Giusto?

[pierofix]

Mi pare tu stia tirando in ballo troppi elementi. Rimaniamo sul semplice e ragioniamo su questo:

<div id="contenitore">
   <div id="biscotto">
      

Ciao</p>
      [img]biscotto.gif[/img]
   </div>
</div>

Vai, sfogati con le domande!

P.S. Hai letto il documento sui selettori?

[aasmdaa]

Non l'ho letto perchè sto lavorando... comunque se mi dici che mi toglierà ogni dubbio (difficile!) smetto di fare domande probabilmente banali e me lo leggo stasera o domani...

Comunque intanto volevo sapere la risposta alla mia domanda sopra (Giusto?) in modo da iniziare a chiarirmi qualcosa.

Io uso il box model per cui in un caso del genere:

<div id="header">
bla bla
</div>
<div id="content">
<div id = "striscia">
bla bla bla
</div>
bla bla
</div>

Tutto è nato perchè volevo capire come fosse meglio scritto un CSS. Per cui se per ogni elemento specificare anche l'elemento superiore o meno.Ovvero

div#content{
border:1px solid #000;
width:600px;
margin-right:20px;
}

div#content div#striscia{
border:5px solid #000;
width:200px;
margin-right:20px;
}

Ok? ma è chiaro che striscia essendo univoco dovrebbe bastare:

div#striscia{
border:5px solid #000;
width:200px;
margin-right:20px;
}

Io invece i fogli di stile li scrivo nel primo modo per ricordarmi dove sono. Spero di essermi spiegato...a me interessava sapere se questo metodo crea problema di pesantezza o altro...

[pierofix]

Aaah, adesso ho capito. Guarda, in teoria basterebbe questo:

#striscia

Come hai detto tu, anteporre gli elementi genitori potrebbe aiutare a rendere più leggibile un file CSS, anche se ci sono altri - e forse migliori - accorgimenti, come ad esempio l'indentazione del testo o l'utilizzo di commenti.

Il documento che ti ho segnalato è fondamentale per comprendere queste cose. Facendo ricerche in rete, poi, sono sicuro troverai testimonianze di tantissimi professionisti e appassionati che condividono le proprie tecniche per rendere più intuitivo all'occhio umano il codice dei fogli di stile.

[aasmdaa]

Visto che sei un esperto approffitto per chiederti questo anche. Utilizzando il box model

<div id="container">
<div id="header">
</div>
<div id="content">
</div>
<div id="navigation">
</div>
<div id="footer">
</div>
</div>

se io volessi aggiungere una navigazione orrizzontale che compare dopo l'header è più corretto (o funzionale) metterlo all'interno dell'header (come fosse un figlio di header) oppure devo metterlo tra header e content? Faccio l'esempio:

<div id="container">
<div id="header">
<div id="navigazione_orrizzontale">
</div>
</div>
<div id="content">
</div>
<div id="navigation">
</div>
<div id="footer">
</div>
</div>

oppure:

<div id="container">
<div id="header">
</div>
<div id="navigazione_orrizzontale">
</div>
<div id="content">
</div>
<div id="navigation">
</div>
<div id="footer">
</div>
</div>

quale delle 2 è più corretta?