Objektinio CSS pagrindai (OOCSS)
„Frontend“ plėtra sparčiai juda, nes kiekvienais metais pridedama daug naujų metodų. Gali būti, kad kūrėjai gali kovoti su viskuo. Tarp „Sass“ ir „PostCSS“ lengva pasiklysti plėtros įrankių jūroje.
Vienas naujesnis metodas yra objekto orientuotas CSS, trumpai vadinamas OOCSS. Tai nėra įrankis, o CSS rašymo metodika, kuria siekiama CSS modulinė ir objektinė.
Šiame pranešime norėčiau pristatyti pagrindiniai OOCSS pagrindai, ir kaip šios idėjos gali būti pritaikytos internetiniam darbui. Šis metodas gali neatsilikti nuo kiekvieno kūrėjo, tačiau verta suprasti naujas koncepcijas, kad nuspręstumėte, ar jūsų darbo eiga gali būti naudinga.
Kas daro CSS objekto orientaciją?
Objektinis programavimas (OOP) yra programavimo paradigma, orientuota į pakartotinai naudojamų objektų kūrimas ir užmegzti santykius tarp jų, o ne procedūrinis programavimas, kuris tvarko kodą į procedūras (rutinas, paprogrames ar funkcijas).
OOP tapo plačiai naudojamas abiejuose „JavaScript“ ir „backend“ kalbos per pastaruosius kelerius metus, tačiau CSS organizavimas pagal savo principus vis dar yra nauja koncepcija.
The “objektą” „OOCSS“ reiškia „ HTML elementas arba su juo susijęs dalykas (pvz., CSS klasės arba „JavaScript“ metodai). Pvz., Galite turėti šoninės juostos valdiklio objektą, kuris gali būti pakartotas skirtingiems tikslams (informacinio biuletenio registracija, skelbimų blokai, nauji įrašai ir tt). CSS gali nukreipkite šiuos objektus į masę tai daro skalę.
Apibendrinant OOCSS „GitHub“ įrašą, CSS objektą gali sudaryti keturi dalykai:
- DOM HTML mazgas (-ai)
- CSS deklaracijos apie šių mazgų stilių
- Komponentai, pvz., Fono paveikslėliai
- „JavaScript“ elgesys, klausytojai ar su objektu susiję metodai
Apskritai, CSS yra į objektą orientuotas, kai mano klasių, kurios yra pakartotinai naudojamos ir nukreipti į kelis puslapių elementus.
Daugelis kūrėjų teigė, kad OOCSS yra lengviau dalintis su kitais ir lengviau pasiimti po mėnesio (ar metų), kai neaktyvus vystymasis. Tai lyginama su kitais moduliniais metodais, tokiais kaip SMACSS, turintiems griežtesnes CSS kategorizavimo taisykles.
OOCSS DUK puslapyje yra informacijos krūva, jei norite sužinoti daugiau. Ir kūrėjas Nicole Sullivan dažnai kalba apie OOCSS ir kaip jis susieja su šiuolaikine interneto plėtra.
Atskira struktūra nuo stiliaus
Didelė OOCSS dalis yra kodo rašymas, skiriantis puslapio struktūrą (plotį, aukštį, paraštes), išvaizdą (šriftus, spalvas, animacijas). Tai leidžia pasirinktinis nulupimas būti pritaikytas keliems puslapių elementams nepaveikiant struktūros.
Tai taip pat naudinga projektuojant komponentus, kurie gali būti judėjo aplink maketą lengvai. Pavyzdžiui, a “Naujausios žinutės” valdikliui, esančiam šoninėje juostoje, turėtų būti judama į poraštę arba virš turinio, išlaikant panašius stilius.
Štai OOCSS pavyzdys a “Naujausios žinutės” valdiklis, kuris šiuo atveju yra mūsų CSS objektas:
/ * Struktūra * / .side-widget plotis: 100%; paminkštinimas: 10px 5px; / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; spalva: # 2b2b2b; šrifto dydis: 1.45em;
Pastebėti, kad išdėstymas yra valdoma .šoninis valdiklis klasė, kuri gali būti taikoma ir keliems šoninės juostos elementams išvaizda yra valdoma .Naujausios žinutės klasė, kuri gali būti naudojama ir kitiems raštams. Pavyzdžiui, jei .Naujausios žinutės valdiklis buvo perkeltas į poraštę, jis gali ne pačios nustatyti, bet jis gali turėti tą pačią išvaizdą ir išvaizdą.
Taip pat žiūrėkite šį „CodePen“ šoninės juostos pavyzdį. Jis naudoja atskirą klasių atskyrimą plūdėms ir teksto lygiavimui, kad nereikia papildomo CSS kodo.
Atskiras konteineris iš turinio
Turinio atskyrimas nuo konteinerio elemento yra dar vienas svarbus OOCSS principas.
Paprasčiau kalbant, tai reiškia tik tai, kad turėtumėte vengti vaikų rinktuvų, kai tik įmanoma. Pritaikydami bet kokius unikalius puslapių elementus, pvz., Inkarų nuorodas, antraštes, bloknotus ar nereguliuojamus sąrašus, turėtumėte suteikti jiems unikalią klasę, o ne palikuonių atranką.
Štai paprastas pavyzdys:
/ * OOCSS * / .sidebar / * šoninės juostos turinys * / h2.sidebar-title / * specialūs h2 elemento stiliai * / / * ne OOCSS * / .sidebar / * tas pats šoninės juostos turinys * / .sidebar h2 / * prideda daugiau specifiškumo nei reikia * /
Nors antrojo kodo formato naudoti nėra siaubinga, rekomenduojama pirmąjį formatą laikytis, jei norite parašyti švarų OOCSS.
Plėtros gaires
Tai sunku nulenkti tikslius reikalavimus, nes kūrėjai nuolat diskutuoja apie OOCSS tikslą. Bet čia yra kai kurie pasiūlymai, kurie gali padėti jums rašyti švaresnį OOCSS kodą:
- Dirbti su klasių vietoj ID stiliui.
- Pabandyk susilaikyti nuo kelių lygių palikuonių klasės specifiškumo nebent reikia.
- Nustatykite unikalūs stiliai su pakartojamomis klasėmis (pvz., plūdės, išvalymas, unikalūs šriftų rinkiniai).
- Išplėsti elementus su tikslinėmis klasėmis vietoj tėvų klasių.
- Organizuokite savo stilių lentelę į skyrius, apsvarstyti galimybę įtraukti turinį.
Atkreipkite dėmesį, kad kūrėjai vis tiek turėtų naudoti „JavaScript“ taikymui skirtus ID, tačiau jie nėra reikalingi CSS, nes jie yra pernelyg konkretūs. Jei vienas objektas naudoja CSS stiliaus ID, jis niekada negali būti kopijuojamas, nes ID yra unikalūs identifikatoriai. Jei naudojate tik klasių stilių tada paveldėjimas tampa daug lengviau numatomas.
Be to, klasės gali būti susietos su papildomomis funkcijomis. Vienam elementui gali būti priskirtos 10+ klasės. Nors 10+ klasių viename elemente nenoriu asmeniškai rekomenduoti, tai leidžia kūrėjams surinkti pakartotinai naudojamų stilių biblioteką neribotiems puslapių elementams.
OOCSS klasės pavadinimai yra šiek tiek prieštaringi, o ne akmenyje. Daugelis kūrėjų pageidauja, kad klasės būtų trumpos ir iki galo.
Taip pat populiarus Camel atvejis .errorBox vietoj .klaida. Jei pažvelgsite į klasės pavadinimą OOCSS dokumentuose, pastebėsite, kad kupranugaris yra “pareigūnas” rekomendaciją. Nėra nieko blogo su brūkšneliais, bet paprastai geriausia laikytis OOCSS gairių.
OOCSS + Sass
Dauguma žiniatinklio kūrėjų jau mėgsta „Sass“ ir jis greitai perėmė „frontend“ bendruomenę. Jei dar nesate išbandę „Sass“, verta jį nušauti. Tai leidžia jums rašyti kodą su kintamaisiais, funkcijomis, lizdais ir kompiliavimo metodais, pavyzdžiui, matematinėmis funkcijomis.
Kompetentingose rankose „Sass“ ir „OOCSS“ galėtų būti dangaus rungtynės. „Sass Way“ tinklaraštyje rasite puikų rašymą apie tai.
Pavyzdžiui, naudojant „Sass“ @extend direktyvą galite taikyti vienos klasės savybes kitai klasei. Savybės nėra dubliuojamos, bet dvi klasės yra sujungtos su kablelio parinkikliu. Tokiu būdu galite atnaujinti CSS savybes vienoje vietoje.
Jei nuolat rašote stilių lenteles, tai būtų išsaugota darbo valandų ir pagalba automatizuoti OOCSS procesą.
Taip pat prisiminkite kodo priežiūra yra didelė OOCSS dalis. Naudojant „Sass“, jūsų darbas tampa paprastesnis su kintamaisiais, mišiniais ir pažangiais įrankiais, susietais su darbo eiga.
Pagrindinis OOCSS kodo atributas yra gebėjimas ją dalintis su bet kuriuo asmeniu, netgi patys vėliau ir galėsite lengvai jį pasiimti.
Veiklos aspektai
OOCSS turi veikti sklandžiai ir be daug painiavos. Kūrėjai išbando viską ne pasikartoti kiekvieną kartą, iš tikrųjų tai yra DRY plėtros prielaida. Laikui bėgant, OOCSS technika gali sukelti šimtus CSS klasių su individualiomis savybėmis, kurios tam tikrame dokumente taikomos dešimtys kartų.
Kadangi OOCSS vis dar yra nauja tema, sunku ginčytis dėl paūmėjimo. Daugelis CSS rinkmenų galiausiai ištinsta mažai struktūros, o OOCSS suteikia standžią struktūrą ir (idealiu atveju) mažiau prakaito. Didžiausia našumo problema būtų HTML, kur kai kurie elementai gali sukaupti keletą skirtingų klasių išdėstymo struktūrai ir dizainui.
Rasite įdomias diskusijas apie šią temą svetainėse, pvz., „Stack Overflow“ ir „CSS-Tricks“.
Mano rekomendacija yra bandyti sukurti pavyzdinį projektą ir pamatyti, kaip jis vyksta. Jei įsimylėsite OOCSS, tai gali iš esmės pakeisti svetainių kodavimo būdą. Arba, jei nekenčiate, vis dar mokosi naujos technikos ir kritiškai mąstote, kaip ji veikia. Tai naudinga, nesvarbu.
Gaukite užimtas rašymas OOCSS
Geriausias būdas sužinoti ką nors žiniatinklio kūrimo srityje yra praktika. Jei jau suprantate CSS pagrindus, jūs gerai sekate!
Kadangi OOCSS nereikalauja išankstinio apdorojimo, galite jį išbandyti naudodami internetinį IDE, pvz., „CodePen“. Paprasti projektai yra geriausi pradėti darbą ir gerinti savo žinias iš ten.
Pažvelkite į šiuos išteklius, kad galėtumėte toliau vykdyti tyrimus besivystančioje OOCSS srityje.
- OOCSS oficiali svetainė
- Objektinis CSS: kas, kaip ir kodėl
- OOCSS + Sass = Geriausias būdas CSS
- Įvadas į objektą orientuotą CSS
