Jag använder aldrig class, är det fel?

Hjalmarsson · 2008-06-27, 10:15

OjOj! här var det allt livat.

Håller mig till huvud inlägget så får ni andra fortsätta eran livad diskusison.

Först och främst undvik "inline styles" (css i markupen), pga grund av som någon annan tidigare nämnt för "specificityn", tänk på dom som måste modifiera skiten! det är ett jävla helvete

Man strävar väl efter en väl utformat sida så optimal som möjligt att bara använda ID's då är inte optimalt. kan dra till med ett kod exempel också.

Då gäller det att sätta en "active" tab/meny länk, istället då för att behöva böka till det med att sätta en klass på enskilt element på enskild sida så är det väl lite smidigare att bara definera det i bodyn.

Blir ju ännu smidigare om man då kör med ett backend också som includerar tex din "header", dynamiskt och sköter sig självt.

.CSS

Kod:

/* defining active nav buttons in our body element */
body.about #about,
body.executive_team #executive_team,
body.partners #partners,
body.network_coverage #network_coverage,
body.product_and_services #product_and_services,
body.contact #contact{
	background-position: 0 -42px;
}

.HTML

Kod:

<body id="index" class="about">
	
	<ul id="mainNav">
   <li><a id="about" href="sub-page.htm">Home</a></li>
   <li><a id="executive_team" href="sub-page.htm">Location</a></li>
   <li><a id="partners" href="sub-page.htm">Facilities</a></li>
   <li><a id="network_coverage" href="sub-page.htm">Activities &amp; Attractions</a></li>
   <li><a id="product_and_services" href="sub-page.htm">Gallery</a></li>
   <li><a id="contact" href="sub-page.htm">Gallery</a></li>
	</ul>

Kan bli en smula mer kod, men är det värt det? användarvänlighet mot några bytes?

klart som fan det är.

Nu när du skriver en guide så tycker jag du ska inrikta dig i tankesättet bakom css istället alldeles för som så många andra uppmanar folk att definera allt som finns i markupen, som när man själv började(de var ett par år sen) vart man ju galen på "specificityn", så att där tycker jag du ska starta tillsammans med "decadent selectors".

CSS är inte avancerat bara det att folk har en tendens att göra det svårare genom att ta genvägar istället för att ha en fin och trevlig "markup" (så det inte blir nå påhopp, så menar jag ju att det går hand i hand^^).

Förlåt för alla engelska termer, är inte varje dag man diskuterar det på svenska.

tartareandesire · 2008-06-27, 12:50

Citat:

Ursprungligen postat av Hjalmarsson

Först och främst undvik inline styles (css i markupen), pga grund av som någon annan tidigare nämnt för specificityn, tänk på dom som måste modifiera skiten det är ett jävla helvete

Citat:

Ursprungligen postat av Hjalmarsson

Förlåt för alla engelska termer, är inte varje dag man diskuterar det på svenska.

Va? Din svenska som är så vacker =)

Akta dig så du inte blir ytterligare en viktigpetter

Hjalmarsson · 2008-06-27, 14:21

Citat:

Ursprungligen postat av tartareandesire

Citat:

Originally posted by -Hjalmarsson@Jun 27 2008, 10:15
Först och främst undvik inline styles (css i markupen), pga grund av som någon annan tidigare nämnt för specificityn, tänk på dom som måste modifiera skiten det är ett jävla helvete

Citat:

Ursprungligen postat av Hjalmarsson

Förlåt för alla engelska termer, är inte varje dag man diskuterar det på svenska.

Va? Din svenska som är så vacker =)
Akta dig så du inte blir ytterligare en viktigpetter

Håller med svordomar är fint, bara dom sägs rätt och till rätt person

(nu var det dock inte till nån enskilt person men iaf), gillar dock särskrivningen mer, "pga grund av" hur lyckas man? ^^

Smällen man får ta isf, för att bidra lite kunskap åt folket i guess.

terbon · 2008-07-10, 22:16

Men shit! Ni behöver i näst intill INGA fall en klass på en vanlig webbsida.

Ge mig gärna ett bra exempel på när det behövs.

Kom åt saker genom #content #news-ticker ul o.s.v. istället, var specifika. HA REN KOD!

tartareandesire · 2008-07-10, 22:53

Citat:

Originally posted by terbon@Jul 10 2008, 22:16
Men shit Ni behöver i näst intill INGA fall en klass på en vanlig webbsida.
Ge mig gärna ett bra exempel på när det behövs.
Kom åt saker genom #content #news-ticker ul o.s.v. istället, var specifika. HA REN KOD

Nu är du ute och cyklar. Diskussionen har inte särskilt mycket med ren kod att göra utan det handlar mest om ren funktionalitet. Det är väldigt ofta bra med klasser när det gäller formatering. Id är främst av intresse när det gäller den övergripande layouten samt när man behöver komma åt elementen via Javascript

