CSS rašymo stilius

Selektorių pavadinimai

Rašydamas CSS selektorius programuotojas gali pasirinkti pavadinimą klasių ir id atributams. Deja neretai pasirenkami ne itin tinkami pavadinimai, kurių sudarymo taisyklės čia ir aptariamos.

Semantiniai vs struktūriniai pavadinimai

Semantiniai pavadinimai apibūdina, o ne tiksliai apibrėžia koks turinys juose saugomas. Tuo tarpu struktūriniuose pavadinimuose nurodoma kur toks elementas yra puslapyje ar kaip jis atrodo.

Struktūriniai pavadinimai yra blogis ir geras programuotojas neturėtų jų naudoti (nebent penktadienis ir labai tingisi). Blogumas slypi tame, kad stilius yra toks dalykas, kuris dažnai keičiasi ir bėgant laikui pavadinimai ima neatitikti aprašomo stiliaus. Kaip pavyzdį galima pateikti klasės pavadinimą .left-sidebar. Kai nuspręsite savo “sidebar” perkelti į dešinę, turėsite pervadinti ir klasę, tačiau tingėsite…

Kartais nepatyrę programuotojai sugalvoja semantiškai pavadintas klases panaudoti nesemantiškai. Kaip pavyzdį galima pateikti pranešimams skirtos klasės panaudojimą antraštei, nes border atributas ten labai gražiai atrodo… Taip daryti negalima! Jeigu antraštei tinka rėmelis iš pranešimams skirtos klasės, nukopijuokit norimą atributą į antraštės stiliaus aprašą. Antraip turėsite labai daug problemų kai reikės pakeisti pranešimų stilių ir ne būtinai rėmelį: jeigu nuspręsime pranešimus perkelti į viršų (position: absolute; top: 0;) netikėtai pakils ir antraštė.

