Share
"Modulele CSS" nu are nimic de-a face cu W3C, ci mai degrabă o parte din procesul de construire sugerat. Acesta compilează proiectul dvs., redenumind selectorii și clasele astfel încât acestea să devină unice, cu scopul de a include componente individuale. Stilurile sunt blocate în acele componente și nu pot fi utilizate în altă parte decât dacă spui în mod expres acest lucru!
În zilele noastre, suntem destul de obișnuiți cu ideea că tehnologiile web sunt forța motrice din spatele aplicațiilor; aplicații web, aplicații mobile și desktop. Dar, spre deosebire de site-urile statice simple, aplicațiile sunt de obicei mai dinamice, complexe și adesea constau în componente chiar și dincolo de ceea ce oferă Bootstrap sau ZURB Foundation. Pe măsură ce o aplicație crește într-o complexitate, gestionarea CSS-ului poate fi o sarcină dificilă.
De-a lungul timpului, s-au dezvoltat nenumărate strategii, cum ar fi OOCSS, ITCSS, BEM, Atomic CSS etc. pentru a menține CSS organizat, reutilizabil și (crucial) scalabil. Aceste strategii necesită ca dvs. și toată lumea din echipa dvs. să urmați convențiile cu diligență.
Cu toate acestea, mai devreme sau mai târziu, complexitatea se va întoarce din nou și veți întâlni reguli de stil, cum ar fi:
html.progressive-image.js [data-progresivă-imagine], html.progressive-image.js [date-progresive-imagine] * imagine-imagine: masca-imagine: nimic! important; opacitate: 0 .main # section-enhanced-gallery-heroes.homepage-section.enhanced-galerie .with-un singur element transform: translate (0, 0)
Problema cu CSS pe multe site-uri web și aplicații pe scară largă este că este atât de dificil să păstrați specificitatea scăzută care, la un moment dat, adăugând !important nu pot fi evitate. Și refacționarea CSS pe o bază de cod mare este dificilă deoarece stilurile de îndepărtare pot sparge alte componente.
În acest tutorial, vom examina "Modulele CSS" și cum ne poate ajuta să minimalizăm aceste probleme CSS notorii.
Notă: consultați repo pe Github pentru exemple de coduri de sprijin.
Pe scurt, "CSS Modules" este un instrument care redenumeste clasele CSS si ID-urile in selectori unici, permitandu-i sa izoleze regulile stilului local la elementele sau componentele alocate. Presupunând că avem un buton, s-ar putea să scriem regulile stilului după cum urmează:
.butonul background-color: # 9b4dca; frontieră: 0.1rem solid # 9b4dca; raza de graniță: .4rem; culoare: #fff; cursor: pointer; afișare: inline-block; .button: focus, .button: hover background-color: # 606c76; culoare frontală: # 606c76; culoare: #fff; contur: 0;
Cu modulele CSS aceste reguli de stil vor fi redenumite în ceva de genul:
._12We30_button culoare-fundal: # 9b4dca; frontieră: 0.1rem solid # 9b4dca; raza de graniță: .4rem; culoare: #fff; cursor: pointer; afișare: inline-block; ._12We30_button: focus, ._12We30_button: hover background-color: # 606c76; culoare frontală: # 606c76; culoare: #fff; contur: 0;
Dacă vă uitați la site-uri mari, cum ar fi Facebook, Instagram sau Airbnb, prin intermediul browser-ului dvs. DevTools, veți observa că clasele și ID-urile CSS sunt denumite doar cu acest tip de model. Iată un exemplu din pagina de pornire a Airbnb:
Cine a numit clasa cu numere aparent aleatorii?Utilizarea modulelor CSS nu va face prea mult sens dacă avem doar o componentă, așa că să ne extindem exemplul la trei componente și să vedem cum să configuram proiectul nostru pentru implementarea modulelor CSS.
În acest al doilea exemplu, vom construi trei componente; un buton cu trei stiluri diferite. Îi vom numi "butonul principal", "butonul de contur" (cunoscut și sub denumirea de "buton fantomă") și "butonul clar". Vom pune aceste butoane într-un director separat. Fiecare director va conține index.css și index.js.
În index.js, noi creăm elementul și atribuim clasele elementului, după cum urmează:
// 1. Importați stilurile din fișierul index.css. stiluri de import din './index.css'; / ** * 2. Crearea unui element de buton și adăugarea clasei din index.css. * @tip String * / const button = '„; // 3. Exportați butonul care va fi utilizat în celelalte fișiere. buton prestabilit la export;
Folosirea noului import directive în ES6, importăm foaia de stil și citim clasele și ID-urile ca un obiect JavaScript. Apoi vom crea un element și vom adăuga clasa numită .buton folosind template-ul nativ JavaScript, care a fost introdus și în ES6. În cele din urmă, exportim elementul nostru astfel încât elementul să poată fi importat și reutilizat în cadrul celorlalte fișiere JavaScript.
La momentul acestei scrieri, nu fiecare browser are implementat cele mai recente caracteristici și sintaxă JavaScript din specificația ES6. Prin urmare, vom avea nevoie de Babel pentru a transforma aceste fragmente în sintaxă JavaScript care este compatibilă în majoritatea browserelor.
Foaia de stil, index.css, este simplu CSS. Acesta conține un număr de selectori pentru a modela elementul de buton.
/ * 1. Butonul primar * / .button fundal-culoare: # 9b4dca; frontieră: 0.1rem solid # 9b4dca; raza de graniță: .4rem; culoare: #fff; cursor: pointer; afișare: inline-block; font-size: 1.1rem; greutatea fontului: 700; înălțime: 3,8rem; întrerupere litere: .1rem; Înălțimea liniei: 3.8rem; padding: 0 3.0rem; text-align: centru; text-decoration: nici unul; text-transform: majuscule; spațiu alb: acum; / * Mai multe stiluri ale butonului primar aici * /
Unul dintre avantajele folosirii modulelor CSS este că nu trebuie să ne facem griji cu privire la convențiile de numire. Puteți utiliza în continuare metodologiile CSS preferate, cum ar fi BEM sau OOCSS, dar nimic nu este pus în aplicare; puteți scrie regulile de stil în modul cel mai practic pentru componentă, deoarece numele de clasă va fi în cele din urmă namespaced.
În acest exemplu, numim toate clasele componentei butonului nostru .buton in loc de .Butonul-primar sau .buton-schiță.
Lucrul cu CSS în interiorul Shadow DOM Eu încă mai am obiceiul vechi de a folosi notația BEM chiar dacă nu am nevoie de *. Incapsularea stilului FTW!
- Razvan Caliman (@razvancaliman) 31 iulie 2017
Când încărcăm index.js pe o pagină HTML, în browser nu va apărea nimic. În acest caz, va trebui să compilați codul pentru al face să funcționeze. Va trebui să instalăm Babel, Babel Preset pentru ES2015 (ES6) și Webpack împreună cu următorii așa-numiți "încărcătoare" pentru a permite Webpackului să proceseze fișierele sursă.
Accentsconagua
.js fișiere și transformarea codului sursă cu modulul Babel Core..css fișiere.css-loader în pagina noastră HTML folosind În Vue, adăugăm modul atribut la stil element, așa cum se arată mai sus, pentru a permite modulele CSS. Când vom compila acest cod, vom obține aproape același rezultat.
Înfășurarea în sus
Pentru unii dintre voi, aceasta va fi ceva nou. Este perfect de înțeles dacă conceptul de Module CSS este la un moment dat un zgâriet de cap. Deci, să recapitulăm ceea ce am învățat despre modulele CSS în acest articol.
- Modulele "CSS" ne permit să încapsulam regulile de stiluri prin redenumirea sau
spațiu de nume numele de clasă, minimizând coliziunea pe specificitatea selectorului pe măsură ce crește codul. - Acest lucru ne permite, de asemenea, să scriem mai ușor numele claselor, decât să ne lipim de o anumită metodologie.
- În sfârșit, deoarece regulile de stil sunt cuplate la fiecare componentă, stilurile vor fi de asemenea eliminate atunci când nu mai folosim componenta.
În acest articol, am zgâriat abia suprafața modulelor CSS și a altor instrumente moderne de dezvoltare web precum Babel, Webpack și Vue. Deci, aici am făcut câteva referințe pentru a examina mai departe aceste instrumente.
Referință ulterioară
- Check out demo-ul de pe Github
- Începeți codarea ES6 cu Babel: Tuts + Course
- Începeți cu Vue: Tuts + Course
- Webpack instant 2: Tuts + Curs
- Strategii pentru menținerea specificității CSS scăzute
- Daniel Eden: Mutare Slow și Fix Lucruri
