CSS @use: Stiilimoodulite impordi ja konfigureerimise valdamine globaalsete projektide jaoks

CSS-i reegel @use on võimas funktsioon, mis võimaldab teil importida ja konfigureerida stiilimooduleid, edendades koodi taaskasutatavust, hooldatavust ja skaleeritavust teie veebiprojektides. See on eriti oluline globaalsete projektide puhul, kus järjepidevus ja organiseeritus on esmatähtsad. See põhjalik juhend süveneb @use'i peensustesse, käsitledes selle süntaksit, eeliseid, täiustatud tehnikaid ja parimaid tavasid.

Miks kasutada CSS-mooduleid ja @use'i?

Traditsiooniline CSS, kuigi lihtne alustamiseks, võib suurtes projektides kiiresti kohmakaks muutuda. Globaalne ulatus, nimede konfliktid ja spetsiifilisuse probleemid võivad viia kaskaadse kaosena. CSS-moodulid lahendavad need probleemid, kapseldades stiilid kindlasse moodulisse, vältides juhuslikku stiilide lekkimist ja parandades koodi organiseeritust. Reegel @use on selle modulaarse lähenemise võtmekomponent, pakkudes mitmeid eeliseid:

• Kapseldamine: Ühes moodulis määratletud stiilid on teistest moodulitest eraldatud, vältides nimede kokkupõrkeid ja soovimatuid stiilide ülekirjutamisi.
• Taaskasutatavus: Mooduleid saab importida ja taaskasutada mitmetes komponentides või lehtedel, vähendades koodi dubleerimist ja edendades järjepidevust.
• Hooldatavus: Mooduli stiilide muudatused mõjutavad ainult seda moodulit, mis teeb koodibaasi refaktoreerimise ja hooldamise lihtsamaks.
• Konfigureerimine: @use võimaldab teil konfigureerida mooduleid, edastades muutujaid, mis võimaldab kohandamist ja teemade loomist.

@use süntaksi mõistmine

Reegli @use põhisüntaks on lihtne:

            @use 'path/to/module';
            

              
                Copy
              
            
          

See impordib kõik module.css failis (või sarnases, sõltuvalt teie eelprotsessorist) määratletud stiilid ja muutujad praegusesse stiililehte. Stiilid on kapseldatud nimeruumi, mis on tuletatud mooduli failinimest.

Nimeruumid

Vaikimisi loob @use nimeruumi, mis põhineb mooduli failinimel. Seda nimeruumi kasutatakse mooduli muutujatele ja mixin'itele juurdepääsemiseks. Näiteks, kui impordite _variables.css:

            @use 'variables';

body {
  background-color: variables.$primary-color;
}

            

              
                Copy
              
            
          

Saate määrata ka kohandatud nimeruumi, kasutades võtmesõna as:

            @use 'variables' as vars;

body {
  background-color: vars.$primary-color;
}

            

              
                Copy
              
            
          

See on eriti kasulik, kui impordite mitu moodulit potentsiaalselt konflikti tekitavate muutujate nimedega. Kohandatud nimeruumi kasutamine parandab koodi loetavust ja väldib mitmetähenduslikkust.

Nimeruumide konfliktide vältimine

Kuigi nimeruumid aitavad konflikte vältida, on siiski oluline valida kirjeldavaid ja järjepidevaid nimesid. Kaaluge järgmisi strateegiaid:

• Eesliidete kasutamine: Kasutage järjepidevat eesliidet kõigi mooduli muutujate ja mixin'ite jaoks. Näiteks $component-name-primary-color.
• Kategoriseerimine: Korraldage oma moodulid nende eesmärgi alusel (nt _colors.css, _typography.css, _components.css).
• Kirjeldavad nimed: Kasutage oma muutujate ja mixin'ite jaoks selgeid ja kirjeldavaid nimesid, et vältida segadust.

Moodulite konfigureerimine @use'iga

Üks võimsamaid @use'i funktsioone on selle võime konfigureerida mooduleid muutujate edastamise kaudu. See võimaldab teil kohandada moodulite välimust ja käitumist ilma nende lähtekoodi muutmata.

