CSS rakstīšanas metodoloģiju izpratne

Šajā amatā mēs redzēsim Kādas CSS rakstīšanas metodes ir, dažas labi zināmas metodes un kā tās var būt noderīgas mūsu CSS koda optimizēšanā. Sāksim ar vienkāršāko jautājumu, lai iegūtu bumbu. Kas ir metodoloģija?

Metodoloģija ir metožu sistēma. Domājiet par metodi kā vienkārši veidu, kā sistemātiski kaut ko darīt, noteiktā veidā, kā to darīt, lai sasniegtu vēlamo rezultātu.

Lai iegūtu labākus rezultātus, mēs pilnveidojam savas metodes, plānojot tās labāk, mainīt pasūtījumu, vienkāršojot soļus - neatkarīgi no tā, kas darbojas ātrāk un tas ir vairāk efektīvs.

CSS metodoloģija

Tagad runāsim par CSS metodoloģiju. Tāpat kā ar visu, kas ir dzīvē, mēs esam arī CSS rakstīšanas metode: daži raksta atiestatīšanas CSS pirmkārt, daži vietas izkārtojuma stili pēdējā, daži sākas ar divām līdz trim klasēm elementa veidošanai, daži raksta visus CSS kodus vienu failu.

Mūsu vēlamās metodes ir vai nu noteiktas mūsu laikā, vai arī tās ietekmējušas citas, vai tās ir nepieciešamas mūsu darbavietā vai visu iepriekš minēto iemeslu dēļ. Bet laika gaitā CSS veterāni ir formulējuši metodoloģijas CSS rakstīšanai kas ir vairāk elastīga, definēta, atkārtoti izmantojama, saprotama un pārvaldāms.

Mēs apskatīsim formulētās metodes, kas ietvers:

1. OOCSS (objektu orientēta CSS)
2. BEM (bloks, elements, modifikators)
3. ACSS (Atomic CSS)
4. SMACSS (mērogojama un modulāra arhitektūra CSS)

Piezīme: Nevienu no turpmāk minētajiem jēdzieniem nedrīkst sajaukt ar jebkuru sistēmu, bibliotēku vai instrumentu, kam var būt tāds pats nosaukums un jēdziens kā šīm metodikām. Šis ieraksts ir tikai par CSS rakstīšanas metodiku.

1. OOCSS

Izstrādājot Nicole Sullivan 2008. gadā, OOCSS (Object Oriented CSS) galvenie jēdzieni ietver CSS objektu identifikācija, struktūras un vizuālā stila atdalīšana, kā arī vietējo stilu novēršana.

OOCSS ir pirmais solis, ko Nicole ierosina darīt identificēt CSS objektus.

“Būtībā CSS "objekts" ir atkārtots vizuālais modelis, ko var iegūt neatkarīgā HTML, CSS un, iespējams, JavaScript fragmentā. Pēc tam šo objektu var atkārtoti izmantot visā vietnē. - Nicole Sullivan, Github (OOCSS)“

Piemēram, izmantojiet šo struktūru no šīs vietnes. Šeit ir kaut kas, kas ir atkārtots vizuālais modelis un tam ir savs neatkarīgs HTML un / vai CSS:

Mums ir divu veidu objekti, lielāks priekšskatījums virsrakstiem, ko mēs nosauksim post-preview-primārā un sānjosla ar nosaukumiem, kurus mēs nosauksim pēcskolas-sekundārā.

Mums vajag atsevišķa struktūra un āda (ti, stili, kas rada objektu izskatu). Abiem objektu veidiem ir dažādas struktūras, viens ir lielāks lodziņā, lai gan tie izskatās līdzīgi, ar attēliem pa kreisi un virsraksti pa labi.

Sniegsim abu objektu attēlus klasē post-preview-image un pievienojiet kodu, kas novieto attēlu pa kreisi. Tas neļauj mums atkārtot kodu, kur ievietot attēlu CSS objektos. Ja ir citi līdzīgi objekti, mēs atkārtoti izmantojam post-preview-image viņiem.

Ādas atdalīšanu var veikt arī vienkāršākiem stiliem robežām vai foniem. Ja jums ir vairāki objekti ar to pašu zilo apmali, izveidojot atsevišķu klasi zilajai robežai un to pievienojot objektiem samazināt zilo robežu kodēšanas skaitu CSS.

Nicole arī iesaka ne pievienot stilu, pamatojoties uz atrašanās vietu, piemēram, tā vietā, lai atlasītu visas saites, kas atrodas noteiktā divpusē, lai uzsvērtu, piešķiriet šīm saitēm a marķiera klase ar atbilstošiem CSS stiliem. Tādā veidā, kad jums ir nepieciešams izcelt saiti kādā citā lapas daļā, varat atkārtoti izmantot marķiera klasi.

OOCSS plusi: Atkārtoti izmantojami vizuālā dizaina kodi, lokalizēti izvietojuma kodi, dziļu iebūvētu selektoru samazināšana.

Mīnusi no OOCSS: Bez taisnīga daudzuma atkārtojošu vizuālo rakstu atdalīšanas struktūra un vizuālā stila kodi šķiet nevajadzīgi.

2. BEM

Izstrādātāji, ko 2009. gadā izstrādāja Yandex, galvenie BEM (Block, Element, Modifier) ​​jēdzieni ietver identifikāciju bloķēt, elementu & modifikators un tos attiecīgi nosauktu.

A “bloķēt” būtībā ir tāds pats kā “objektu”(no iepriekšējā piemēra), a “elementu” attiecas uz bloka komponentiem (attēls, virsraksts, priekšskatījuma teksts iepriekš priekšskatījuma ziņa- objekti). A “modifikators” var izmantot, ja mainās bloka vai elementa stāvoklis, piemēram, pievienojot aktīvo klasi izvēlnes vienumam, lai to izceltu, aktīvā klase darbojas kā jūsu modifikators.

