CSS Import reegel: põhjalik juhend importimise halduseks ja rakendamiseks

Veebiarenduse maailmas mängivad kaskaadstiililehed (CSS) olulist rolli veebilehtede visuaalse esitluse määratlemisel. Kui veebisaidid muutuvad keerukamaks, muutub CSS-koodi haldamine üha keerukamaks. Reegel @import pakub põhilise mehhanismi CSS-stiililehtede korraldamiseks ja moduleerimiseks. See põhjalik juhend süveneb reegli @import keerukusse, uurides selle funktsionaalsust, parimaid tavasid, jõudluskaalutlusi ja alternatiivseid lähenemisviise. Käsitleme kõike, mida peate teadma oma CSS-importide tõhusaks haldamiseks, mis viib hallatavamate, tõhusamate ja skaleeritavamate projektideni.

CSS-i reegli @import mõistmine

Reegel @import võimaldab teil lisada väliseid stiililehti CSS-faili. See on sarnane sellega, kuidas võite JavaScripti faile lisada HTML-is sildi <script> abil. Kasutades @import, saate oma CSS-i jagada väiksemateks ja hallatavamateks failideks, muutes oma stiilide lugemise, mõistmise ja värskendamise lihtsamaks.

Põhisüntaks

Reegli @import põhisüntaks on lihtne:

            @import 'style.css';
            

              
                Copy
              
            
          

Või URL-iga:

            @import url('https://example.com/style.css');
            

              
                Copy
              
            
          

URL võib olla suhteline või absoluutne. Suhtelise URL-i kasutamisel lahendatakse see CSS-faili asukoha suhtes, kuhu reegel @import on kirjutatud. Näiteks kui teie peamine stiilileht (main.css) on juurkataloogis ja te impordite stiililehe kataloogist `css`, võib tee välja näha selline: @import 'css/elements.css';

Reeglite @import paigutus

Oluline on, et reeglid @import *peavad* olema paigutatud CSS-faili algusesse, enne mis tahes muid CSS-i reegleid. Kui paigutate need pärast mõnda muud reeglit, ei pruugi import ootuspäraselt toimida, mis võib põhjustada ootamatuid stiilimuutusi. Vaadake järgmist halva praktika näidet:

            /* See on vale */
body {
  font-family: sans-serif;
}

@import 'elements.css';
            

              
                Copy
              
            
          

Alltoodud parandatud näide näitab õiget järjekorda:

            /* See on õige */
@import 'elements.css';

body {
  font-family: sans-serif;
}
            

              
                Copy
              
            
          

Reegli @import kasutamise eelised

Reegli @import kasutamine pakub CSS-i haldamiseks mitmeid eeliseid:

• Organisatsioon: CSS-i jagamine eraldi failideks funktsionaalsuse alusel (nt tüpograafia, paigutus, komponendid) muudab teie koodis navigeerimise ja selle mõistmise lihtsamaks.
• Hallatavus: Stiilide jaotamisel on konkreetsete elementide muudatusi või värskendusi lihtsam rakendada ja testida. See vähendab soovimatute kõrvalmõjude tõenäosust.
• Taaskasutatavus: CSS-faile saab taaskasutada mitmel lehel või projektis, vähendades kordusi ja edendades järjepidevust.
• Moodulsus: Modulaarne lähenemisviis võimaldab teil lisada, eemaldada või muuta üksikuid stiilifaile, ilma et see mõjutaks kogu stiililehte (eeldusel, et olete failid hästi struktureerinud).

Parimad tavad tõhusaks @import kasutamiseks

Kuigi @import pakub märkimisväärseid eeliseid, tagab parimate tavade järgimine tõhusa ja hallatava CSS-koodi:

CSS-failide korraldamine

Hästi korraldatud CSS-struktuur on hallatava projekti alus. Kaaluge neid strateegiaid:

• Komponentidel põhinev struktuur: Looge eraldi failid korduskasutatavate komponentide jaoks (nt nupud, navigeerimisribad, vormid). See soodustab koodi taaskasutust ja lihtsustab värskendusi. Näiteks:
  • buttons.css
  • navigation.css
  • forms.css
