CSS rašymo metodikų supratimas

Šiame poste matysime kokios yra CSS rašymo metodikos, kai kurios gerai žinomos metodikos ir kaip jos gali būti naudingos optimizuojant mūsų CSS kodą. Pradėkime nuo paprasčiausio klausimo, kad gautumėte rutulį. Kas yra metodika?

Metodika yra metodų sistema. Pagalvokite apie metodą, kaip tiesiog būdą, kaip kažką daryti sistemingai, tam tikru iš anksto nustatytu būdu, kaip pasiekti norimą rezultatą.

Norėdami gauti geresnių rezultatų, tobuliname savo metodus, juos suplanuojant geriau, keisti tvarką, supaprastinti veiksmus - nepriklausomai nuo to, kas veikia greičiau ir yra daugiau efektyvus.

CSS metodika

Dabar pakalbėkime apie CSS metodiką. Kaip ir apie viską, kas yra gyvenime, mes taip pat rašome CSS metodą: pirmiausia kai kurie rašo iš naujo CSS, kai kurie vietos išdėstymo stiliai, kai kurie prasideda nuo dviejų iki trijų klasių elemento formavimui, kai kurie rašo visus CSS kodus vieną failą.

Mūsų pageidaujami metodai buvo nustatyti mūsų pačių laikui bėgant arba kiti, arba reikalingi mūsų darbo vietoje arba dėl visų pirmiau minėtų dalykų. Tačiau laikui bėgant CSS veteranai suformulavo CSS rašymo metodika tai yra daugiau lanksti, apibrėžta, pakartotinai naudojama, suprantama ir valdoma.

Apžvelgsime suformuluotas metodikas, kurios apims:

1. OOCSS (Objektinis CSS)
2. BEM (blokas, elementas, modifikatorius)
3. ACSS (atominė CSS)
4. SMACSS (keičiamo dydžio ir modulinė architektūra CSS)

Pastaba: Nė viena iš toliau nurodytų sąvokų neturėtų būti painiojama su jokia sistema, biblioteka ar priemone, kuri gali turėti tokį patį pavadinimą ir sąvoką, kaip ir šios metodikos. Šis pranešimas yra tik apie CSS rašymo metodikas.

1. OOCSS

„Nicole Sullivan“ sukūrė 2008 m. Pagrindinės „OOCSS“ („Object Oriented CSS“) sąvokos apima CSS objektą identifikavimas, struktūros ir vizualinio stiliaus atskyrimas ir vietovės stilių vengimas.

OOCSS - tai pirmasis žingsnis, kurį siūlo Nicole identifikuoti CSS objektus.

“Iš esmės CSS „objektas“ yra kartotinis vizualinis modelis, kurį galima išskirti į nepriklausomą HTML, CSS ir galbūt „JavaScript“ fragmentą. Tada objektas gali būti pakartotinai naudojamas visoje svetainėje. - Nicole Sullivan, Github (OOCSS)“

Paimkite, pavyzdžiui, šią struktūrą iš šios svetainės. Štai kažkas, kas yra kartojantis vizualinis modelis ir turi savo nepriklausomą HTML ir / arba CSS:

Turime dviejų tipų objektus, didesnį pavadinimų, kuriuos mes pavadinsime, peržiūrą po peržiūros - pirminis ir šoninę juostą su pavadinimais, kuriuos mes pavadinsime po peržiūros - antrinis.

Mums reikia atskira struktūra ir oda (ty stilių, kurie sukuria objektų išvaizdą). Dviejų tipų objektams būdingos skirtingos struktūros, viena yra didesniame laukelyje, nors jie atrodo panašūs, su vaizdais į kairę ir antraštes į dešinę.

Pateikiame abiejų objektų vaizdus klasėje po peržiūros vaizdas ir pridėkite kodą, kuris įveda vaizdą kairėje. Tai neleidžia mums kartoti kodo, kur įvesti vaizdą CSS objektuose. Jei yra kitų panašių objektų, pakartotinai panaudojame po peržiūros vaizdas jiems.

Odos atskyrimas taip pat gali būti atliekamas paprastesniems stiliams sienos ar fonas. Jei turite kelis objektus su ta pačia mėlyna riba, sukurti atskirą klasę mėlynai sienai ir pridedant jį prie objektų sumažinti mėlynų sienų kodavimo skaičių CSS.

Nicole taip pat siūlo ne pridėkite stilių pagal vietą, Pavyzdžiui, vietoj to, kad nukreiptumėte visas nuorodas į tam tikrą divą, kad būtų paryškintos, pateikite šias nuorodas a žymiklio klasė su atitinkamais CSS stiliais. Tokiu būdu, kai reikia pažymėti nuorodą kitoje puslapio dalyje, galite pakartotinai naudoti žymeklio klasę.

OOCSS privalumai: Pakartotinai naudojami vizualinio stiliaus kodai, lankstūs vietos kodai, gilių įdėtų selektorių sumažinimas.

Minusai OOCSS: Be teisingo pakartotinio vizualinio modelio kiekio, skiriamoji struktūra ir vizualinio stiliaus kodai atrodo nereikalingi.

2. BEM

2009 m. „Yandex“ kūrėjai sukūrė pagrindines „BEM“ („Block“, „Element“, „Modifier“) sąvokas. blokuoti, elementas & modifikatorius ir juos atitinkamai pavadinti.

A “blokuoti” iš esmės yra tas pats, kaip “objektą”(iš anksčiau pateikto pavyzdžio), a “elementas” reiškia bloko komponentus (vaizdas, pavadinimas, pirmiau pateikto teksto peržiūra) peržiūros pranešimas- objektų). A “modifikatorius” gali būti naudojamas, kai keičiasi bloko ar elemento būsena, pvz., kai į meniu elementą įtraukiate aktyviąją klasę, kad jį pažymėtumėte, aktyvi klasė veikia kaip modifikatorius.