Mooduli konfigureerimiseks määratlete moodulis muutujate vaikeväärtused ja seejärel kirjutate need väärtused üle mooduli importimisel, kasutades võtmesõna with.

Näide: teema konfigureerimine

Oletame, et teil on moodul _theme.css, mis määratleb värvide vaikeväärtused:

            /* _theme.css */

$primary-color: #007bff !default;
$secondary-color: #6c757d !default;
$font-size: 16px !default;

            

              
                Copy
              
            
          

Lipp !default tagab, et muutuja võtab selle väärtuse ainult siis, kui seda pole veel määratletud.

Nüüd saate selle mooduli importida ja vaikeväärtused üle kirjutada:

            /* app.css */

@use 'theme' with (
  $primary-color: #ff0000,
  $font-size: 18px
);

body {
  background-color: theme.$primary-color; /* Väljund: #ff0000 */
  font-size: theme.$font-size; /* Väljund: 18px */
}

            

              
                Copy
              
            
          

See võimaldab teil hõlpsasti vahetada erinevate teemade vahel, muutes lihtsalt konfigureerimisväärtusi reeglis @use.

Konfigureerimise parimad tavad

• Kasutage !default: Kasutage alati lippu !default, kui määratlete oma moodulites konfigureeritavaid muutujaid. See tagab, et muutujaid saab mooduli importimisel üle kirjutada.
• Dokumenteerige konfigureerimisvalikud: Dokumenteerige selgelt konfigureeritavad muutujad ja nende kavandatud eesmärk oma mooduli dokumentatsioonis. See muudab teistele arendajatele mooduli kohandamise mõistmise lihtsamaks.
• Pakkuge mõistlikke vaikeväärtusi: Valige vaikeväärtused, mis sobivad enamikule kasutusjuhtudest. See minimeerib kohandamise vajadust.
• Kaaluge map'ide kasutamist: Keerukate konfiguratsioonide jaoks kaaluge map'ide kasutamist seotud muutujate rühmitamiseks. See võib parandada koodi loetavust ja organiseeritust.

@forward: Moodulite paljastamine välismaailmale