• Funktsionaalne struktuur: Korraldage failid CSS-i funktsionaalsuse alusel. Näiteks:
  • typography.css (fondi stiilide, pealkirjade ja lõikude jaoks)
  • layout.css (ruudustiku, flexboxi ja positsioneerimise jaoks)
  • utilities.css (abiklasside ja utiliitstiilide jaoks)
• Nimekonventsioonid: Kasutage oma CSS-failide jaoks järjepidevat nimekonventsiooni, et hõlpsalt tuvastada nende eesmärk. Kaaluge prefiksite, näiteks `_` (osade jaoks, mis imporditakse teistesse failidesse) või semantiliste nimede kasutamist, mis kirjeldavad nende sisu.

Impordi järjekord

Järjekord, milles oma CSS-faile impordite, on kriitilise tähtsusega. See määrab ülimuslikkuse järjekorra ja tagab, et stiile rakendatakse õigesti. Levinud muster on failide importimine loogilises järjekorras, näiteks:

1. Lähtestamine/normaliseerimine: Alustage CSS-i lähtestamise või normaliseerimise stiililehega, et tagada järjepidev algtase erinevates brauserites.
2. Põhistiilid: Lisage globaalsed stiilid tüpograafia, värvide ja põhielementide jaoks.
3. Komponendi stiilid: Importige üksikute komponentide stiilid.
4. Paigutuse stiilid: Importige lehe paigutuse ja ruudustikusüsteemide stiilid.
5. Teemapõhised stiilid (valikuline): Importige teemade stiilid, kui see on asjakohane.
6. Ülekirjutamise stiilid: Kõik stiilid, mis peavad ülal imporditud stiile üle kirjutama.

Näiteks:

            @import 'reset.css';
@import 'base.css';
@import 'typography.css';
@import 'buttons.css';
@import 'layout.css';
@import 'theme-dark.css';
            

              
                Copy
              
            
          

Üleimportimise vältimine

Kuigi moodulsus on oluline, vältige reeglite @import liigset pesastamist, mida tuntakse ka kui üleimportimist. See võib suurendada HTTP-päringute arvu ja aeglustada lehe laadimisaega, eriti vanemates brauserites. Kui fail on juba teises importis kaasatud, pole vaja seda uuesti importida, välja arvatud juhul, kui on absoluutselt vajalik konkreetseid stiile üle kirjutada.

Jõudluskaalutlused

Kuigi reegel @import pakub organisatsioonilisi eeliseid, võib see mõjutada ka lehe jõudlust, kui seda ei kasutata mõistlikult. Nende potentsiaalsete jõudlusprobleemide mõistmine ja leevendamine on ülioluline.

HTTP-päringud

Iga reegel @import lisab täiendava HTTP-päringu, mis võib aeglustada lehe esialgset laadimist, eriti kui teil on palju imporditud faile. Brauser peab enne lehe renderdamist esitama iga imporditud stiililehe jaoks eraldi päringuid. HTTP-päringute minimeerimine on veebijõudluse optimeerimise põhiline põhimõte.

Paralleelsed allalaadimised

Vanemad brauserid võivad stiililehti järjestikku alla laadida, mis võib veelgi pikendada laadimisaega. Kaasaegsed brauserid saavad tavaliselt ressursse paralleelselt alla laadida, kuid reegel @import võib siiski viivitusi tekitada.

Alternatiivid @import -ile jõudluse jaoks

Reegli @import jõudluse puuduste leevendamiseks kaaluge järgmisi alternatiive:

• Link-sildid (<link>) HTML-is: Jõudluse kaalutlustel on tavaliselt eelistatavam silt <link>, mida kasutatakse otse HTML-i jaotises <head>, kui @import. Brauserid saavad sageli lingitud stiililehti samaaegselt alla laadida. See meetod on väliste CSS-failide lisamise standardviis ja pakub paremat jõudlust. Näiteks:

              <head>
    <link rel="stylesheet" href="style.css">
    </head>
              
  
                
                  Copy
                
              
            