Labai blogi klasių pavadinimai, NIEKADA TOKIŲ NENAUDOKITE!:

  • .black { color: #000000 }
  • .padding-bottom-05em { padding-bottom: .5em;}
  • .bg-white { background-color: #ffffff; }
  • .display-block { display: block;}

Pagrindinė pateiktų pavyzdžių problema yra ta, kad nėra jokio skirtumo ar tokį stilių aprašysite style atribute ar iškelsite į atskirą css failą. Kas jeigu nuspręsite, kad juoda spalva netinka? Teks pereit per visus failus ir pakeisti klasių pavadinimus į .RedlikeWithYellowTint? Kuo tai skiriasi nuo perėjimo per failus keičiant style atributo reikšmę? O gi tuo, kad papildomai reikės pereiti ir per css failus… O kas bus jei į tokią klasę reiks pridėti su spalva nesusijusių atributų, vėl reikės keisti pavadinimą?

Renkant pavadinimą selektoriui būtina atsižvelgti į jo funkciją puslapyje, o ne išvaizdą ar vietą, nes būtent šie parametrai ir yra aprašomi stiliaus faile ir jie turi didelę tikimybę keistis.

Geras selektoriaus pavadinimas yra toks, kad jį perskaičius galima nesigilinant į kodą ir nenaudojant naršyklės derinimo įrankių nuspėti kuriam elementui stilius yra taikomas, pvz: #header - stilius taikomas antraštei, .copyright-notice — stilius kopijavimo teisių pranešimui.

Elementai vietoj klasių

Išmokit HTML elementus! Nedėkit antraštės į div elementą, turintį class=”h1”. Atsiminkit, kad HTML skirtas ne elementams išdėlioti (tam skirtas css), o semantiškai pateikti informaciją, t.y. taip, kad googlis suprastų.

!important naudojimas

!important gerai parašytame kode turėtų nefigūruoti. Jis buvo sukurtas tam, kad vartotojai galėtų pasikeisti svetainių stilių į labiau pritaikytą neprimatantiems skaitytojams, t.y. naudojimui user.js ir user.css failuose. Kartais programuotojai tingėdami arba negalėdami nurodyti didesnio specifiškumo, vis dėlto jį įtraukią į rašomą kodą, tačiau tai sukelia problemų:

  • Stilių tampa labai sunku taisyti. Jeigu kolegai programuotojui reikia perrašyti atributą kitoje taisyklėje, jis nusiraus nemažai plaukų, kol supras kodėl neveikia jo kodas. Jam neliks nieko kito, kaip tik taisyti blogojo programuotojo paliktą !important arba jį pačiam pridėti prie savo atributo. Pastaruoju atveju pamažu visame kode bus pradėta naudoti !important ir vėl grįžta prie nemokėjimo užrašyti tinkamą specifiškumą turinčios taisyklės problemos.
  • Vartotojai, naudojantys prieinamumą gerinančią programinę įrangą negalės pasinaudoti jos teikiamomis galimybėmis.
  • Bus apsunkintas labiau patyrusių vartotojų darbas rašant user.css ir user.js failus (nes !important perrašo ir style atribute užrašytą stilių).

Visgi, yra atvejų kai !important naudojimas yra neišvengiamas:

  • Rašant css’ą ne savo HTML’ui. Kartais tenka perrašyti stilių aprašytą style atribute (internete plačiai paplitęs “puikiojo” Sharepoint pavyzdys.
  • Taisant jQuery ar kitos bibliotekos prastų pluginų generuojamo HTML į style įrašytą stilių.
  • Darant IE hackus. IE hakai neturėtų būti daromi, IE iš vis turėtų nebūti palaikomas.

Atsiminkite: egzistuoja tikimybė, kad už kiekvieną !important panaudojimą Čiakas Norisas gali Jums nukirsti po pirštą, todėl kiekvieną kartą prieš naudodami šį velnio išmislą gerai pagalvokite ar galite sau leisti rizikuoti prarasti vieną iš savo 21 piršto. Bent dviejų praradimas gali labai sulėtinti Jūsų, kaip programuotojo darbą!

ID naudojimas

Yra žmonių, tikinčių, kad ID css’e yra blogis ir pataria jų atsisakyti iš vis:

Savo tikėjimą jie grindžia tuo, kad id turi aukštesnį specifiškumą, todėl tai labai apsunkina pakartotinai panaudojamų css’ų rašymą. Tai tikrai yra teisybė - naudojant id css’e apie pakartotinį panaudojimą galima pamiršti.

Visgi nesiūlau visiškai atsisakyti šio selektoriaus, nes tam tikrais atvejais, kai norima pakeisti stilių vienam konkrečiam elementui, id panaudojimas css’e yra aiškesnis programuotojui: taip parodoma, jog elementas bus panaudotas tik kartą. Taip pat jei css skirtas konkrečiam produktui, o ne pakartotiniam panaudojimui id nėra toks jau blogas pasirinkimas.

Rašymo stilius

Pagrindinė css (taip pat ir viso kito kodo) rašymo taisyklė: kodas, nepriklausomai nuo to, kiek žmonių iš tikro jį rašė, turėtų atrodyti taip, lyg jį parašė vienas žmogus vienu prisėdimu, t.y. kodo stilius turi būti vientisas.

Taip pat svarbu atminti tai, kad css kodą rašo žmonės, jį skaitys žmonės, todėl jame neturėtų būti nereikalingų sutrumpinimų, o kode turėtų būti nors būtiniausi komentarai. Kaip kad sako pats google, klasių pavadinimai turi būti kiek galima trumpesni, bet pakankamai ilgi, kad būtų suprantami. Tas pats galioja ir selektoriams: pernelyg specifiškus selektorius bus sudėtinga modifikuot, o per daug abstraktūs sukels sunkumų pridedant naujus elementus bei sulėtins puslapio užkrovimo greitį.

Svarbu susikurti kodo rašymo taisykles ir jomis vadovautis. Gerų, populiariuose tinklapiuose naudojamų css rašymo patarimų pateikiama čia: http://css-tricks.com/css-style-guides/ Papildomi šaltiniai:

CSS

CSS selektoriai ir specifiškumas

CSS selektoriai

Aprašant CSS stilių naudojami css selectoriai, pagal juos naršyklė nusprendžia kuriam elementui(-ams) pritaikyti stilių.
Jie užrašomi prieš patį stiliaus aprašą, pvz:

1
div.stalas { color: red; }

selektorius yra div.stalas.

Tokiam pačiam stiliui aprašyti galima panaudoti kelis selektorius, atskirtus kableliu:

1
div.stalas, p span { color: red }

tiek div.stalas, tiek p span tekstas bus nuspalvintas raudonai.

Žemiau pateikiami trys populiariausi selektoriai.

Elemento pavadinimas

Žemiausio lygio selektorius, pagal jį stilius pritaikomas visiems to pačio tipo elementams, pvz:

1
p { color: red; }

visų p elementų tekstas taps raudonas: demo

Klasė

Aukštesnio lygio nei vien tik elemento pavadinimas selektorius. Klasė nurodoma prie elemento HTML kode atributu class. Pagal ją stilius pritaikomas visiems elementams, turintiems šią klasę. CSS aprašomas prieš pavadinimą pridedant tašką.

1
.stalas { color: red; }

demo

ID

Identifikatorius — dar aukštesnio lygio selektorius. Pagal jį stilius pritaikomas elementui, turinčiam nurodytą ID. CSS aprašomas prieš pavadinimą prirašant #.

1
#antras { color: red; }

demo

Selektorių kombinavimas

Šiuos selektorius galima kombinuoti:

1
p.stalas { color: red; }

bus pritaikomas tik p elementams, turintiems klasę stalas.

1
p .stalas { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementams, turintiems klasę stalas ir esantiems elemente p.

1
p#antras { color: red; }

bus pritaikomas tik p elementui, turinčiam id antras.

1
p #antras { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementui, turinčiam id antras ir esančiam elemente p.

1
p .stalas #antras { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementui, turinčiam id antras ir esančiam elemente, kurio klasė yra stalas ir kuris yra p elemente.

Kiti selektoriai

Kiti svarbūs selektoriai yra pseudo klasės selektoriai, užrašomi pridedant dvitaškį prieš pseudo klasės pavadinimą, pvz.:

  • :visited
  • :link
  • :first-letter
  • :first-line
  • :nth-child
  • :after

Taip pat svarbūs: >, +, ~, *, [] ir kiti, apie kuriuos plačiau galite pasiskaityti čia:

CSS Specifiškumas

CSS stiliai nurodomi užrašant kelią iki elemento. Kuo kelias specifiškesnis, tuo didesnis prioritetas suteikiamas stiliui pritaikant stilių. Didžiausią prioritetą turi style atribute aptašytas stilius. Žemesnį turi ID, po jo eina klasė, paskutinėje vietoje elemento nurodymas:

Elementas Pavyzdys Daugiklis
Stiliaus atributas style=”…” 1000
ID atributas #my-id{…} 100
Klasės atributas .my-class{…} 10
Elementas div{…} 1

Prioritetas gali būti apskaičiuojamas sudėjus specifikatorius padaugintus iš savo daugiklio, pvz:

1
2
3
.baldai div.stalai #antras{
   ...
}

turi tokį prioritetą: 2 ⋅ 10 + 1 + 100 = 121

Jeigu du specifikatoriai turi tokį patį prioritetą, naudojamas tas, kuris yra arčiau elemento, kuriam stilius taikomas. Kitaip sakant failo apačioje esantis aprašymas turės didesnį prioritetą, nei esantis viršuje. Taip pat HTML faile žymoje <style> esantis aprašymas turės didesnį prioritetą, nei esantis atskirame css faile (nes yra arčiau HTML elemento). Ši taisyklė taikoma tik tada, kai dviejų specifikatorių apskaičiuotas prioritetas yra toks pats.

CSS klasės nurodymas

HTML elementui galima nurodyti kelias klases, atskiriant jas tarpo simboliu. Kokia tvarka klasės nurodomos nesvarbu, stiliaus prioritetas nustatomas tik pagal specifiškumą. Pavyzdys:

1
<div class="klase1 klase2">...</div>

Platesnė informacija žemiau pateiktuose straipsniuose: