Kā optimizēt CSS ar koda stila rokasgrāmatām

Kad dizaineri runā par stila rokasgrāmatām, tie parasti nozīmē saskaņota rokasgrāmata uz saskaņotu izskatu un sajūtu tīmekļa vietnes vai lietojumprogrammas, ar labi izstrādātu krāsu shēma, tipogrāfija un lietotāja interfeiss tas tiek izmantots visā projektā.

Ir arī cita veida stila rokasgrāmata, ko varam izmantot arī tīmekļa izstrādē, un tas ir tikpat svarīgs, bet daudz retāk apspriests: paša koda rokasgrāmatas. Kodu stila ceļveži drīzāk ir izstrādātājiem nekā dizaineriem, un to galvenais mērķis ir optimizēt CSS vai citu kodu.

Pareiza kodu stila rokasgrāmatu lietošana nodrošina mums a labāk organizēta, konsekventa koda bāze, uzlabota kodu nolasāmība un vairāk uzturams kods. Tas nav nejaušība, ka lielie tehnoloģiju uzņēmumi, piemēram, Google, AirBnB vai Dropbox, tos labi izmanto.

Šajā amatā mēs apskatīsim, kā mēs varam gudri optimizēt mūsu CSS, izmantojot CSS kodu stila rokasgrāmatas.

Kodu stila rokasgrāmatas pret paraugu bibliotēkām

Mūsu nozarē ir zināma nenoteiktība par to, ko mēs varam saukt par stila rokasgrāmatu. Sarakstu saraksts piemēram, izmanto to sinonīmi ar šo terminu rakstu bibliotēka šajā rakstā, bet mēs varam iejusties šādā definīcijā arī citos amatos.

No otras puses, ir arī publikācijas, piemēram, CSS triki vai Brad Frost emuārs, kas atšķir kodu koda rokasgrāmatas no rakstu bibliotēkām. Šī pēdējā pieeja, iespējams, aizved mūs tuvāk labi optimizētai tīmekļa vietnei tas ļauj mums apstrādāt kodu un dizainu atsevišķi, tāpēc mēs to izmantosim šajā amatā.

Gan kodu stila ceļveži, gan rakstu bibliotēkas ietver veidošanas stratēģiju, bet cita veida. Rakstu bibliotēkas, piemēram, Bootstrap, Zurb Foundation, BBC Global Experience Language vai MailChimp rakstu bibliotēka, sniedz mums lietotāja interfeisu ar premade CSS klasēm, tipogrāfiju, krāsu shēmu, dažreiz režģa sistēmu un citiem dizaina modeļiem.

CSS koda stila rokasgrāmatas, piemēram, Evernote vai ThinkUp (vai tās, kas minētas intro), satur noteikumi par CSS rakstīšanu ieskaitot lietas nosaukumu nosaukumi, failu struktūra, īpašuma kārtība, koda formatēšana, un citi.

Ņemiet vērā, ka dzīvā stila rokasgrāmatu ģeneratori, piemēram, KSS, Styledown vai Pattern Lab, veidot rakstu bibliotēkas un ne kodēšanas stila ceļveži. Kamēr rakstu bibliotēkas ir arī ļoti noderīgas un paaugstina tīmekļa izstrādes procesu, tās neļauj mums optimizēt kodu.

Veidojiet CSS koda stila rokasgrāmatu

CSS koda stila rokasgrāmatas galīgais mērķis ir nodrošināt, ka mēs varam strādāt ar konsekventu, viegli apgrozāmu kodu bāzi, ko rakstījuši izstrādātāji, kuri visi ievēro tos pašus kodu veidošanas noteikumus. CSS koda stila rokasgrāmatas izveide var aizņemt nedaudz laika, bet tas ir vērts pūles, jo mums tas ir jādara tikai vienu reizi. Tad mēs varam izmantot to pašu stila rokasgrāmatu dažādos projektos.

Ir svarīgi atzīmēt, ka labākie stila ceļveži ne tikai sevī ietver stila noteikumus, bet arī piemērus laba un slikta izmantošana, jo tādējādi izstrādātāji var intuitīvāk izprast noteikumus.

Piemēram, AirBnB parāda labus un sliktus piemērus izstrādātājiem šādā viegli sagremojamā veidā:

Failu struktūra

Pirmkārt, mums ir jānoskaidro loģika, saskaņā ar kuru mēs organizēsim CSS failus. Mazākiem projektiem var būt pietiekami viens CSS fails, bet lielākiem projektiem tas ir vienmēr labāk sadalīt kodu, un apvienot atsevišķus failus vēlāk ražošanā.

Daži stila ceļveži, piemēram, ThinkUp's, arī brīdina mūs neizmantojot inline vai iegultos stilus ja tas nav neizbēgams; tas ir arī noderīgs noteikums, kas ir vērts pieteikties.

Ligzdošana

