Kas yra CSS moduliai ir kam jie mums reikalingi?

Pastaruoju metu mane domina CSS moduliai. Jei dar negirdėjote apie juos, šis įrašas skirtas jums. Mes žiūrėsime į projektą ir jo tikslus. Jei jus domina, sekite naujienas, nes kitas įrašas bus apie tai, kaip pradėti naudoti idėją. Jei norite įdiegti ar padidinti savo naudojimą, 3 dalyje bus kalbama apie jų naudojimą „React“ aplinkoje.

Kas yra CSS moduliai?

Remiantis repo, CSS moduliai yra:

CSS failai, kuriuose visi klasių pavadinimai ir animacijos pavadinimai pagal numatytuosius nustatymus yra nustatyti lokaliai.

Taigi CSS moduliai nėra oficialus spec arba an diegimas naršyklėje bet veikiau procesas kūrimo etape (padedant „Webpack“ arba „Browserify“), kuris keičia klasių pavadinimus ir parinkiklius, kurie bus taikomi (ty panašiai kaip vardų srityje).

Kaip tai atrodo ir kodėl taip daroma? Mes pasieksime tai per sekundę. Pirmiausia prisiminkite, kaip paprastai veikia HTML ir CSS. Klasė taikoma HTML:

<h1 class="title">An example heading</h1>

Šios klasės stilius yra CSS:

.title {
  background-color: red;
}

Tol, kol tas CSS yra taikomas HTML dokumentui, to fonas <h1> būtų raudona. Mums nereikia apdoroti CSS ar HTML. Naršyklė supranta abu tuos failų formatus.

CSS moduliai laikosi kitokio požiūrio. Užuot rašę paprastą HTML, turime pažymėti visus savo žymėjimus „JavaScript“ faile index.js. Štai pavyzdys, kaip tai gali veikti (vėliau apžvelgsime realesnį pavyzdį):

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;

Mūsų kūrimo etape kompiliatorius ieškojo to styles.css importuotą failą, tada peržiūrėkite mūsų parašytą „JavaScript“ ir atlikite .title klasė pasiekiama per styles.title. Tada mūsų kūrimo veiksmas abu šiuos dalykus apdoros naujais, atskirais HTML ir CSS failais, o nauja simbolių eilutė pakeis HTML klasę ir CSS selektoriaus klasę.

Mūsų sugeneruotas HTML gali atrodyti taip:

<h1 class="_styles__title_309571057">
  An example heading
</h1>

Mūsų sukurta CSS gali atrodyti taip:

._styles__title_309571057 {
  background-color: red;
}

Klasės atributas ir parinkiklis .title visiškai nebėra, pakeista šia visiškai nauja eilute; Originalus CSS visiškai neteikiamas naršyklei.

Kaip Hugo Giraudelis sakė savo pamokoje šia tema:

[the classes] yra dinamiškai sugeneruoti, unikalūs ir susieti su teisingais stiliais.

Tai reiškia, kad stiliai yra aprėpiami. Jie priskiriami tam tikriems šablonams. Jei turime buttons.css failą importuotume tik į buttons.js šabloną ir a .btn klasėje būtų neprieinama kitam šablonui (pvz., forms.js), nebent jį specialiai importavome ir ten.

Kodėl mes norėtume susipainioti su CSS ir HTML, kad tai padarytume? Kodėl žemėje norėtume dirbti taip?

Kodėl turėtume naudoti CSS modulius?

Naudojant CSS modulius, tai garantija, kad visi vieno komponento stiliai:

1. Gyvenk vienoje vietoje
2. Taikoma tik tam komponentui ir nieko kito

Be to, bet kuris komponentas gali turėti tikrą priklausomybę, pavyzdžiui:

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

Šis metodas yra skirtas išspręsti pasaulinė apimtis CSS.

