Organisering av innhold i stilark

[spock84]

Har etter hvert fått et stilark på rundt 400 linjer (sikkert noe overflødige greier der også), som vel gjerne ikke er så ekstremt mye, men allerede merker jeg at jeg fort mister litt oversikta. Har plassert felles greier først og så side-spesifikke greier. Er det kanskje en bedre idé å dele det opp i flere filer? Evt. ordne alt alfabetisk, heller enn etter bruksområde? Hva gjør du?

[Jernlov]

Jeg har først sånne ting som "*" og "body" først, så "divs", så "h's" så "li's" osv Blir teit å drive å dele opp i flere ark, unødvendig.

[memix]

Jeg har delt opp i noen få stilark, har et for artiklene, et for design og et til former Mulig det er unødvendig, men jeg liker at ting er oversiklig

[gozzer]

Det du kan gjøre er jo å sortere etter type elementer, og kommentere ut en overskrift av et slag. F.eks. "linker", "paragrafer", "headere", osv ...

[Jesper Karsrud]

Det jeg gjorde tidligere var å kommentere deler av stilarket inn i forskjellige deler.. Nå derimot har jeg fire-fem forskjellige stilark. Et som kun inneholder *, body og html, og som inkluderer alle de andre stilarkene. Dermed linker jeg til kun ett av stilarkene i HTML-dokumentet mitt, men har flere forskjellige til forskjellige ting. Ett til tekstformattering, ett til layout, ett til lister etc. Varierer litt fra side til side også, egentlig, men alt i alt ligger det på rundt 3-4 forskjellige stilark.

[qualbeen]

vær forsiktig med omorganisere ting og tang. hvis ett element "kaller på" to ulike css-stiler (som begge inneholder spesifisering av f.eks. margin), vil nederste punkt i css-dokumentet gjelde.

 

Putt derfor alltid *{ ... } på toppen, og etter det body{ ... }!

[-Teddy-]

Jeg kjører alt inn i ett stilark. Markerer egne kategorier for typografi, lenker, layout, diverse osv nedover.

 

Typisk css ark fra meg:

 

/* ----------------------
   ULYSSEYS CLUB NORWAY
  ---------------------- */


/* ----- 
       DIVERSE
       -------- */
*{
margin: 0px;
padding: 0px;
}

body{
background: url(images/bakgrunn.gif) white no-repeat top left;
}

.borte{
display:none;
}

#innhold{
width: 550px;
position: absolute;
top: 450px;
left: 420px;
padding-bottom: 1em;
}

#bilder{
width: 300px;
position: absolute;
top: 550px;
left: 80px;
padding-bottom: 1em;
}

#bilder img{
border: 2px solid #000;
 }

#footer{
display: block !important;
display: none;
height: 8px;
width: 100%;
background: #520000 bottom;
position: fixed;
bottom: 0;
left: 0;
}

#kolonne1, #kolonne2{
width: 110px;
float: left;
 }

#kolonne3{
width: 200px;
float: left;
 }

#kolonne4{
float: right;
 }
 
#tid{
width: 60px;
float: left;
 }

#dato{
width: 90px;
float: left;
 }

#hvor{
width: 200px;
float: left;
}

.nyhet{
padding-top: 1em;
padding-bottom: 1em;
}

/* -----
       LENKER
       ------- */

a:link{
text-decoration: underline;
color: #8c8c8c;
}

a:visited{
text-decoration: underline;
color: #8c8c8c;
}

a:hover{
text-decoration: underline;
color: #520000;
}

a:active{
text-decoration: underline;
color: #8c8c8c;
}

/* -----
       TYPOGRAFI
       ---------- */

h1{
font-size: 13pt;
font-family: verdana;
margin-bottom: 1em;
color: #520000;
}

h2{
font-size: 11pt;
font-weight: bold;
margin-bottom: 1em;
font-family: verdana;
}

h3{
font-size: 12pt;
font-weight: bold;
margin-bottom: 1em;
 }

h4{
font-size: 11pt;
font-family: verdana;
margin-bottom: 1em;
color: #520000;
font-weight: bold;
 }

p{
margin-bottom: 1em;
 }

#innhold{
font-family: tahoma, verdana, arial;
font-size: 11pt;
 }

dd{
margin-left: 1em;
margin-bottom: 1em;
 }

ul{
list-style: none;
 }

li{
margin-bottom: 1em;
 }

.info{
font-style: italic;
font-size: 10pt;
color: grey;
}

/* -----
       LAYOUT
       ------- */

#header{
width:580px;
height: 313px;
background: url(images/header.gif);
position: absolute;
top: 0px;
left: 0px;
}

#to{
width: 398px;
height: 277px;
background: url(images/to.gif);
position: absolute;
top: 0px;
left: 580px;
}

#nyheter{
width: 104px;
height: 75px;
background: url(images/nyheter.gif);
position: absolute;
top: 277px;
left: 580px;
}

#tre{
width: 487px;
height: 32px;
background: url(images/_03.gif);
position: absolute;
top: 313px;
left: 0px;
}

#lenker{
width: 93px;
height: 75px;
background: url(images/lenker.gif) top;
position: absolute;
top: 313px;
left: 487px;
}

#seks{
width: 371px;
height: 41px;
background: url(images/_06.gif);
position: absolute;
top: 345px;
left: 0px;
}

#klubbinfo{
width: 116px;
height: 77px;
background: url(images/klubbinfo.gif) top;
position: absolute;
top: 345px;
left: 371px;
}

#atte{
width: 229px;
height: 44px;
background: url(images/_08.gif);
position: absolute;
top: 386px;
left: 0px;
}

#aktiviteter{
width: 142px;
height: 91px;
background: url(images/aktiviteter.gif) top;
position: absolute;
top: 386px;
left: 229px;
}

#tolv{
width: 123px;
height: 33px;
background: url(images/_12.gif);
position: absolute;
top: 430px;
left: 0px;
}

#kontakt{
width: 106px;
height: 73px;
background: url(images/kontakt.gif) top;
position: absolute;
top: 430px;
left: 123px;
}

#fjorten{
width: 45px;
height: 82px;
background: url(images/_14.gif);
position: absolute;
top: 463px;
left: 0px;
}

#hjem{
width: 78px;
height: 71px;
background: url(images/hjem.gif) top;
position: absolute;
top: 463px;
left: 45px;
}

#disgrace{
width: 294px;
height: 75px;
background: url(images/disgrace.gif);
position: absolute;
top: 277px;
left: 684px;
}

#ow{
width: 104px;
height: 36px;
position: absolute;
left: 580px;
top: 352px;
background: url(images/ow.gif);
}

#hjem:hover, #kontakt:hover, #aktiviteter:hover, #klubbinfo:hover, #lenker:hover, #nyheter:hover{
background-position: bottom;
 }

#mailboks{
position: absolute;
top: 180px;
left: 0 px;
 }

 

[Loomy]

5 Tips For Organizing Your CSS