wizzo · 2008-07-11, 10:22

Citat:

Originally posted by Thir13teen@Jun 5 2008, 03:05

Grejen är att jag skriver en guide om CSS för nybörjare och det vore så mycket skönare kunna att skriva "använd ID" istället för "använd ID då och då och annars Class" i denna guide där läsaren redan har fullt upp med att lära sig nya saker.

Keep 'em coming.

Av alla CSS tutorials som jag har läst dem senaste 3 åren så har jag svurit hela vägen på CSS. Tills jag fick tips om hemsidan htmldog.com. Som CSS nybörjare skulle jag ha undvikit massor av problem om jag fick den här i handen före alla andra guider på nätet.
http://www.htmldog.com/guides/cssintermediate/classid/

dAEk · 2008-07-11, 12:51

Citat:

Originally posted by terbon@Jul 10 2008, 22:16
Men shit! Ni behöver i näst intill INGA fall en klass på en vanlig webbsida.

Ge mig gärna ett bra exempel på när det behövs.

Kom åt saker genom #content #news-ticker ul o.s.v. istället, var specifika. HA REN KOD!

Det finns lägen då id:n är rätt och det finns lägen då klasser är bättre. Det finns inget svar som gäller för alla typer av sidor. Jag tycker att man kan jämföra med OOP, tänket alltså. Med klasser kan man ärva och abstrahera så att koden blir lättare att både läsa och underhålla. Men det är kanske en smaksak.

I övrigt håller jag med tartareandesire.

terbon · 2008-07-14, 10:37

Jag försöker alltid följa http://exscale.se/archives/2007/11/2...id-per-module/ . Detta är mest för att du i väldigt många fall inte behöver en klass, utan kan komma åt de genom att ha nästlade id:n, med ex. p-taggen.

Varför ha det såhär:

Kodexempel1
CSS
#top {
background-color: #ccc;
padding: 1em
}

.intro {
color: red;
font-weight: bold;
}

HTML
<div id="top">

<h1>Chocolate curry</h1>

<p class="intro">This is my recipe for making curry purely with chocolate</p>

<p class="intro">Mmm mm mmmmm</p>

</div>

När du kan ha det såhär:
CSS
#top {
background-color: #ccc;
padding: 1em
}
#top p {
color: red;
font-weight: bold;
}

HTML
<div id="top">

<h1>Chocolate curry</h1>

This is my recipe for making curry purely with chocolate</p>

Mmm mm mmmmm</p>

</div>

martine · 2008-07-14, 11:04

Citat:

Originally posted by terbon@Jul 14 2008, 10:37
Jag försöker alltid följa http://exscale.se/archives/2007/11/25/one-...-id-per-module/ . Detta är mest för att du i väldigt många fall inte behöver en klass, utan kan komma åt dem genom att ha nästlade id:n, med ex. p-taggen.

Bra exempel, i allmänhet verkar css-kunskaperna vara ganska usla verkar det som.

Det finns så mycket mer man enkelt kan åstadkomma.

Exempelvis:
Länkar (inte ankare) som inte ligger i textblock

Kod:

div>a[href] {display: block; text-decoration: none; border-bottom: 1px dotted red}

Första stycket efter h1-rubrik i contentdelen ska vara i fetstil och med större avstånd:

Kod:

div#content h1+p {margin: 1em 0; font-weight: bold}

h2-rubriken ska vara dubbelt så stor om den är första innehållet:

Kod:

div#content h2:first-child {font-size: 200%}

Egentligen kan man göra nästan hur komplicerade regler som helst nästan helt utan att använda class. Enda nackdelen är att mer avancerad css inte fungerar i IE 6 men de som fortfarande använder IE6 brukar inte vara så kräsna användare så det ställer sällan till problem.

terbon · 2008-07-14, 12:56

Citat:

Originally posted by martine@Jul 14 2008, 11:04
Egentligen kan man göra nästan hur komplicerade regler som helst nästan helt utan att använda class. Enda nackdelen är att mer avancerad css inte fungerar i IE 6 men de som fortfarande använder IE6 brukar inte vara så kräsna användare så det ställer sällan till problem.

Fast det finns ju också Dean Edwards IE7.js och IE8.js http://code.google.com/p/ie7-js/ . Funkar bra.. tänk på att sätta en sån

Kod:

  <!--[if lt IE 8]>
  <script src="js/IE8fix.js" type="text/javascript"></script>
  <![endif]-->

Funkar helt perfekt, det kan sega ner sidan väldigt lite, men detta isåfall för de som använder sopiga browsers

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Jag använder aldrig class, är det fel?