Reegel @forward võimaldab teil valikuliselt paljastada mooduli API osi (muutujad, mixin'id ja stiilid) teistele moodulitele. See on kasulik abstraktsete moodulite loomiseks, mis pakuvad komplekti taaskasutatavaid utiliite, paljastamata nende sisemisi rakendamise detaile.

Näiteks võib teil olla moodul _utilities.css, mis sisaldab komplekti abiklasse:

            /* _utilities.css */

.margin-top-sm {
  margin-top: 0.5rem;
}

.margin-bottom-sm {
  margin-bottom: 0.5rem;
}

$base-font-size: 16px;

            

              
                Copy
              
            
          

Seejärel saate luua mooduli _layout.css, mis edastab need utiliidid:

            /* _layout.css */

@forward 'utilities' hide($base-font-size);

            

              
                Copy
              
            
          

Nüüd, kui impordite _layout.css, on teil juurdepääs klassidele .margin-top-sm ja .margin-bottom-sm, kuid mitte muutujale $base-font-size (kuna see oli peidetud). See võimaldab teil kontrollida, millised mooduli _utilities.css osad on teistele moodulitele paljastatud.

@forward kasutamine eesliidetega

Saate mooduli edastamisel lisada ka eesliite:

            /* _layout.css */

@forward 'utilities' as util-*;

            

              
                Copy
              
            
          

Nüüd, kui impordite _layout.css, on utiliidid saadaval eesliitega util-:

            .element {
  @extend .util-margin-top-sm;
}

            

              
                Copy
              
            
          

See võib olla abiks nimede kokkupõrgete vältimisel mitme mooduli edastamisel.

Üleminek @import'ilt @use'ile

Reegel @use on mõeldud asendama vanemat reeglit @import. Kuigi @import on endiselt toetatud, on sellel mitmeid piiranguid, mida @use lahendab:

• Globaalne ulatus: @import impordib stiilid globaalsesse ulatusse, mis võib põhjustada nimede konflikte ja spetsiifilisuse probleeme.
• Konfigureerimise puudumine: @import ei toeta moodulite konfigureerimist muutujatega.
• Jõudlus: @import võib põhjustada jõudlusprobleeme, eriti pesastatud importide puhul.

Üleminek @import'ilt @use'ile võib parandada teie koodibaasi organiseeritust, hooldatavust ja jõudlust.

Ülemineku sammud

1. Asendage @import @use'iga: Asendage kõik @import'i esinemised @use'iga.
2. Lisage nimeruumid: Lisage oma @use reeglitele nimeruumid, et vältida nimede konflikte.
3. Konfigureerige moodulid: Kasutage võtmesõna with moodulite konfigureerimiseks muutujatega.
4. Testige põhjalikult: Testige oma rakendust põhjalikult pärast üleminekut, et tagada kõigi stiilide ootuspärane toimimine.

Edasijõudnud tehnikad ja parimad tavad

Siin on mõned edasijõudnud tehnikad ja parimad tavad @use'i tõhusaks kasutamiseks:

• Looge baasstiilileht: Looge baasstiilileht, mis impordib kõik vajalikud moodulid ja konfigureerib need vaikeväärtustega. See pakub teie rakenduse stiilide jaoks keskset kontrollpunkti.
• Kasutage järjepidevat nimekonventsiooni: Kasutage oma muutujate, mixin'ite ja moodulite jaoks järjepidevat nimekonventsiooni. See parandab koodi loetavust ja hooldatavust.
• Dokumenteerige oma moodulid: Dokumenteerige oma moodulid selgelt, sealhulgas teave nende eesmärgi, konfigureeritavate muutujate ja kasutusnäidete kohta.
• Hoidke moodulid väikesed ja keskendunud: Hoidke oma moodulid väikesed ja keskendunud konkreetsele eesmärgile. See muudab nende mõistmise ja hooldamise lihtsamaks.
• Vältige sügavat pesastamist: Vältige @use reeglite sügavat pesastamist. See võib muuta sõltuvuste jälgimise keeruliseks ja põhjustada jõudlusprobleeme.
• Kasutage CSS-i eelprotsessorit: CSS-i eelprotsessori, nagu Sass või Less, kasutamine võib muuta CSS-moodulite ja @use'iga töötamise lihtsamaks. Eelprotsessorid pakuvad funktsioone nagu muutujad, mixin'id ja funktsioonid, mis võivad teie töövoogu parandada.

Globaalsed kaalutlused ja rahvusvahelistamine (i18n)

Globaalsete veebiprojektide arendamisel on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n). CSS mängib olulist rolli teie veebisaidi visuaalse ilme kohandamisel erinevatele keeltele ja kultuuridele.

Suunalisus (RTL/LTR)

Paljud keeled, nagu araabia ja heebrea keel, kirjutatakse paremalt vasakule (RTL). Peate tagama, et teie CSS toetab nii vasakult paremale (LTR) kui ka paremalt vasakule (RTL) paigutusi. Atribuuti direction saab kasutada teksti suuna juhtimiseks:

            body {
  direction: ltr; /* Vaikimisi */
}

html[lang="ar"] body {
  direction: rtl;
}

            

              
                Copy
              
            
          

Võimalik, et peate kohandama ka elementide, näiteks ikoonide ja piltide, paigutust vastavalt teksti suunale. CSS-i loogilised atribuudid nagu `margin-inline-start` ja `margin-inline-end` võivad selleks olla äärmiselt kasulikud ja neid tuleks eelistada `margin-left` ja `margin-right` asemel.

Fondi valik

Valige fondid, mis toetavad teie sihtkeelte märgistikke. Kaaluge veebifontide kasutamist, et tagada järjepidev renderdamine erinevates brauserites ja operatsioonisüsteemides. Google Fonts pakub laia valikut fonte, mis toetavad mitut keelt. Fontide valimisel tasub arvestada ligipääsetavusega. Fondi suurus ja reavahe on olulised loetavuse seisukohalt, eriti nägemispuudega kasutajate jaoks.

Näide: erineva fondi kasutamine araabia keele jaoks

            body {
  font-family: sans-serif;
}

html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', sans-serif;
}

            

              
                Copy
              
            
          

Numbrite vormindamine