• CSS-i eelprotsessorid (Sass, Less, Stylus): CSS-i eelprotsessorid, nagu Sass, Less ja Stylus, pakuvad täiustatud funktsioone, sealhulgas failide importimise võimalusi. Eelprotsessorid kompileerivad teie koodi tavaliseks CSS-iks ja selle kompileerimisprotsessi käigus ühendavad nad sageli mitu imporditud faili ühte CSS-faili, vähendades seeläbi HTTP-päringuid. See on sageli eelistatud meetod kaasaegseks veebiarenduseks. Näiteks Sassi kasutamine:

              // Teie failis main.scss:
  @import 'buttons';
  @import 'layout';
  
  //Eelprotsessor genereerib ühe faili style.css.
              
  
                
                  Copy
                
              
            

• Paketeerimise/vähendamise tööriistad: Kasutage ehitustööriistu (nt Webpack, Parcel, Gulp) oma CSS-failide paketeerimiseks ja vähendamiseks. Need tööriistad saavad ühendada mitu CSS-faili üheks väiksemaks failiks ja eemaldada tarbetud märgid (tühikud, kommentaarid), et vähendada failisuurust ja parandada laadimisaega.
• Inline CSS (kasutage säästlikult): Konkreetsetel juhtudel saate CSS-stiile otse HTML-i sisestada. See kõrvaldab vajaduse eraldi CSS-faili järele ja võib parandada kriitiliste stiilide jõudlust. Inline-stiilide ülekasutamine võib aga muuta teie koodi vähem hallatavaks.

Täiustatud @import tehnikad

Lisaks põhikasutusele toetab reegel @import mitmeid täiustatud tehnikaid:

Tingimuslikud impordid

Saate stiililehti tingimuslikult importida meediapäringute alusel. See võimaldab teil laadida erinevaid stiile sõltuvalt seadmest või ekraani suurusest. See on kasulik reageeriva disaini jaoks. Näiteks:

            @import url('mobile.css') screen and (max-width: 767px); /* Mobiilseadmete jaoks */
@import url('desktop.css') screen and (min-width: 768px); /* Lauaarvutite jaoks */
            

              
                Copy
              
            
          

See tagab, et iga seadme jaoks laaditakse ainult vajalikud stiililehed, parandades jõudlust ja kasutajakogemust.

Importimine meediapäringutega

Saate stiililehti importida ka meediapäringute abil ilma URL-i määramata, näiteks:

            @import 'print.css' print;
            

              
                Copy
              
            
          

Konkreetsete meediumitüüpide importimine

Reegel @import võimaldab teil määrata meediumitüübi, mille jaoks stiililehte tuleks rakendada. See on sarnane meediapäringute kasutamisega sildis <link>. Näideteks on screen, print, speech jne. See tagab erinevates kontekstides rakendatavate stiilide üle suurema kontrolli.

            @import url('print.css') print; /* Prindi stiilid */
            

              
                Copy
              
            
          

Alternatiivsed lähenemisviisid CSS-i korraldamiseks

Kuigi @import on kehtiv meetod, pakuvad muud lähenemisviisid sageli paremat jõudlust ja hallatavust. Parima lähenemisviisi valimine sõltub teie projekti keerukusest ja teie arenduse töövoost.

CSS-i eelprotsessorid (Sass, Less, Stylus)

CSS-i eelprotsessorid pakuvad tavalise CSS-i ees märkimisväärseid eeliseid, sealhulgas failide importimise võimalusi, muutujaid, pesastamist, miksineid ja funktsioone. Need on kaasaegse veebiarenduse jaoks populaarne valik.

• Sass (Syntactically Awesome Style Sheets): Sass on laialdaselt kasutatav eelprotsessor, mis pakub kahte süntaksivalikut: SCSS (Sassy CSS, mis on CSS-i ülemhulk) ja taandatud süntaks.
• Less (Leaner Style Sheets): Less on teine populaarne eelprotsessor, mis pakub sarnaseid funktsioone nagu Sass.
• Stylus: Stylus on paindlik ja väljendusrikas eelprotsessor, mis on tuntud oma minimaalse süntaksi poolest.

Eelprotsessoritega käsitletakse importimislauseid kompileerimisprotsessi käigus, kus kõik imporditud failid ühendatakse üheks optimeeritud CSS-failiks. See lähenemisviis kõrvaldab reegli @import jõudluse puudused.