Ligzdošana ir lieliska iezīme CSS, bet reizēm tā var aiziet no kontroles. Neviens nejūtas īpaši laimīgs, jo īpaši neapmierinošā atkļūdošanas procesa vidū, sasitoties ar ļoti gariem selektoriem, piemēram:

 .class_1 .class_2 # id_1 # id_2 li a span krāsa: #bad; 

Tāpēc tas vienmēr ir labi izveidot saprātīgu ligzdošanas ierobežojumu, piemēram, GitHub stila ceļvedī izvēlējās trīs līmeņus. Ierobežojot ligzdošanu, mēs varam arī piespiest uzrakstīt labāku strukturētu kodu.

Nosaukuma noteikumi

Saskaņotu nosaukuma noteikumu izmantošana CSS selektoriem ir būtiska, ja mēs vēlamies saprast mūsu kodu mēnešus vai pat gadus vēlāk. Ir daudz risinājumu, un mums ir tikai viens stingrs noteikums, kas mums jāievēro tas nozīmē, ka selektora nosaukums nevar sākties ar numuru.

Četri kopīgie stili, ko izmanto selektora nosaukumā, ir .mazie burti, .under_scores, .domuzīmes, un .LowerCamelCase. Ir labi izvēlēties kādu no tiem, bet mums ir jāievēro tā pati loģika visā projektā.

Lietošana tikai semantisko selektoru nosaukumi ir arī svarīgi, ja vēlamies ir nozīmīgs kods. Piemēram, nevis .sarkanā poga (kas neparāda, ko poga dara), labāk ir izmantot .brīdinājuma poga nosaukums (kas saka, ko tas dara), jo tādā veidā mēs ļaujam izstrādātājiem (un mūsu nākotnes pašiem) saprast, ko dara poga.

Turklāt ja mēs vēlamies nākotnē mainīt sarkano krāsu uz kaut ko citu, mēs varam to viegli izdarīt bez problēmu. Pastāv arī iepriekšējas CSS nosaukumu konvencijas, piemēram, BEM (Block, Element, Modifier) ​​konvencija rezultāts ir konsekventa nosaukumu struktūra ar unikāliem un nozīmīgiem vārdiem.

Formatēšanas noteikumi

Kodu formatēšana ietver tādas lietas kā atstarpes izmantošana, cilnes, ievilkums, atstarpes, rindu pārtraukumi utt. Formātāšanā nav īsti vispārēji laba vai slikta metode, vienīgais īkšķis ir izvēlēties saskaņotus noteikumus, kas rada lasāmu kodu, un sekojiet tiem.

Piemēram, „Dropbox” pieprasa izstrādātājiem izvietot atstarpes pēc koloniem īpašuma deklarācijās, bet Evernote izmanto divas atstarpes atstarpei. Mēs varam izveidot tik daudz formatēšanas noteikumu, cik mēs esam apmierināti, bet nekad vairāk nekā ir iespējams saprast.

Deklarācijas rīkojums

Pasūtītās lietas vienmēr ir vieglāk redzēt, un pasūtot CSS deklarācijas (īpašības ar to vērtībām) saskaņā ar noteikumu, kas ir jēga, rezultāts ir labāk organizēts kods.

Apskatiet, piemēram, WordPress īpašuma pasūtīšanas noteikumus, tā nosaka šādu vienkāršu, bet loģisku pamatu pasūtīšanai, kurā rekvizīti ir sagrupēti pēc to nozīmes:

1. Displejs
2. Pozicionēšana
3. Kastes modelis
4. Krāsas un tipogrāfija
5. Citi

Vienības un vērtības

Lemjot par to, kā mēs vēlamies izmantot vienības un vērtības, ir svarīgi ne tikai panākt konsekventu koda izskatu, bet arī tad, ja mēs to nedarīsim, mēs varam nonākt pie kaut ko dīvainu

Iedomājieties vietni, kas pārmaiņus izmanto px, em, un rem garuma mērījumi. Tas ne tikai izskatīsies slikti koda redaktorā, bet, visticamāk, daži elementi šajā vietnē būs pārsteidzoši mazi vai lieli.

Mums ir arī jāpieņem lēmumi par krāsu vērtībām (heksadecimālo, rgb vai hsl), un vai mēs vēlamies izmantot stenogrāfijas īpašības un saskaņā ar kādiem noteikumiem. Katrā CSS koda stila rokasgrāmatā, kas ienāca, t.i.. nenosaka vienības 0 vērtībām (tiešām, vienkārši nav).

.klase // laba starpība: 0; // slikta starpība: 0px; // slikta starpība: 0em; // slikta starpība: 0rem; 

Komentējot

Komentēšanas kods ir būtisks visās valodās, bet CSS tas ne tikai atvieglo atkļūdošanu un dokumentāciju, bet arī nodala CSS noteikumus loģiskajās grupās. Mēs varam izmantot vai nu / *… * / vai //… piezīmju stils komentāriem CSS, ir svarīgi pastāvīgi ar mūsu projekta komentāriem.

Idiomātiskais CSS, piemēram, izveido nozīmīgu komentēšanas sistēmu, kas pat izmanto dažas pamata ASCII mākslas un rada skaisti organizētu kodu: