Objektu orientētas CSS pamati (OOCSS)
Frontend attīstība ātri pārvietojas, katru gadu pievienojot daudzas jaunas metodes. Tas var būt izaicinājums izstrādātājiem, lai tiktu galā ar visu. Starp Sass un PostCSS ir viegli pazust attīstības rīku jūrā.
Viena jaunāka tehnika ir objektorientēta CSS, saukta arī par OOCSS. Tas nav instruments, bet gan CSS rakstīšanas metodika, kuras mērķis ir padarīt CSS modulāru un objektu.
Šajā ziņojumā es vēlos iepazīstināt ar OOCSS pamatelementi, un kā šīs idejas var tikt pielietotas mājaslapas darbā. Šī metode var neattiekties uz katru izstrādātāju, bet ir vērts saprast jaunas koncepcijas, lai izlemtu, vai jūsu darbplūsma varētu gūt labumu no tā.
Kas padara CSS objektu orientētu?
Objektu programmēšana (OOP) ir programmēšanas paradigma, kas koncentrējas uz atkārtoti lietojamu objektu izveide un attiecību veidošana atšķirībā no procesuālās programmēšanas, kas organizē kodeksu procedūrās (rutīnas, apakšprogrammas vai funkcijas).
OOP ir plaši izmantots abos JavaScript un backend valodas pēdējos gados, bet CSS organizēšana saskaņā ar tās principiem joprojām ir jauna koncepcija.
The “objektu” OOCSS attiecas uz HTML elements vai kaut kas saistīts ar to (piemēram, CSS klases vai JavaScript metodes). Piemēram, jums var būt sānjoslas logrīka objekts, ko var atkārtot dažādiem mērķiem (biļetenu reģistrācija, reklāmu bloki, jaunākās ziņas utt.). CSS var mērķējiet uz šiem objektiem kas padara mērogošanu vējš.
Apkopojot OOCSS GitHub ierakstu, CSS objekts var sastāvēt no četrām lietām:
- DOM HTML mezgls (-i)
- CSS deklarācijas par šo mezglu stilu
- Komponenti, piemēram, fona attēli
- JavaScript uzvedība, klausītāji vai metodes, kas saistītas ar objektu
Vispārīgi runājot, tā uzskata, ka CSS ir objektorientēta klasēm, kas ir atkārtoti izmantojamas un mērķtiecīgi vairākiem lapas elementiem.
Daudzi izstrādātāji varētu teikt, ka OOCSS ir vieglāk dalīties ar citiem un vieglāk uzņemt pēc neaktīvās attīstības mēnešiem (vai gadiem). Tas ir salīdzināms ar citām moduļu metodēm, piemēram, SMACSS, kam ir stingrāki noteikumi objektu kategorizēšanai CSS.
Ja vēlaties uzzināt vairāk, OOCSS FAQ lapā ir informācija. Un autors Nicole Sullivan bieži runā par OOCSS un to, kā tas ir saistīts ar modernu tīmekļa attīstību.
Atsevišķa struktūra no stila
Liela OOCSS daļa ir rakstīt kodu, kas atdala lapas struktūru (platumu, augstumu, margas, polsterējumu) no izskata (fontus, krāsas, animācijas). Tas ļauj pielāgota ādas novilkšana uz vairāku lappušu elementiem neietekmējot struktūru.
Tas ir noderīgi arī tādu sastāvdaļu projektēšanā, kuras var būt pārvietots apkārt izkārtojumam viegli. Piemēram, a “Jaunākās publikācijas” logrīks sānjoslā ir jāpārvieto uz kājenes vai virs satura, vienlaikus saglabājot līdzīgus stilus.
Lūk, OOCSS piemērs a “Jaunākās publikācijas” logrīks, kas šajā gadījumā ir mūsu CSS objekts:
/ * Struktūra * / .side-widget platums: 100%; polsterējums: 10px 5px; / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; krāsa: # 2b2b2b; fonta lielums: 1.45em;
Ņemiet vērā, ka izkārtojums tiek pārvaldīta ar .sānu logrīks klasi, ko varētu izmantot arī vairākiem sānjoslas elementiem izskats tiek pārvaldīta ar .Jaunākās publikācijas klasi, ko varētu izmantot arī citu logrīku ādai. Piemēram, ja .Jaunākās publikācijas logrīks tika pārvietots uz kājeni, tas var nebūt tāds pats, bet tas var izrādīties vienāds.
Apskatiet arī šo sānjoslas piemēru no CodePen. Tā izmanto atšķirīgu klasēm atdalīšanu pludiņiem un teksta izlīdzināšanai tā, lai replikācijai nebūs nepieciešams papildu CSS kods.
Atsevišķs konteiners no satura
Satura atdalīšana no konteinera elementa ir vēl viens svarīgs OOCSS princips.
Vienkāršāk, tas nozīmē tikai to, ka jums vajadzētu izvairīties no bērnu izvēles, kad vien iespējams. Pielāgojot jebkurus unikālus lapas elementus, piemēram, enkura saites, galvenes, bloku čekus vai neierobežotus sarakstus, jums jādod viņiem unikālas klases, nevis pēcnācēju izvēles..
Šeit ir vienkāršs piemērs:
/ * OOCSS * / .sidebar / * sānjoslas saturs * / h2.sidebar-title / * īpašie h2 elementu stili * / / * ne-OOCSS * / .sidebar / * pats sānjoslas saturs * / .sidebar h2 / * pievieno vairāk specifiskuma nekā nepieciešams * /
Lai gan otrā koda formāta lietošana nav šausmīga, ieteicams sekot pirmajam formātam, ja vēlaties rakstīt tīru OOCSS.
Attīstības pamatnostādnes
Tas ir grūts, lai precīzi noteiktu precīzas specifikācijas, jo izstrādātāji pastāvīgi apspriež OOCSS mērķi. Bet šeit ir daži ieteikumi, kas var palīdzēt jums uzrakstīt tīrāku OOCSS kodu:
- Strādā ar klasēm, nevis ID veidošanai.
- Mēģināt atturēties no daudzlīmeņu pēcnācēju klases specifikas ja vien tas nav nepieciešams.
- Definējiet unikāli stili ar atkārtojamām klasēm (piem., pludiņi, skaidras rotaļlietas, unikāli burtu bloki).
- Paplašināt elementus ar mērķa klasēm nevis vecāku klases.
- Organizējiet savu stilu sadaļās, apsveriet iespēju pievienot satura rādītāju.
Ņemiet vērā, ka izstrādātājiem joprojām ir jālieto ID, lai atlasītu JavaScript, taču tie nav nepieciešami CSS, jo viņi ir pārāk specifiski. Ja viens objekts izmanto CSS stila ID, to nevar atkārtot, jo ID ir unikāls identifikators. Tad izmantojiet tikai klases, lai veidotu stilu mantojums kļūst daudz vieglāk prognozējams.
Turklāt klases var apvienot kopā, lai iegūtu papildu funkcijas. Vienam elementam var būt pievienotas 10+ klases. Lai gan 10+ klases vienā elementā es nevaru personīgi ieteikt, tas ļauj izstrādātājiem atkārtoti lietojamu stilu bibliotēku, lai neierobežotu lapu elementus.
Klases nosaukumi OOCSS ietvaros ir nedaudz pretrunīgi, nevis akmenī. Daudzi izstrādātāji dod priekšroku klasēm īsā laikā.
Arī Camel lieta ir populāra .errorBox tā vietā .kļūdas lodziņš. Ja aplūkojat klases nosaukumu OOCSS dokumentācijā, jūs pamanīsiet, ka kamielis ir “ierēdnis” ieteikumu. Nedrīkst būt nekas nepareizs, bet parasti vislabāk ir ievērot OOCSS vadlīnijas.
OOCSS + Sass
Lielākā daļa tīmekļa izstrādātāju jau mīl Sass, un tas ir ātri pārvarējis frontendu kopienu. Ja jūs vēl neesat mēģinājis Sass, tas ir vērts to nošaut. Tas ļauj jums rakstīt kodu ar mainīgajiem lielumiem, funkcijām, ligzdošanas un apkopošanas metodēm, piemēram, matemātiskām funkcijām.
Kompetentās rokās Sass un OOCSS varētu būt debesīs. Jūs atradīsiet lielisku rakstu par to Sass Way blogā.
Piemēram, izmantojot Sass @extend Jūs varat piemērot vienas klases īpašības citai klasei. Īpašības netiek dublētas, bet abas klases tiek apvienotas ar komatu selektoru. Tādā veidā jūs varat atjaunināt CSS rekvizītus vienā vietā.
Ja jūs pastāvīgi rakstāt stilu, tas ietaupītu stundas rakstīt un palīdzību automatizēt OOCSS procesu.
Atcerieties arī to koda uzturēšana ir liela OOCSS daļa. Izmantojot Sass, jūsu darbs kļūst vieglāks ar mainīgajiem, mixins un progresīviem linting rīkiem, kas saistīti ar darbplūsmu.
Galvenais lielā OOCSS koda atribūts ir spēja dalīties tajā ar ikvienu, pat sevi vēlāk, un varēsiet to paņemt viegli.
Veiktspējas apsvērumi
OOCSS ir paredzēts darboties nevainojami un bez lielas neskaidrības. Izstrādātāji cenšas vislabāk ne atkārtot sevi visos posmos, patiesībā tas ir DRY attīstības priekšnoteikums. Laika gaitā OOCSS metode var novest pie simtiem CSS klases ar atsevišķām īpašībām, kas attiecīgajā dokumentā tiek piemērotas desmitiem reižu.
Tā kā OOCSS joprojām ir jauna tēma, ir grūti apgalvot par uzpūšanos. Daudzas CSS datnes beidzot uzpūšas ar nelielu struktūru, bet OOCSS nodrošina stingru struktūru un (ideālā gadījumā) mazāk uzpūsties. Vislielākais koncerna rezultāts būtu HTML, kur daži elementi var uzkrāt nedaudzas dažādas klases izkārtojuma struktūrai un dizainam.
Jūs atradīsiet interesantas diskusijas par šo tēmu vietnēs, piemēram, Stack Overflow un CSS-Tricks.
Mans ieteikums ir mēģināt izveidot paraugprojektu un redzēt, kā tas notiek. Ja jūs iemīlēsieties ar OOCSS, tas var būtiski mainīt vietņu kodēšanas veidu. Alternatīvi, ja jūs to ienīstat, jūs joprojām apgūstat jaunu tehniku un kritiski domājat par to, kā tā darbojas. Tas ir win-win neatkarīgi no tā.
Saņemiet aizņemtu rakstīšanu OOCSS
Labākais veids, kā uzzināt kaut ko tīmekļa izstrādē, ir prakse. Ja jūs jau saprotat CSS pamatus, tad jūs esat labi ceļā!
Tā kā OOCSS neprasa priekšapstrādi, varat to izmēģināt ar tiešsaistes IDE, piemēram, CodePen. Vienkārši projekti ir vispiemērotākie, lai sāktu darbu, un uzlabot savas zināšanas no turienes.
Aplūkojiet šos resursus, lai turpinātu pētījumus OOCSS attīstībā.
- OOCSS oficiālā mājas lapa
- Objektu orientēta CSS: Kas, kā un kāpēc
- OOCSS + Sass = Labākais veids, kā CSS
- Ievads objektorientētā CSS