Nustatę komponentus, atitinkamai juos pavadinkite. Pavyzdžiui:

• meniu blokas turės klasę Meniu
• jo daiktai turės klasę menu__item (blokas ir elementas atskiriami dvigubu pabraukimu)
• Meniu neįgalios būsenos modifikatorius gali turėti klasę menu_disabled (modifikatorius apribotas vienu pabraukimu)
• meniu elemento negalios būsenos modifikatorius gali būti menu__item_disabled.

Modifikatoriams taip pat galime naudoti key_value pavadinimo formatas. Pavyzdžiui, norint atskirti visus meniu elementus, kurie susieti su pasenusiais straipsniais, galime suteikti jiems klasę menu__item_status_obsolete, ir stiliaus bet kokiems meniu elementams, rodantiems laukiančius dokumentus, klasės pavadinimas gali būti menu__item_status_pending.

Pavadinimas gali būti pakeistas į tai, kas jums tinka. Idėja yra sugebėti nustatyti, blokai, elementai ir modifikatoriai iš klasės pavadinimų. Patikrinkite kai kurias vardų sistemas, išvardytas BEM svetainėje.

BEM svetainėje taip pat pateikiami sąrašai kaip blokų, elementų ir modifikatorių atskyrimas taip pat gali būti įtrauktas į CSS failų sistemą. Blokai panašūs “mygtukai” ir “sąnaudas” gali turėti savo aplankus, susidedančius iš failų (.css, .js), kurie yra susiję su tais blokais, o tai palengvina tai, kad norime importuoti tuos blokus į kitus projektus.

BEM privalumai:Lengva naudoti klasių pavadinimus ir mažinti gilius CSS selektorius.

BEM trūkumai:Norėdamas išlaikyti vardus, BEM pataria, kad mes laikome bloką į lizdą sekančią žemę.

3. ACSS

Pagamintas garsaus Yahoo, kažkur netoli pirmojo pabaigos dešimtmetį^g „ACSS“ pagrindines sąvokas sudaro klasių kūrimas labiausiai atomo lygio stiliui, t. y. nuosavybės vertės pora, tada juos naudojant HTML, kaip reikia.

Sunku nustatyti, kada ACSS (Atominė CSS) pirmą kartą buvo sukurta, nes ši koncepcija jau seniai naudojama. Kūrėjai naudoja tokias klases .clearfix overflow: hidden ilgam laikui. ACSS idėja yra turėti klasę beveik kiekvienam pakartotinai naudojamam su turiniu nesusijusiam nuosavybės vertės pora mums reikės mūsų svetainėje ir prireikus pridėti šias klases prie HTML elementų.

Žemiau yra klasių, paremtų ACSS, pavyzdys ir kaip jie naudojami HTML.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Kaip matote, šis metodas gaus aukštą klasių skaičių ir HTML bus perkrautas visoms toms klasėms. Šis metodas nėra 100% efektyvus, bet gali būti naudingas, jei norite. „Yahoo“ tai naudoja.

ACSS privalumai:HTML formavimas nepaliekant HTML.

ACSS trūkumai:Pernelyg daug klasių, ne labai tvarkingas ir galbūt nekenčiate.

4. SMACSS

2011 m. Jonathan Snook sukūrė SMACSS (keičiamo dydžio ir modulinė architektūra CSS), nustatydama 5 skirtingus stiliaus taisyklių tipus. Klasių pavadinimai ir rinkmenų sistema sukurta remiantis šiais duomenimis.

“SMACSS yra būdas išnagrinėti jūsų projektavimo procesą ir kaip būdas pritaikyti šias standžiąsias sistemas į lanksčią minties procesą. - Jonathan Snook”

SMACSS nurodo 5 stiliaus taisyklių tipus bazė, išdėstymas, modulis, būsena, ir tema.

• Baziniai stiliai yra numatytieji stiliai, nukreipti į pagrindines HTML žymas

  , .

• Išdėstymo stiliai yra stiliai, naudojami puslapio išdėstymui apibrėžti, pavyzdžiui, kodavimas, kur antraštės, poraštės ir šoniniai meniu bus.
• Modulio stiliai būdingi moduliui, pvz., Galerijai ar skaidrių peržiūrai.
• Valstybės stiliai skirti elementams, turintiems keičiamų būsenų, pavyzdžiui, paslėptų ar išjungtų, išryškinimui.
• Tema naudojama puslapio vaizdinės schemos keitimui.

Skirtingos stiliaus taisyklės gali būti identifikuojamos naudojant prefiksą klasės pavadinime, pavyzdžiui, l-header (išdėstymui) arba t-header (temai). Taip pat galime organizuoti šiuos skirtingus taisyklių tipus, juos pateikdami į atskirus failus ir aplankus.

SMACSS privalumai:Geresnis organizuotas kodas.

Trūkumai SMACSS: Nieko negaliu galvoti.

Yra nemokama internetinė knyga, kurią galite skaityti apie „SMACSS“, arba galite įsigyti „ebook“ versiją, kad galėtumėte daugiau sužinoti.

Išvada

Pirmiau pateiktos CSS metodikos jums suteiks sistemą valdyti ir optimizuoti savo CSS kodus. Jie gali būti sujungti kartu, pvz., OOCSS-SMACSS arba OOCSS-BEM, arba BEM-SAMCSS, kad atitiktų jūsų poreikius.

Taip pat yra sistemos ir bibliotekos, jei norite automatizuotą CSS metodikų vykdymo sistemą, pavyzdžiui:

• OOCSS sistema
• BEM įrankiai
• Organinė CSS sistema (laikomasi atominės koncepcijos).