CSS-i kirjutamismeetodite mõistmine

Selles postituses näeme millised CSS-i kirjutamismeetodid on, mõned tuntud meetodid ja kuidas nad võivad meie CSS-koodi optimeerimisel olla kasulikud. Alustame lihtsaimast küsimusest palli veeremiseks. Mis on metoodika?

Metoodika on meetodite süsteem. Mõtle meetodile, mis on lihtsalt viis, kuidas midagi süstemaatiliselt teha, teatud etteantud viisil, kuidas asju saavutada soovitud tulemuse saavutamiseks.

Paremate tulemuste saamiseks, me parandame oma meetodeid, planeerides neid paremini, tellimuse muutmine, sammude lihtsustamine - mis iganes see toimib kiiremini ja see on rohkem tõhus.

CSS metoodika

Nüüd räägime CSS metoodikast. Just nagu peaaegu kõiges elus, on meil ka CSS-i kirjutamise meetod: mõned kirjutavad kõigepealt CSS-i uuesti, mõned paigutusstiilid viimased, mõned algavad kahe kuni kolme klassiga elemendi kujundamiseks, mõned kirjutavad kõik CSS-koodid ühe faili.

Meie eelistatud meetodid on kas meie aja jooksul kindlaks määratud või teised mõjutanud või on vajalikud meie töökohal või kogu eespool nimetatud tõttu. Kuid aja jooksul on CSS-i veteranid koostanud metoodikat CSS-i kirjutamiseks see on rohkem paindlik, määratletud, korduvkasutatav, arusaadav ja juhitav.

Me vaatame neid formuleeritud meetodeid, mis hõlmavad järgmist:

OOCSS (objektorienteeritud CSS)
BEM (plokk, element, muutja)
ACSS (Atomic CSS)
SMACSS (CSS-i skaleeritav ja modulaarne arhitektuur)

Märge: Ühtki allpool mainitud kontseptsiooni ei tohi segi ajada ühegi raamistiku, raamatukogu või vahendiga, millel võib olla sama nimi ja mõiste kui need meetodid. See postitus on ainult CSS-i kirjutamise metoodika kohta.

1. OOCSS

Nicole Sullivani poolt 2008. aastal välja töötatud OOCSS (Object Oriented CSS) põhikontseptsioon sisaldab CSS-i objekti identifitseerimine, struktuuri ja visuaalse stiili eraldamine ning asukohapõhiste stiilide vältimine.

OOCSSis on esimene samm, mida Nicole teeb tuvastada CSS-i objektid.

“Põhimõtteliselt on CSS-i objektiks korduv visuaalne muster, mida saab eraldada sõltumatuks HTML-i, CSS-i ja võimaluse korral JavaScripti fragmentiks. Seejärel saab seda objekti kogu saidil uuesti kasutada. - Nicole Sullivan, Github (OOCSS)“

Võtke näiteks see struktuur sellelt saidilt. Siin on midagi, mis on korduv visuaalne muster ja millel on oma sõltumatu HTML ja / või CSS:

Meil on siin kaks tüüpi objekte, suuremat eelvaadet pealkirjadest, mida me nimetame eelvaade-esmane ja külgriba pealkirjadega, mida me nimetame eelvaade-sekundaarne.

Me peame eraldi struktuur ja nahk (st stiilid, mis loovad objektide väljanägemise). Kahe objekti tüübil on erinevad struktuurid, üks on suuremas kastis, kuigi nad näevad sarnaseid, pilte vasakule ja pealkirju paremal.

Andke mõlema objekti pildid klassile eelvaate-pilt ja lisage kood, mis paneb pildi vasakule. See takistab meil korrata koodi, kuhu pildi CSS-i objektidesse paigutada. Kui on ka teisi sarnaseid objekte, kasutame neid uuesti eelvaate-pilt neile.

Naha eraldamist saab teha ka lihtsamate stiilide jaoks piirid või taust. Kui teil on mitu sinise äärega objekti, luua sinise piiri jaoks eraldi klass ja selle lisamine objektidele vähendada siniste piiride kodeerimise korda CSS-is.

Nicole soovitab ka mitte lisage stiilid asukoha alusel, näiteks selle asemel, et sihtida kõiki linke konkreetse div-i sees, tooge need lingid a esiletõstuklass sobivate CSS-stiilidega. Sel moel, kui teil on vaja linki esile tõsta mõnes teises lehe osas, saate esiletõsteklassi uuesti kasutada.

OOCSSi plussid: Korduvkasutatavad visuaalse stiili koodid, asukoha paindlikud koodid, sügavale sisestatud valikute vähendamine.

Miinused OOCSS: Ilma korrektsete korduvate visuaalsete mustriteta ei ole eraldusstruktuur ja visuaalse stiili koodid tarbetud.

2. BEM

Arendajate poolt Yandexis 2009. aastal välja töötatud BEM-i (Block, Element, Modifier) peamised mõisted hõlmavad blokeeri, element & modifikaator ja nimetades neid vastavalt.

A “blokeeri” on sisuliselt sama mis “objekti”(eeltoodud näites), a “element” viitab ploki komponentidele (pilt, pealkiri, eelvaate tekst eespool eelvaate postitus- objektid). A “modifikaator” saab kasutada, kui ploki või elemendi olek muutub, näiteks kui lisate aktiivse klassi menüüelementi selle esiletõstmiseks, toimib aktiivne klass teie modifitseerijana.

