Share
"CSS Moduler" er ingenting å gjøre med W3C, heller en del av en foreslått byggeprosess. Den samler prosjektet ditt, omdøper selektorer og klasser slik at de blir unike, scoped til individuelle komponenter. Stiler er låst inn i disse komponentene og kan ikke brukes andre steder med mindre du spesifikt sier det!
I dag er vi ganske vant til ideen om at webteknologi er drivkraften bak apps; webapps, mobil og skrivebordsprogrammer. Men i motsetning til enkle statiske nettsteder er apper vanligvis mer dynamiske, komplekse og består ofte av komponenter, selv om Bootstrap eller ZURB Foundation tilbyr. Ettersom appen vokser i kompleksitet, kan det være en helvete å administrere CSS.
Over tid har mange strategier blitt utviklet, for eksempel OOCSS, ITCSS, BEM, Atomic CSS, etc. for å holde CSS organisert, gjenbrukbart og (avgjørende) skalerbar. Disse strategiene krever at du og alle i teamet ditt følger konvensjonene flittig.
Men før eller senere vil kompleksiteten krype inn igjen, og du vil støte på stilregler som følgende:
html.progressive-image.js [data-progressiv-bilde], html.progressive-image.js [data-progressiv bilde] * bakgrunnsbilde: ingen! viktig; maskebilde: ingen! viktig; opacity: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transform: translate (0, 0)! viktig
Problemet med CSS på mange store nettsider og apps er at det er så vanskelig å holde spesifisiteten lav som på et tidspunkt legger til !viktig kan ikke unngås. Og refactoring CSS på en stor kodebase er vanskelig fordi fjerning av stiler kan ødelegge andre komponenter.
I denne opplæringen skal vi se på "CSS-moduler" og hvordan det kan hjelpe oss med å minimere disse beryktede CSS-problemene.
Merk: sjekk ut repo på Github for å støtte kodeeksempler.
I et nøtteskall er "CSS-moduler" et verktøy som omdanner CSS-klasser og IDer til unike markører, slik at det kan isolere stilreglene lokalt til de tilordnede elementene eller komponentene. Forutsatt at vi har en knapp, kan vi vanligvis skrive stilreglene som følger:
.knapp bakgrunnsfarge: # 9b4dca; border: 0.1rem solid # 9b4dca; grense-radius: .4rem; farge: #fff; markør: pointer; display: inline-block; . knapp: fokus,. knapp: svinger bakgrunnsfargen: # 606c76; border-farge: # 606c76; farge: #fff; oversikt: 0;
Med CSS-moduler blir disse stilreglene omdøpt til noe som:
._12We30_button bakgrunnsfarge: # 9b4dca; border: 0.1rem solid # 9b4dca; grense-radius: .4rem; farge: #fff; markør: pointer; display: inline-block; ._12We30_button: fokus, ._12We30_button: svever bakgrunnsfarve: # 606c76; border-farge: # 606c76; farge: #fff; oversikt: 0;
Hvis du ser på store nettsteder som Facebook, Instagram eller Airbnb gjennom nettleserens DevTools, vil du oppdage at CSS-klassene og IDene er navngitt med bare denne typen mønster. Her er et eksempel fra Airbnb-hjemmesiden:
Hvem kalt klassen med tilsynelatende tilfeldige tall?Bruke CSS-moduler vil ikke gi mye mening hvis vi bare har en komponent, så la oss utvide vårt eksempel til tre komponenter og se hvordan du konfigurerer vårt prosjekt for å implementere CSS-moduler.
I dette andre eksempelet skal vi bygge tre komponenter; en knapp med tre forskjellige stiler. Vi kaller dem "primærknappen", "disposisjonsknappen" (også kjent som en "spøkelsesknapp") og "tasten". Vi legger disse knappene i en egen katalog. Hver katalog inneholder index.css og index.js.
I index.js, vi lager elementet og tildeler klassene til elementet som følger:
// 1. Importer stilene fra index.css-filen. importer stiler fra './index.css'; / ** * 2. Opprette et knappelement og legg til klassen fra index.css. * @type String * / const button = ''; // 3. Eksporter knappen som skal brukes i de andre filene. eksporter standardknapp;
Bruke den nye importere direktivet i ES6, importerer vi stilarket og leser klassene og IDene som et JavaScript-objekt. Deretter lager vi et element og legger til klassen som heter .knapp ved hjelp av innfødt JavaScript Templating som også ble introdusert i ES6. Til slutt eksporterer vi vårt element slik at elementet også kan importeres og gjenbrukes i de andre JavaScript-filene.
På tidspunktet for denne skrivingen har ikke alle nettlesere implementert de nyeste JavaScript-funksjonene og syntaks fra ES6-spesifikasjonen. Derfor trenger vi Babel for å omforme disse utdragene til JavaScript-syntaks som er kompatibelt i de fleste nettlesere.
Vår stilark, index.css, er vanlig CSS. Den inneholder en rekke valggivere for å utforme knappelementet.
/ * 1. Primær knapp * / .button bakgrunnsfarge: # 9b4dca; border: 0.1rem solid # 9b4dca; grense-radius: .4rem; farge: #fff; markør: pointer; display: inline-block; fontstørrelse: 1.1rem; font-weight: 700; høyde: 3.8rem; brevavstand: .1rem; linjehøyde: 3.8rem; polstring: 0 3.0rem; tekst-align: center; tekst-dekorasjon: ingen; tekst-transformer: store bokstaver; hvit-rom: nowrap; / * Flere stiler av primærknappen her * /
En av fordelene med å bruke CSS-moduler er at vi ikke trenger å bekymre oss om navngivningskonvensjoner. Du kan fortsatt bruke favoritt CSS-metodologiene som BEM eller OOCSS, men ingenting håndheves. Du kan skrive stilreglene på den mest praktiske måten for komponenten siden klassenavnet til slutt vil bli namespaced.
I dette eksemplet heter vi alle klassene i vår knappekomponent .knapp i stedet for .button-primær eller .button-skisse.
Arbeid med CSS inne i Shadow DOM Jeg har fortsatt den gamle vanen med å bruke BEM notasjon, selv om jeg ikke * trenger * til. Style innkapsling FTW!
- Razvan Caliman (@razvancaliman) 31. juli 2017
Når vi laster inn index.js På en HTML-side vises ingenting i nettleseren. I dette tilfellet må vi kompilere koden for å gjøre den funksjonell. Vi må installere Babel, Babel Preset for ES2015 (ES6) og Webpack sammen med følgende såkalte "loaders" for å tillate Webpack å behandle kildefilene våre.
Accentsconagua
.js filer og transform kildekoden med Babel-kjernemodulen..css filer.css-loader inn i vår HTML-side ved hjelp av I Vue legger vi til modul attributt til stil element, som vist ovenfor, for å aktivere CSS-modulene. Når vi kompilerer denne koden, får vi det samme resultatet.
Wrapping Up
For noen av dere blir dette noe helt nytt. Det er helt forståelig om konseptet med CSS-moduler er litt av en skrape ved første øyekast. Så la oss se på hva vi har lært om CSS-moduler i denne artikkelen.
- "CSS Moduler" lar oss inkapslere stileregler ved å gi nytt navn til eller
navne Klassenavnene, minimerer sammenstøt på selger-spesifisiteten ettersom kodebase vokser. - Dette tillater oss også å skrive klassenavnene mer komfortabelt enn å holde fast ved en bestemt metodikk.
- Til slutt, som stilregler er koblet til hver komponent, vil stilene også bli fjernet når vi ikke lenger bruker komponenten.
I denne artikkelen klarte vi knapt overflaten av CSS-moduler og andre moderne verktøy for webutvikling som Babel, Webpack og Vue. Så her har jeg satt sammen noen referanser for å se nærmere på disse verktøyene.
Ytterligere referanse
- Sjekk ut demo på Github
- Start koding ES6 med Babel: Tuts + Course
- Kom i gang med Vue: Tuts + Course
- Instant Webpack 2: Tuts + Course
- Strategier for å holde CSS spesifisitet Lav
- Daniel Eden: Flytt sakte og fikse ting
