CSS rot! Trenger veiledning til struktur

[WillY-]

Jeg føler alltid at CSS-en min ender opp i et rent kaos! Har lest en del tuts om det, men når det gjelder struktur, så feiler jeg Tror et stort problem er at jeg ikke helt har skjønt forskjell på ID og CLASS. Hva er egentlig poenget med ID? Skjønt det sånn at det er for ett unikt element på sida. Men hvorfor ikke bare bruke CLASS?

 

Her har dere feks 2 av CSS filene mine til et prosjekt jeg jobber med nå:

 

Main bruker jeg på alle sidene mine, som "default" på en måte

@charset "utf-8";
/* Main */

* {
 margin: 0;
 padding: 0;
}

body {
 font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: black;
 background: white;
}
ul, li{
   list-style-type: none;
   list-style-position: outside;
   list-style-image: none;
   padding: 0px;
   margin: 0px;
}
a{
color:#cccccc;
}
a:visited{
color:#cccccc;
}

#error {
text-align:center;
background:#FF6F6F;
padding:10px;
/*border:#D20000 solid 1px;*/
}
#success {
text-align:center;
background:#84FF84;
padding:10px;
/*border:#00D200 solid 1px;*/
}

#footer{
margin-top:50px;
text-align:center;
}

 

Og den her er mer spesifikt retta mot akkurat denne sida:

@charset "utf-8";
/* Course Styles:*/

body{
   margin: 8px;
   background: #3B3B3B;
}
td{ 
   padding: 4px;
   border:#000 solid 1px;
}

h2{
   color:#ffcc00;
   font-size:1.3em;
}

#divs {
   margin: 4px;
}

/*
* Session list styles:
*/
.sessionList{
   border: black solid 1px;
   text-align:left;
   float:left;    
   padding: 1px;
   width: 245px;
}
.sessionList a{ /*Be sure to match the size of the li*/
   color: black;
   text-decoration: none;        
}
.sessionList a:hover{
   color:#757575;
}
.sessionList a:active{
   color:#ffcc00;
}
.sessionList li{
   padding: 4px;
   height: 50px;
   margin-bottom: 2px;
   background: white;
}
.sessionList a img{
   display:block;
   float:left;
   margin-right:5px;
   border: none;
}
.sessionList p{
   margin-top: 5px;
   display:block;
   float:left;
}

/*
* Slide styles:
*/
#slideDiv{
   position: relative;
   border:black 1px solid;
   width: 99%;
   height: 340px;
   padding: 2px;
   background: #CCC;
}
#slideDiv #slidePrev{
   cursor:pointer;
}
#slideDiv #slideNext{
   cursor:pointer;
}
#slideDiv input{
   margin: 3px;
}
#slideDiv td, #slideDiv th{
   padding: 5px;
   border:none;
}
#slideDiv #section{
   width: 100%;
   height: 320px;
   overflow-x: auto;
   overflow-y: scroll;
   background: white;
}
#slideDiv #section li{
   float: left;
   height: 300px;
   width: 97%;
   padding: 10px;
   border-bottom: black solid 1px;
   clear: both;
}
#slideDiv #section li img{
   display: block;
   float:left;
   margin-right: 10px;
}
#slideDiv #quizDiv{
   float:left;
   width:200px;
   margin:5px;
}
#slideDiv #quizDiv p{
   margin-bottom: 5px;
}
#slideDiv #quizDiv input{
   margin: 4px 5px 0 10px;
}
#slideDiv #submitButton{
   padding: 2px;
   font-size: 1.2em;
   font-weight: bold;
}

/*
* Result screen:
*/
#resultScreen{
   margin: 50px auto;
   background: white;
}
#resultScreen td{
   text-align: center;
   vertical-align: middle;
}
#resultScreen p{
   text-align: center;
}
#resultScreen a{
   margin-top: 5px;
   font-size: 1.5em;
}

(ikke le )

 

Som dere ser, ender jeg med voldsomt mange definisjoner etterhvert.

Også et problem jeg har kommet over nå, er at jeg har en unsortet list i en unsortet list, med stylen "#slideEditDiv li" for parent ul-en. Men jeg får ikke overrida den ul-en inni med sin egen style (feks #formEditMode li"). Vet at jeg kunne brukt !important, men føler jeg gjør noe galt her.

 

Trenger litt kritikk på CSS-en min

Endret 8. september 2011 av WillY-

[WillY-]

Help!

[Occi]

CSS tar mye plass. Så ikke igjennom alt, men virket ikke som om du trengte det her etter å ha kikket fort over; men du kan altså legge sammen ting når du definerer diverse på siden:

a, p{
margin-left: 20px;
}

[WillY-]

Så, når velger man å bruke class isteden for id?

[Thomas.]

Så, når velger man å bruke class isteden for id?

 

Om jeg ikke husker helt feil:

Id er kun hvis det er en av det elementet på siden.

Class er hvis det er flere av samme element på samme side.

[Occi]

Så, når velger man å bruke class isteden for id?

Om jeg ikke husker helt feil:

Id er kun hvis det er en av det elementet på siden.

Class er hvis det er flere av samme element på samme side.

Det er riktig. Merk at du kan ha en id som går igjen om den er på forskellige filer, men det er uansett grei vane å bruke class hvis det er tilfellet.

[WillY-]

Ok så bare bruke id på unike elementer, og class ellers?

[Occi]

Stemmer. F. eks en logo i header kan være en id, mens en <a>-tag i en navigation kan være class.

[phenalor]

Jeg skal ikke si noe helt sikkert, men jeg har forstått det slik at class brukes til css. Id er som nevnt kun for unike elementer, og skal etter min mening bare brukes der det om det er snakk om javascript.

 

De to gjør jo det samme uansett

[Runar]

Jeg skal ikke si noe helt sikkert, men jeg har forstått det slik at class brukes til css. Id er som nevnt kun for unike elementer, og skal etter min mening bare brukes der det om det er snakk om javascript.

Helt feil. ID kan fint brukes til CSS på lik linje med klasse.

[WillY-]

ID kan brukes på samme måte som class i CSS fila ikke sant?

[Runar]

ID kan brukes på samme måte som class i CSS fila ikke sant?

Ja, men du kan kun bruke ID én gang i HTML-dokumentet. Kun ett element kan ha en ID.

[phenalor]

Jeg sa aldri at det ikke gikk, men jeg ser ikke grunnen til å bruke id når Class gjør akkurat det samme, uten begrensninger.

[Occi]

For å lettere å skille mellom om et element er flere steder på en side eller ei. Kjekt mtp. CSS.

[JohndoeMAKT]

Samt at en redraw er potensielt hundrevis av ganger raskere.

 

Den beste grunnen er dog fordelene du får av å blande logikk og semantikk i reglene. Mangel på dette er muligens grunnen til at du alltid ender opp med hva du kaller kaos. Kan noen lese din CSS-fil og i hodet se for seg hvordan siden ser ut, uten å ha lest tilhørende HTML? Å kunne gjøre det er ett av idealene jeg personlig strever etter å nå når jeg skriver CSS for jeg vet at når jeg om 18 mnd skal endre en vilkårlig regel har jeg lyst til å bruke fem sekunder på å finne den og ved å lese hvor og hvordan den er definert vet jeg utfallet av å endre regelen.