Kad esat identificējis komponentus, tos attiecīgi nosauciet. Piemēram:

• izvēlnes blokam būs klase izvēlnē
• tās priekšmetiem būs klase menu__item (bloks un elements tiek atdalīti ar dubultu pasvītrojumu)
• izvēlnes invalīdu stāvokļa modifikatoram var būt šī klase menu_disabled (modifikators norobežots ar vienu pasvītrojumu)
• var būt modificētājs izvēlnes vienuma invalīdam menu__item_disabled.

Modifikatoriem mēs varam izmantot arī key_value nosaukumu. Piemēram, lai nošķirtu jebkurus izvēlnes elementus, kas saistīti ar novecojušiem rakstiem, mēs varam viņiem piešķirt klasi menu__item_status_obsolete, un veidojot jebkurus izvēlnes elementus, kas norāda uz gaidāmajiem dokumentiem, klases nosaukums var būt menu__item_status_pending.

Nosaukumu var mainīt, lai tā darbotos. Ideja ir spēt identificēt, blokus, elementus un modifikatorus no klases nosaukumiem. Iepazīstieties ar kādu no nosaukuma sistēmām, kas uzskaitītas BEM vietnē.

BEM vietne arī uzskaita kā bloku, elementu un modificētāju segregāciju var iekļaut arī CSS failu sistēmā. Bloki patīk “pogas” un “ievadi” var būt savas mapes, kas sastāv no failiem (.css, .js), kas ir saistīti ar šiem blokiem, kas atvieglo lietas, kad vēlamies importēt šos blokus citos projektos.

BEM plusi:Viegli lietojami klases nosaukumi un dziļu CSS selektoru samazināšana.

BEM mīnusi:Lai saglabātu vārdus sane, BEM iesaka, ka mēs saglabājam bloku elementu ligzdošanas sekliem elementiem.

3. ACSS

Izgatavots slavens ar Yahoo, kaut kur netālu no pirmā desmitgadi^st gadsimta ACSS galvenie jēdzieni ir klases veidošana visatbilstīgākajam stila atoma līmenim, t.i., īpašuma vērtības pārim, pēc tam tos lietojot HTML pēc vajadzības.

Ir grūti noteikt, kad ACSS (Atomic CSS) pirmo reizi tika izstrādāts, jo šis jēdziens jau ir lietots. Izstrādātāji ir izmantojuši tādas klases .skaidrojums overflow: hidden ilgu laiku. ACSS ideja ir ir klase diezgan daudz katram atkārtoti izmantojamam ar saturu nesaistītam īpašuma vērtības pārim mums būs nepieciešama mūsu vietnē, un, ja nepieciešams, pievienot šīs klases HTML elementiem.

Zemāk ir piemērs klasēm, kas balstītas uz ACSS un kā tās tiek izmantotas HTML.

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

Kā redzat, šo metožu skaits būs augsts, un HTML būs pārpildītas visām šīm klasēm. Šī metode nav 100% efektīva, bet to var padarīt noderīgu, ja vēlaties. Yahoo to visu izmanto.

ACSS plusi:HTML dizains, neatstājot HTML.

ACSS mīnusi:Pārāk daudzas nodarbības, ne ļoti veikls, un jūs to varētu ienīst.

4. SMACSS

2011.gadā Jonathan Snook SMACSS izstrādātā (Scalable un Modular Architecture for CSS) darbojas, identificējot 5 dažādu veidu stila noteikumus. Klases nosaukumi un reģistrācijas sistēma tiek veidota, pamatojoties uz tiem.

“SMACSS ir veids, kā pārbaudīt jūsu projektēšanas procesu un kā veids, kā pielāgot šīs stingrās sistēmas elastīgam domāšanas procesam. - Jonathan Snook”

SMACSS identificē 5 veidu stila noteikumus, proti, bāze, izkārtojums, modulis, stāvoklis, un tēma.

• Bāzes stili ir noklusējuma stili, kas orientēti uz tādiem pamata HTML tagiem kā

  , .

• Izkārtojuma stili ir stili, ko izmanto, lai noteiktu lapas izkārtojumu, piemēram, kodēšanu, kur galvenes, kājenes un sānu izvēlnes iet.
• Moduļa stili ir specifiski modulim, piemēram, galerijai vai slaidrādi.
• Valsts stili ir paredzēti, lai izceltu elementus ar mainīgām valstīm, piemēram, slēptu vai atspējotu.
• Tēma tiek izmantota lapas vizuālās shēmas mainīšanai.

Dažādos stila noteikumus var identificēt, izmantojot prefiksu klases nosaukumā, piemēram, l-header (izkārtojumam) vai t-header (tēmai). Mēs varam arī organizēt šos dažāda veida noteikumus, ievietojot tos atsevišķos failos un mapēs.

SMACSS plusi:Labāk organizēts kods.

Cons of SMACSS: Neviens Es domāju.

Ir bezmaksas tiešsaistes grāmata, ko varat lasīt par SMACSS, vai arī varat iegādāties ebook versiju, lai to uzzinātu vairāk.

Secinājums

Iepriekš minētās CSS metodoloģijas jums nodrošinās sistēmu pārvaldīt un optimizēt CSS kodus. Tos var apvienot kopā, piemēram, OOCSS-SMACSS vai OOCSS-BEM, vai BEM-SAMCSS, lai atbilstu jūsu vajadzībām.

Ir arī sistēmas un bibliotēkas, ja vēlaties automatizētu sistēmu CSS metožu izpildei, piemēram:

• OOCSS sistēma
• BEM rīki
• Organiskā CSS sistēma (seko atomu koncepcijai).