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: