Apibrėžkime, kas yra atominė CSS

Kadangi „Atomic CSS“ (dar žinomas kaip „Functional CSS“) populiarėja, kilo painiavos dėl panašių susijusių terminų. Šio straipsnio tikslas yra patikslinti šią terminologiją.

Yra ir kitų projektų, kuriuose naudojamas terminas „Atomic“, įskaitant Brado Frosto „Atomic Web Design“. Atominė CSS yra a visiškai atskirai koncepciją.

Pradėkime apibrėždami „Atomic CSS“:

„Atomic CSS“ yra požiūris į CSS architektūrą, kuris teikia pirmenybę mažoms, vienos paskirties klasėms, kurių pavadinimai pagrįsti regėjimo funkcija.

Atomic CSS rašyti galima įvairiai (žr. variantus žemiau). Vienas iš pavyzdžių galėtų būti:

.bgr-blue { 
  background-color: #357edd; 
}

Terminą „Atomic CSS“ Thierry Koblenzas sugalvojo savo pagrindiniame straipsnyje „Challenging CSS Best Practices“ 2013 m. Spalio mėn.

Kai kurie žmonės po kurio laiko šį požiūrį pradėjo vadinti „funkciniu CSS“. Nors praeityje buvo atvejų, kai funkcinė CSS buvo naudojama kažkam kitam apibūdinti, šiandien terminai „Funkcinė CSS“ ir „Atominė CSS“ vartojami pakaitomis.

Nors „Atomic CSS“ buvo atviro kodo projekto, kilusio iš pirminio Thierry straipsnio, pavadinimas, pats terminas tinka architektūros filosofijai, o ne vienam konkrečiam variantui. (žr. žemiau).

Atominės CSS variacijos

Statinis

Daugelis žmonių rašo „Atomic CSS“, panašiai kaip visada rašė CSS. Įprasta naudoti išankstinį procesorių, kad būtų sukurta klasių biblioteka su nustatytais variantais, apibrėžiančiais vienetinę projektavimo sistemą tarpams, spalvoms, tipografijai ir kt.

Šio stiliaus pranašumas yra tas, kad kadangi jis yra pažįstamas, jis turi mažesnę kliūtį patekti į rinką ir yra lengviau suprantamas tiems, kurie nėra gerai išmanantys CSS.

Programinis

Programinis požiūris į atominę CSS apima kūrimo įrankio naudojimą, kad stiliai būtų automatiškai generuojami pagal tai, ką jis randa HTML.

Pavyzdžiui, atsižvelgiant į tai:

<!-- Programmatic Atomic CSS Example -->
<div class="Bgc(#0280ae) C(#fff) P(20px)">Lorem ipsum</div>

Bus sukurta ši CSS:

.Bgc(#0280ae) { background-color: #0280ae; }
.C(#fff) { color: #fff; }
.P(20px) { padding: 20px; }

Šis „Atomic CSS“ skonis naudoja funkcijų iškvietimo su parametrais sintaksę. Kaip parodė atvirojo kodo ACSS projektas, kuris programiniam stilių generavimui naudoja „Atomizer“, nebereikia rašyti CSS. Stiliaus lapai, sugeneruoti kūrimo proceso metu, yra visiškai optimizuoti be jokių nenaudojamų stilių.

Ilgaplaukis / trumpasis

Ilgalaikis stilius palaiko labiau skaitomus klasių pavadinimus (žr. „Expressive CSS“ ir „Solid“), o trumpasis – trumpumą (žr. „Tachyons and Basscss“).

/* Shorthand Atomic CSS Examples */

.bg-blue { background-color: #357edd; } 
.f1 { font-size: 3rem; }
.ma0 { margin: 0; }

/* Longhand Atomic CSS Examples */

.bgr-blue { background-color: #357edd; }
.background-blue  { background-color: #357edd; }
.backgroundcolor-blue  { background-color: #357edd; }
.text-h1 { font-size: 3rem; }
.text-3rem { font-size: 3rem; }
.text-huge { font-size: 3rem; }
.fontsize-1 { font-size: 3rem; }
.marg-0 { margin: 0; }
.margin-0 { margin: 0; }

/* Programmatic Shorthand */

Bgc(#357edd) { background-color: #357edd; }

/* Programmatic Longhand */

bgrBlue(#357edd) { background-color: #357edd; }
backgroundBlue(#357edd) { background-color: #357edd; }
backgroundColorBlue(#357edd) { background-color: #357edd; }

Susijusios sąlygos

Komunalinės klasės

Naudingumo klasės (taip pat vadinamos pagalbininkų klasėmis) yra lengvai suprantamos, vienos funkcijos klasės, kurios padeda įprasti stiliaus modeliai (pvz., „Clearfix“, „paslėpta“).

Daugelis CSS architektūrų remiasi naudingumo klasėmis (pvz., Tinkleliai, tarpai, tipografija), tačiau nebūtinai visiškai pritaria atominės CSS koncepcijai.

Nekintamas CSS

Atominės / funkcinės CSS aspektas, kai naudingumo klasės niekada negali būti modifikuojamos, todėl gaunami labai patikimi rezultatai.

Nekintamumas vaidina esminį vaidmenį tinkamai vykdant „Atomic CSS“ architektūrą. Be jo rizikuojate:

.black {color:navy;}

„Atomic CSS“ yra sudėtingumo perkėlimas nuo stiliaus lentelių į HTML. Kai „Atomic CSS“ projekte vyksta dizaino pakeitimai, geriausia, jei turite gerai struktūrizuotus HTML šablonus, kad, pavyzdžiui, galėtumėte naudoti redagavimo įrankį, kad greitai pakeistumėte Bgc(colorOne) į Bgc(colorTwo) kur jums gali prireikti.

Lūžio taško priešdėlis

Ši technika yra būdas leisti komunalinėms klasėms nepaisyti stilių skirtingais lūžio taškais, kad reaguojančio interneto dizaino įgyvendinimas būtų paprastas ir efektyvus.

/* Examples of breakpoint prefixing */

.grid-12   /* Full width by default */
.m-grid-6  /* 2 column at medium screen sizes */
.l-grid-4  /* 3 column for large screen sizes */

Pradžia

Žemiau pateikiamas vietų, kuriose galite pradėti, sąrašas, atsižvelgiant į tai, kuris variantas jums labiau patinka.

Be to, čia yra keletas pagrindinių straipsnių, kuriuos verta perskaityti:

„Laukinėje gamtoje”

„Atomic CSS“ išpopuliarėjo, ypač tarp tų, kurie ją naudoja greitam prototipų kūrimui, o kitame spektro gale – didelio masto vykdomiems „front end“ projektams.

Ačiū Thierry Koblenzas už jo atsiliepimus apie šį straipsnį ir sunkų darbą per metus!