hvordan holder dere orden i CSS-dokumenter

[Ethernet]

Hei!

 

 

Tenkte folk kunne vise frem/spørre om CSS her.

 

Post eksempler, og forklaringer på hvordan ting gjøres.

 

Hjelp til CSS stilles også her.

 

Endret 18. mai 2007 av Ethernet

[ze5400]

Strengt tatt er da ikke andres CSS ark til store nytten, da de ofte er tilpasset siden de hører til som for i raggsokk.

[Torjus]

Hva med at folk heller komme med tips til hvordan man kan holde et CSS ark rent og oversiktlig?

[Ethernet]

Hva med at folk heller komme med tips til hvordan man kan holde et CSS ark rent og oversiktlig?

8628963[/snapback]

Ok, oppdatert første post

[Moonshine]

Dette har jeg funnet å være helt genialt: Indentering av hvert nivå av en klasse. Altså:

 

div.klasse

->div.klasse ul

->->div.klasse ul li

->->->div.klasse ul li a

 

Da finner du lettere frem, og alt ser mer oversiktlig ut. Kan sees i action her:

http://bgk.no/wp-content/themes/bergengolfklubb/style.css (sikkert masse feil, men skitt au)

 

[Matsemann]

Skift emnetittel til hvordan holder dere orden i CSS-dokumenter, eller deres CSS-syntax eller noe.

 

En stor tråd der man spør om alt eller bare viser frem en CSS blir bare rot.

[Torjus]

Noen som har tips til hvordan man skal gruppere i CSS fila?

 

Feks:

Meny

Footer

 

osv.

 

Også hvordan lage en slags overskrift i CSS'en? Nå bruker jeg bare:

/* MENY*/ og det ikke så lett å se når man har mye i CSS'en. Noen tips?

[Kiman™]

Jeg skriver gjerne:

/*Meny-----------------------------------------------------------------------------------*/

 

Dette gjør det lett å finne igjen, for når jeg ser en lang strek i CSS dokumentet, så vet jeg at det er starten på et nytt element/en ny del av nettsiden.

[Ståle]

Jeg bruker underscore, da ser det ut som en linje, mer enn mange streker

http://stale.nl/inc/css/master.css

[Kiman™]

Jaja, men det blir da nesten akkurat det samme Poenget er jo at man lett ser den lange linjen

[Runar0]

Prøver og å skilje høgde, bredde og posisjon frå tekst farge, størrelse og familie osv med linjeskift.

 

#menu a {
  width: 150px;
  height: 100px;

  background-image: url('bilder/meny_bg.png');

  color: #FFF;
  font-size: 14px;
  font-family: Verdana;
}

[Arve Systad]

Det med å skilje ulike typar eigenskapar med linjeskift ser eg på som ein ubrukelig måte å skape orden på;

 

Ein stilregel blir aldri så full av ting så lenge du har kun ein deklarasjon på kvar linje at den blir uoversiktlig. Alle dei ekstra linjeskifta vil derimot kunne få stilarket som heilhet til å sjå forferdelig ut.

 

Det er iallefall mi meining.

[Lovskogen]

Jeg driver litt med Modular CSS, altså deler ting opp i flere stilark. Men, jeg vil nok si at jeg er for dårlig til å skrive generelle styles, spesifiserer alt for mye. Designalized.com / style.css

[Stian Jacobsen]

https://www.diskusjon.no/index.php?showtopic=748260&hl=

[Loomy]

Store, saftige overskrifter som skiller de ulike delene fra hverandre:

/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/

...


/* -----------------------------------*/
/* ---------->>> LAYOUT <<<-----------*/
/* -----------------------------------*/

...



/* ---------------------------------*/
/* ---------->>> MENY <<<-----------*/
/* ---------------------------------*/

...


/* ---------------------------------*/
/* --------->>> EXTRAS <<<----------*/
/* ---------------------------------*/

...

/* -------------------------------*/
/* --------->>> FORMS <<<---------*/
/* -------------------------------*/

...

 

Bruke også litt indentering ala det Jonas Drange nevnte der det er en tydelig gruppering (f.eks hvis jeg har en klasse/id for hvert element i menyen)

[Kim T]

Den der var nice Loomy. Ser helt klar at det der kan være en mye bedre ting å gjøre enn det jeg gjør... Dvs det samme som beskrevet over her....

 

kimthoma.

[robgar]

Jeg har pleid å ha underligggende elemter sammen ved tab forskyvning.

 

e.g

div.stuff
           div.stuff u 

 

osv slik som tidligere nevnt.

 

Likte ideen om å dele stilarket inn i flere ark, for de kan fort bli litt store og uoversiktlige.

Endret 20. mai 2007 av robgar

[Alex Moran]

Jeg liker å ha flere stilark og identering type Jonas Drange.

 

stilarkene setter jeg opp sånn her:

• css/typography.css - Typografi
  
• css/structure.css - sidestruktur
  
• css/navigation.css - navigasjon, både hoved -og sub
  
• css/forms.css - Former, input, tekstfelter ++
  
• css/misc.css - Andre ting som blockquote, code, pre o.l.
  
• /style.css
  

/* style.css */
@import "css/structure.css"/**/;
@import "css/typography.css"/**/;
@import "css/navigation.css"/**/;
@import "css/forms.css"/**/;
@import "css/misc.css"/**/;

* {
margin: 0;
padding: 0;
}

[Jesper Karsrud]

Jeg er vel igrunn ikke konsekvent nok på hvordan jeg fikser på stilarkene mine, men det går mye i det som har blitt nevnt her nå. Det går mye i modulær CSS, med tydelige overskrifter for å skille de forskjellige elementene på siden fra hverandre, men det er mest her jeg ikke er konsekvent nok. Føler ikke alltid at det er nødvendig å skille elementene fra hverandre når jeg bruker modulær CSS, så da blir det som det blir.

[fakey]

På toppen har jeg alltid @import, *, html, og body.

 

Dermed har jeg layout som er hoved div'ene.

 

- Meny

- Heading

- Paragraphs

- Lists

- Forms osv.