Numbrite vormindamine on erinevates kultuurides erinev. Näiteks kasutavad mõned kultuurid komasid kümnendkohtade eraldajatena, teised aga punkte. Kaaluge JavaScripti teekide, nagu `Intl.NumberFormat`, kasutamist numbrite korrektseks vormindamiseks vastavalt kasutaja lokaadile.

Kuupäeva ja kellaaja vormindamine

Ka kuupäeva ja kellaaja vormingud on erinevates kultuurides erinevad. Kasutage JavaScripti teeke, nagu `Intl.DateTimeFormat`, kuupäevade ja kellaaegade korrektseks vormindamiseks vastavalt kasutaja lokaadile.

Teksti laienemisega toimetulek

Mõnes keeles, näiteks saksa keeles, on tavaliselt pikemad sõnad ja fraasid kui inglise keeles. See võib mõjutada teie veebisaidi paigutust. Veenduge, et teie CSS on piisavalt paindlik, et mahutada teksti laienemist ilma paigutust lõhkumata. Võimalik, et peate kohandama elementide laiust ning sõnade ja märkide vahekaugust.

Näide: CSS-muutujate kasutamine i18n jaoks

Saate kasutada CSS-muutujaid keelespetsiifiliste väärtuste, näiteks fondi suuruste, värvide ja vahekauguste salvestamiseks. See muudab teie veebisaidi kohandamise erinevatele keeltele lihtsamaks.

            :root {
  --font-size: 16px;
  --line-height: 1.5;
}

html[lang="de"] {
  --font-size: 17px; /* Veidi suurem fondi suurus saksa keele jaoks */
  --line-height: 1.6;
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

            

              
                Copy
              
            
          

Näide: Globaalse teemavahetaja rakendamine

Siin on praktiline näide, kuidas kasutada @use'i ja konfigureerimist globaalse teemavahetaja rakendamiseks:

1. Looge moodul _themes.css: See moodul määratleb erinevate teemade värvipaletid.
2. Looge moodul _components.css: See moodul määratleb teie komponentide stiilid, kasutades muutujaid moodulist _themes.css.
3. Looge JavaScripti funktsioon teemade vahetamiseks: See funktsioon värskendab CSS-muutujaid vastavalt valitud teemale.

            /* _themes.css */

$light-theme-primary-color: #ffffff !default;
$light-theme-secondary-color: #f0f0f0 !default;
$dark-theme-primary-color: #333333 !default;
$dark-theme-secondary-color: #222222 !default;

:root {
  --primary-color: $light-theme-primary-color;
  --secondary-color: $light-theme-secondary-color;
}

/* components.css */

@use 'themes' with (
  $light-theme-primary-color: #ffffff,
  $light-theme-secondary-color: #f0f0f0,
  $dark-theme-primary-color: #333333,
  $dark-theme-secondary-color: #222222
);

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* JavaScript */

function switchTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.style.setProperty('--primary-color', themes.$dark-theme-primary-color);

    document.documentElement.style.setProperty('--secondary-color', themes.$dark-theme-secondary-color);
  } else {
   document.documentElement.style.setProperty('--primary-color', themes.$light-theme-primary-color);
    document.documentElement.style.setProperty('--secondary-color', themes.$light-theme-secondary-color);
  }
}

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas kasutada @use'i ja konfigureerimist paindliku ja hooldatava teemavahetaja loomiseks. Saate seda näidet laiendada, et toetada rohkem teemasid ja kohandada oma rakenduse välimuse muid aspekte.

Kokkuvõte

Reegel @use on võimas tööriist modulaarse, hooldatava ja skaleeritava CSS-i loomiseks. Mõistes selle süntaksit, konfigureerimisvalikuid ja parimaid tavasid, saate oluliselt parandada oma koodibaasi organiseeritust ja kvaliteeti, eriti globaalsete veebiprojektide arendamisel. Võtke omaks CSS-moodulid ja @use, et luua vastupidavamaid ja tõhusamaid veebirakendusi ülemaailmsele publikule. Ärge unustage seada esikohale ligipääsetavust ja rahvusvahelistamist, et tagada teie veebisaidi kasutatavus ja nauditavus kõigile.