Kui olete komponendid identifitseerinud, nimetage need vastavalt. Näiteks:

menüüplokil on klass menüüst
selle teemadel on klass menu__item (plokk ja element on eraldatud topeltjoonistusega)
menüü keelatud oleku modifikaatoril võib olla klass menu_disabled (muutja piiritleb üks allakriips)
menüüelemendi keelatud oleku muutja menu__item_disabled.

Modifikaatorite puhul saame kasutada ka key_value nimetamise vorming. Näiteks, et eristada mis tahes menüüelemente, mis on seotud vananenud artiklitega, saame neile klassi anda menu__item_status_obsolete, ja mis tahes menüüelementide kujundamiseks, mis viitavad ootel dokumentidele, võib klassi nimi olla menu__item_status_pending.

Nimetust saab muuta teie jaoks sobivateks. Idee on olla võimeline identifitseerima, plokid, elemendid ja modifikaatorid klasside nimedest. Vaadake mõningaid BEM-i saidi nimesüsteeme.

BEMi sait sisaldab ka nimekirju kuidas blokeerida, elementi ja modifikaatorit eraldada saab ka CSS-failisüsteemi. Blokid nagu “nupud” ja “sisendeid” neil võib olla oma kaustad, mis koosnevad nende plokkidega seotud failidest (.css, .js), mis muudab asjad lihtsamaks, kui tahame neid plokke teistesse projektidesse importida.

BEMi plussid:Lihtne kasutada klassi nimesid ja vähendada sügavaid CSS-valikuid.

BEM-i miinused:Et nimed oleksid mõistlikud, soovitab BEM, et hoiame ploki elementide pesa all.

3. ACSS

Made kuulsaks Yahoo, kusagil lähedal esimese aastakümne 21^st sajandil koosneb ACSS-i peamistest kontseptsioonidest klasside loomine kõige stiililisema stiili jaoks, st omandi-väärtuse paar, seejärel kasutades neid HTML-is vastavalt vajadusele.

On raske kindlaks teha, millal ACSS (Atomic CSS) esmakordselt välja töötati, kuna mõiste on juba mõnda aega kasutusel. Arendajad on kasutanud selliseid klasse .clearfix overflow: hidden pikka aega. ACSSis on idee omada klassi päris palju iga korduvkasutatava mittesisaldusega seotud vara väärtuse paari jaoks me vajame meie saidil ja lisame need klassid HTML-elementidele.

Allpool on näide klassidest, mis põhinevad ACSS-il ja kuidas neid HTML-is kasutatakse.

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

Nagu näete, saavutab selle meetodi puhul klasside arv kõrge ja kõik need klassid HTML-i täis. See meetod ei ole 100% efektiivne, kuid soovi korral on see kasulik. Yahoo kasutab seda lõpuks.

ACSSi plussid:HTML-i kujundamine HTML-i lahkumata.

ACSSi miinused:Liiga paljud klassid, mitte väga puhas ja sa võid seda vihata.

4. SMACSS

2011. aastal Jonathan Snooki poolt välja töötatud SMACSS (skaleeritav ja modulaarne arhitektuur CSS-ile) töötab, tuvastades 5 erinevat tüüpi stiilireegleid. Nende põhjal luuakse klassi nimed ja failisüsteem.

“SMACSS on viis oma disainiprotsessi uurimiseks ja nende jäikade raamistike sobitamiseks paindlikuks mõtlemisprotsessiks. - Jonathan Snook”

SMACSS tuvastab 5 tüüpi stiilireegleid, nimelt baas, paigutus, moodul, olek, ja teema.

Baasstiilid on HTML-põhilistele märgistele suunatud vaikimisi stiilid
, .
Paigutusstiilid on lehekülje paigutuse määratlemiseks kasutatavad stiilid, näiteks kodeerimine, kus päise, jaluse ja külgmenüüd lähevad.
Mooduli stiilid on spetsiifilised moodulile nagu galerii või slaidiesitus.
Riigi stiilid on mõeldud muutuvate oludega elementide esiletõstmiseks nagu peidetud või keelatud.
Teemat kasutatakse lehe visuaalse skeemi muutmiseks.

Erinevaid stiilireegleid saab identifitseerida klassi nime eesliite abil, näiteks l-päis (paigutuse jaoks) või t-päis (teema jaoks). Võime ka neid erinevaid reegleid korraldada, paigutades need eraldi failidesse ja kaustadesse.

SMACSSi plussid:Parem organiseeritud kood.

SMACSSi miinused: Pole mina mõelnud.

Seal on tasuta online-raamat, mida saate lugeda SMACSSi kohta, või saate selle ebooki versiooni osta, et seda rohkem uurida.

Järeldus

Eespool toodud CSS-meetodid annavad teile süsteemi oma CSS-koodide haldamine ja optimeerimine. Neid saab kombineerida, nagu OOCSS-SMACSS või OOCSS-BEM või BEM-SAMCSS, vastavalt teie vajadustele.

Samuti on olemas raamistikud ja raamatukogud, kui soovite automaatse süsteemi CSS-metoodika täitmiseks, näiteks:

OOCSS raamistik
BEM tööriistad
Orgaaniline CSS raamistik (järgneb aatomi kontseptsioon).