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

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Jag använder aldrig class, är det fel? (https://www.wn.se/forum/showthread.php?t=29732)

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 :D

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? :D 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. :D

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

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 :D(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.

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!

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

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/

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. :)

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>

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.

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

Citat:

Originally posted by terbon@Jul 14 2008, 12:56
Fast det finns ju också Dean Edwards IE7.js och IE8.js

I IE7+ fungerar de flesta enklare css-reglerna, t.ex. de som jag visat ovan utan några hack.

Jag tror nog det är bra att försöka undvika speciallösningar och hålla sig till vad aktuella versioner av de vanligaste webbläsarna klarar av.

Ja, fast om din användare väljer en sämre browser, borde du väl iallafall ge de möjlighet till att ha samma upplevelse? Bara det att de har lite långsammare.
Man kan ju ha en sån "uppdatera din webbläsare" sak så att det funkar? Jag menar seriöst, man gör de som har IE en tjänst genom att lägga in den om sidan kräver det.

Du vill ju inte att de ska få en dålig upplevelse av din sida, och säga att den är ful?
tänk om du har ex:

Kod:

#menu ul li:after

{

  content: " | ";

}

#menu ul il:last-child:after

{

  content: "";

}

utan det hade ju länkarna hamnat rätt på varrandra, eller hur? Mm man kör utan margin och så, och bara vill ha en meny som ser ut ungefär "Home | Info | Contact".
Utan det hade det ju sett ut såhär: "HomeInfoContact" . Det vore väl lite synd?

Citat:

Ursprungligen postat av terbon

Man kan ju ha en sån "uppdatera din webbläsare" sak så att det funkar? Jag menar seriöst, man gör de som har IE en tjänst genom att lägga in den om sidan kräver det.

Nej, meddelanden av typen "Skaffa ny webbläsare" tycker jag inte är lämpligt (även om det var i IE som trenden började).

Citat:

Ursprungligen postat av terbon

Utan det hade det ju sett ut såhär: "HomeInfoContact" . Det vore väl lite synd?

Jag skulle inte använda varken :after (som inte fungerar i IE7) eller :last-child (som är css3 och bara fungerar halvdant i de flesta webbläsare) eftersom stödet inte är så väl utbyggt i de flesta webbläsare. De exempel jag gav ovan är alla exempel som gör det lite snyggare i webbläsare som stöder css2 men som inte förstör läsligheten eller "förståligheten" i äldre webbläsare - de ignorerar bara de förfinande dragen.

(Däremot är väl ditt exempel ett bra exempel på vad vi kan åstadkomma med mer avancerad css och vad som kommer med css3…)