Share
"CSS Modules" är inget att göra med W3C, snarare en del av en föreslagen byggprocess. Den sammanställer ditt projekt, byter namn på väljare och klasser så att de blir unika, scoped till enskilda komponenter. Styles är låsta in i dessa komponenter och kan inte användas någon annanstans om du inte säger det speciellt!
Nuförtiden är vi ganska vana vid idén att webbteknologi är drivkraften bakom apps; webbapps, mobil och stationära appar. Men till skillnad från enkla statiska webbplatser är appen vanligtvis mer dynamiska, komplexa och består ofta av komponenter, utöver vad Bootstrap eller ZURB Foundation erbjuder. När en app växer i komplexitet kan hanteringen av sin CSS vara en helig uppgift.
Med tiden har många strategier utvecklats, såsom OOCSS, ITCSS, BEM, Atomic CSS etc. för att hålla CSS organiserad, återanvändbar och (väsentligt) skalbar. Dessa strategier kräver att du och alla i ditt lag följer konventionerna flitigt.
Men förr eller senare kommer komplexiteten att krypa in igen och du kommer att stöta på stilregler som följande:
html.progressive-image.js [data-progressiv-bild], html.progressive-image.js [data-progressiv bild] * bakgrundsbild: ingen! viktig; mask-image: ingen! viktigt; opacitet: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-gallery .with-single-item transform: translate (0, 0)! viktigt
Problemet med CSS på många storskaliga webbplatser och appar är att det är så svårt att hålla specificiteten låg som vid något tillfälle lägger till !Viktig kan inte undvikas. Att refactorera CSS på en stor kodbas är knepigt eftersom det kan ta andra komponenter att ta bort stilar.
I denna handledning ska vi undersöka "CSS-moduler" och hur det kan hjälpa oss att minimera dessa notoriska CSS-problem.
Notera: kolla republiken Github för att stödja kodexempel.
I ett nötskal är "CSS-moduler" ett verktyg som byter namn på CSS-klasser och ID till unika väljare, vilket gör det möjligt att isolera stilreglerna lokalt till de tilldelade elementen eller komponenterna. Om vi antar att vi har en knapp, kan vi typiskt skriva stilregler enligt följande:
.knapp bakgrundsfärg: # 9b4dca; gräns: 0.1rem fast # 9b4dca; gränsstråle: .4rem; färg: #fff; markör: pekare; display: inline-block; . knapp: fokus,. knapp: sväva bakgrundsfärg: # 606c76; kantfärg: # 606c76; färg: #fff; kontur: 0;
Med CSS-moduler kommer dessa stilregler att bytas om till något som:
._12We30_button bakgrundsfärg: # 9b4dca; gräns: 0.1rem fast # 9b4dca; gränsstråle: .4rem; färg: #fff; markör: pekare; display: inline-block; ._12We30_button: fokus, ._12We30_button: svävar bakgrundsfärg: # 606c76; kantfärg: # 606c76; färg: #fff; kontur: 0;
Om du tittar på stora webbplatser som Facebook, Instagram eller Airbnb via din DevTools webbläsare, kommer du att upptäcka att CSS-klasserna och ID-erna heter med just den här typen av mönster. Här är ett exempel från Airbnb-hemsidan:
Vem namngav klassen med till synes slumpmässiga nummer?Att använda CSS-moduler ger ingen mening om vi bara har en komponent, så låt oss expandera vårt exempel på tre komponenter och se hur vi konfigurerar vårt projekt för att implementera CSS-moduler.
I det här andra exemplet kommer vi att bygga tre komponenter; en knapp med tre olika stilar. Vi kallar dem "primärknappen", "konturknappen" (även känd som en "spökknapp") och "clear-knappen". Vi lägger dessa knappar i en separat katalog. Varje katalog innehåller index.css och index.js.
I index.js, vi skapar elementet och tilldelar klasserna till elementet enligt följande:
// 1. Importera stilar från index.css-filen. importera stilar från './index.css'; / ** * 2. Skapa ett knappelement och lägg till klassen från index.css. * @type String * / const-knapp = ''; // 3. Exportera knappen som ska användas i andra filer. export standardknapp;
Använda den nya importera direktivet i ES6 importerar vi stilarket och läser klasserna och ID-numren som ett JavaScript-objekt. Då skapar vi ett element och lägger till den klass som heter .knapp med inbyggd JavaScript Templating som också introducerades i ES6. Slutligen exporterar vi vårt element så att elementet också kan importeras och återanvändas inom de andra JavaScript-filerna.
Vid det här skrivandet har inte alla webbläsare implementerat de senaste JavaScript-funktionerna och syntaxen från ES6-specifikationen. Därför behöver vi Babel för att omvandla dessa fragment till JavaScript-syntax som är kompatibelt i de flesta webbläsare.
Vårt stilark, index.css, är vanlig CSS. Det innehåller ett antal väljare för att utforma knappelementet.
/ * 1. Primär knapp * / .knapp bakgrundsfärg: # 9b4dca; gräns: 0.1rem fast # 9b4dca; gränsstråle: .4rem; färg: #fff; markör: pekare; display: inline-block; typsnittstorlek: 1,1rem; font-vikt: 700; höjd: 3.8rem; brevavstånd: .1rem; linjehöjd: 3.8rem; vaddering: 0 3.0rem; text-align: center; text-dekoration: ingen; text-transform: stor bokstav; white-space: nowrap; / * Fler stilar i primärknappen här * /
En av fördelarna med att använda CSS-moduler är att vi inte behöver oroa sig för namngivningskonventioner. Du kan fortfarande använda dina favorit CSS-metoder som BEM eller OOCSS, men inget verkställs. du kan skriva stilreglerna på det mest praktiska sättet för komponenten eftersom klassnamnet så småningom kommer att bli med namnområde.
I det här exemplet heter vi alla klasser av vår knappkomponent .knapp istället för .knapp-primär eller .knapp-kontur.
Arbeta med CSS inuti Shadow DOM Jag har fortfarande den gamla vanan att använda BEM-notering trots att jag inte behöver * behöva *. Stilkapsling FTW!
- Razvan Caliman (@razvancaliman) 31 juli 2017
När vi laddar index.js På en HTML-sida visas ingenting i webbläsaren. I det här fallet måste vi sammanställa koden för att göra den funktionell. Vi måste installera Babel, Babel Preset för ES2015 (ES6) och Webpack tillsammans med följande så kallade "loaders" för att tillåta Webpack att behandla våra källfiler.
Accentsconagua
.js filer och omvandla källkoden med Babel-kärnmodulen..css filer.css-loader in på vår HTML-sida med hjälp av I Vue lägger vi till modul attribut till stil element, som visas ovan, för att aktivera CSS-modulerna. När vi sammanställer den här koden får vi ganska mycket samma resultat.
Avslutar
För några av er kommer det att bli något helt nytt. Det är helt förståeligt om konceptet CSS-moduler är lite av ett huvudskrapa vid första anblicken. Så låt oss läsa om vad vi har lärt oss om CSS-moduler i den här artikeln.
- "CSS-moduler" tillåter oss att inkapsla stilregler genom att byta namn eller
namespacing klassnamnen, vilket minimerar kollisionen på väljarspecificiteten när kodbasen växer. - Detta gör det också möjligt för oss att skriva klassnamnen mer bekvämt istället för att hålla sig till en viss metodik.
- Slutligen, som stilregler kopplas till varje komponent, kommer stilarna också att tas bort när vi inte längre använder komponenten.
I den här artikeln skrapade vi knappt ytan av CSS-moduler och andra moderna verktyg för webbutveckling som Babel, Webpack och Vue. Så här har jag lagt fram några referenser för att titta på dessa verktyg ytterligare.
Ytterligare referens
- Kolla in demo på Github
- Starta kodning ES6 med Babel: Tuts + Course
- Kom igång med Vue: Tuts + Course
- Instant Webpack 2: Tuts + Course
- Strategier för att hålla CSS Specificitet Låg
- Daniel Eden: Flytta långsam och fixa saker