CSS-moodulid

CSS-moodulid on tehnika CSS-i ulatuse määramiseks konkreetsetele komponentidele. Need genereerivad automaatselt unikaalseid klassinimesid, et vältida stiilide konflikte. See on eriti kasulik suurtes ja keerukates projektides. CSS-mooduleid kasutatakse sageli koos JavaScripti raamistikega, nagu React, Vue.js ja Angular.

CSS-in-JS

CSS-in-JS-i teegid (nt styled-components, Emotion, JSS) võimaldavad teil CSS-i kirjutada otse oma JavaScripti koodis. See lähenemisviis pakub eeliseid, nagu komponenditaseme stiilimine, dünaamiline stiilimine JavaScripti muutujate alusel ja automaatne kriitilise CSS-i genereerimine. See on eriti kasulik JavaScripti raamistikke kasutavate projektide jaoks.

Praktilised näited ja rakendamine

Illustreerime reeglit @import veebisaidi struktuuri praktilise näitega:

Projekti struktuur:

            /project
  index.html
  style.css
  /css
    reset.css
    base.css
    typography.css
    buttons.css
    layout.css
            

              
                Copy
              
            
          

style.css (peamine stiilileht):

            @import 'css/reset.css';
@import 'css/base.css';
@import 'css/typography.css';
@import 'css/buttons.css';
@import 'css/layout.css';
            

              
                Copy
              
            
          

css/reset.css (Näide – põhiline lähtestamine):

            /* Eric Meyeri lähtestus */
hatml, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role lähtestamine vanemate brauserite jaoks */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
            

              
                Copy
              
            
          

css/base.css (Näide – põhiline stiilimine):

            body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

a {
  color: #007bff;
  text-decoration: none;
}

            

              
                Copy
              
            
          

css/typography.css (Näide – tüpograafiaga seotud stiilimine):

            h1, h2, h3 {
  margin-bottom: 1rem;
  font-weight: bold;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

p {
  margin-bottom: 1rem;
}

            

              
                Copy
              
            
          

index.html (Näide):

            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-i impordi näide</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Tere tulemast minu veebisaidile</h1>
  </header>
  <main>
    <p>See on näidislõik.</p>
    <button class="btn btn-primary">Klõpsa mind</button>
  </main>
</body>
</html>
            

              
                Copy
              
            
          

Selles näites impordib fail style.css kõik muud CSS-failid, luues selge ja korraldatud struktuuri. HTML-fail sisaldab peamist stiililehte, kasutades silti <link>.

Järeldus: @import -i ja muu maksimaalne kasutamine

CSS-i reegel @import on endiselt kasulik tööriist oma CSS-koodi korraldamiseks. Kuid arvestage selle mõjuga jõudlusele ja kaaluge selle kasutamist teiste, sageli paremate alternatiivide suhtes, nagu CSS-i eelprotsessorid (Sass, Less, Stylus), CSS-moodulid ja CSS-in-JS-i lahendused. Need alternatiivid pakuvad tavaliselt paremat jõudlust, hallatavust ja skaleeritavust suuremate projektide jaoks. Kuigi @import võib olla hea lähtepunkt väiksemate projektide jaoks või CSS-i organisatsiooni kohta õppimiseks, on enamiku kaasaegsete veebiarenduse töövoogude jaoks üldiselt soovitatav kasutada eelprotsessorit või täiustatumat tehnikat. Mõistes reegliga @import ja selle alternatiividega seotud eeliseid, piiranguid ja parimaid tavasid, saate teha teadlikke otsuseid oma CSS-koodi haldamise ja korraldamise kohta, et tagada vastupidavam ja tõhusam veebiarendus.

Ärge unustage, et veebirakenduste kujundamisel ja ehitamisel tuleks alati seada prioriteediks jõudlus, hallatavus ja skaleeritavus. Valige lähenemisviis, mis sobib kõige paremini teie projekti keerukuse ja teie meeskonna teadmistega.

Võtke seda juhendit oma lähtepunktiks tõhusaks CSS-i importimise halduseks. Katsetage erinevate lähenemisviisidega ja leidke see, mis teie jaoks kõige paremini töötab. Edu ja rõõmsat kodeerimist!