Ar jus kada nors gundė laiko ar išteklių trūkumas paprasčiausiai kuo greičiau parašyti CSS, nesvarstant, ką dar galėtumėte paveikti?

Ar kada nors spustelėjote keletą atsitiktinių bitų ir šiukšlių stiliaus lapo apačioje, ketindami susitvarkyti, bet niekada to nedaryti?

Ar kada nors susidūrėte su stiliais, kurių nebuvote visiškai tikri, ką jie padarė, ar jie netgi buvo naudojami?

Ar kada pagalvojai, ar galėtum atsikratyti kai kurių stilių, nieko nepažeisdamas? Įdomu, ar stiliai stovi savaime, ar priklauso nuo kitų dalykų? Arba perrašė stilius kitur?

Tai klausimai, dėl kurių gali kilti didelis galvos skausmas, išpūsti projekto terminai ir liūdnas, apmaudus žvilgsnis pro langą.

Su CSS moduliais ir vietinė taikymo sritis pagal numatytuosius nustatymus, šios problemos išvengiama. Rašydamas stilius visada esi priverstas galvoti apie pasekmes.

Pavyzdžiui, jei naudojate random-gross-class HTML netaikant jo kaip CSS modulių stiliaus klasės, stilius nebus taikomas, nes CSS parinkiklis bus pakeistas į ._style_random-gross-class_0038089.

Raktinis žodis „komponuoja“

Tarkime, kad turime modulį, vadinamą type.css mūsų teksto stiliams. Tame faile galime turėti:

.serif-font {
  font-family: Georgia, serif;
}

.display {
  composes: serif-font;
  font-size: 30px;
  line-height: 35px;
}

Mes deklaruotume vieną iš šių klasių savo šablone taip:

import type from "./type.css";

element.innerHTML = 
  `<h1 class="${type.display}">
    This is a heading
  </h1>`;

Tai sukeltų tokį žymėjimą:

<h1 class="_type__display_0980340 _type__serif_404840">
  Heading title
</h1>

Abi klasės buvo susietos su elementu naudojant composes raktinį žodį, taip išvengiant kai kurių panašių sprendimų problemų, pvz., „Sass“ @extend.

Mes netgi galime kurti iš konkrečios klasės atskirame CSS faile:

.element {
  composes: dark-red from "./colors.css";
  font-size: 30px;
  line-height: 1.2;
}

BEM nereikalingas

Kuriant CSS modulį mums nereikia naudoti BEM. Taip yra dėl dviejų priežasčių:

1. Lengva analizuoti – Kodas kaip type.display yra taip pat įskaitomas kūrėjams, kaip ir BEM-y .font-size__serif--large. Tikriausiai dar lengviau psichiškai analizuoti, kai BEM selektoriai ilgėja.

2. Vietinė taikymo sritis – Tarkime, kad turime tokią klasę .big viename modulyje, kur jis keičia font-size. Kitoje mes naudojame tiksli ta pati klasė .big kad didėja padding ir font-size kitokia suma. Tai tiesiog nesvarbu! Jie neprieštaraus, nes stiliai aprėpiami labai sąmoningai. Net jei modulis importuoja abu stiliaus lapus, jis turi pasirinktinį pavadinimą, kurį mūsų kūrimo procesas sukuria būtent tai klasei.

   Kitaip tariant, specifiškumo problemos išnyksta naudojant CSS modulius.

Šaunu, ką?

Tai tik keletas CSS modulių rašymo pranašumų.

Jei norėtumėte sužinoti daugiau, Glenas Maddenas išsamiai parašė apie kai kuriuos kitus šio požiūrio pranašumus.

Kitame šios serijos straipsnyje bus apžvelgta, kaip sukurti ir paleisti projektą naudojant „Webpack“ ir CSS modulius. Norėdami tai padaryti, naudosime naujausias ES2015 funkcijas ir ieškosime tam tikro kodo pavyzdžio, kuris padės mums atlikti procesą.

Papildoma literatūra