CSS @extend: Stiilide pärimise meisterlik valdamine tõhusaks veebiarenduseks

Pidevalt arenevas veebiarenduse maailmas on puhta, hooldatava ja tõhusa CSS-i kirjutamine ülimalt oluline. Üks võimas tehnika, mis võib oluliselt parandada teie CSS-i arhitektuuri, on @extend direktiiv. See funktsioon, mida leidub tavaliselt CSS-i eelprotsessorites nagu Sass ja Less (kuid on teatud hoiatustega saadaval ka natiivses CSS-is, nagu me arutame), võimaldab teil pärida stiile ühest selektorist teise, vähendades kordusi ja edendades organiseeritumat koodibaasi. See juhend süveneb @extend direktiivi, uurides selle eeliseid, kasutusjuhtumeid, parimaid praktikaid ja võimalikke lõkse.

Mis on CSS @extend?

@extend direktiiv kopeerib põhimõtteliselt ühes CSS-selektoris määratletud stiilid ja rakendab need teisele. See sarnaneb objektorienteeritud programmeerimise pärimisprintsiipidega, kus klass (selektor) saab pärida omadusi ja meetodeid (stiile) vanemklassist (selektorist). Peamine eesmärk on järgida DRY (Don't Repeat Yourself - Ära korda ennast) põhimõtet, minimeerides dubleeritud koodi ja muutes teie stiililehed lihtsamini hallatavaks ja uuendatavaks.

Erinevalt mixin'itest (teine levinud funktsioon CSS-i eelprotsessorites), @extend ei kopeeri lihtsalt stiile. Selle asemel muudab see CSS-selektoreid, et lisada laiendav selektor. See võib viia tõhusama CSS-väljundini, eriti keerukate stiilidega tegelemisel.

@extend'i kasutamise eelised

• DRY CSS: Vältige samade stiilide kordamist mitmes kohas. See muudab teie CSS-i lihtsamini loetavaks, kirjutatavaks ja hooldatavaks. Kujutage ette veebisaidi haldamist, mille stiilireeglid on laiali paljudes failides; globaalse stiili muutmine muutub õudusunenäoks. @extend kõrvaldab selle probleemi.
• Hooldatavus: Kui peate stiili värskendama, peate seda muutma ainult ühes kohas. See vähendab vigade ja ebajärjekindluse riski. Mõelge stsenaariumile, kus nuppude stiilid on veebisaidi CSS-is korduvalt määratletud. Kui peate kõigi nuppude polsterdust kohandama, peaksite leidma ja muutma iga eksemplari. @extend võimaldab teil muuta nupu põhistiili ja kõik laiendavad stiilid värskendatakse automaatselt.
• Jõudlus: Mõnel juhul võib @extend viia väiksemate CSS-failideni võrreldes mixin'itega, kuna see väldib samade stiilide mitmekordset dubleerimist. See toob kaasa kiiremad lehe laadimisajad ja parema veebisaidi jõudluse.
• Semantiline CSS: @extend'i kasutamine aitab teil luua semantilisemat CSS-i, luues selged seosed teie lehe erinevate elementide vahel. Näiteks saate luua põhistiili kõikidele teadetele ja seejärel laiendada seda erinevat tüüpi teadete jaoks (edu, hoiatus, viga).

Praktilised näited @extend'i kasutamisest

Illustreerime @extend'i võimsust mõne praktilise näitega. Kasutame Sassi süntaksit, kuna see on populaarne ja hästi toetatud CSS-i eelprotsessor. Kontseptsioonid on aga ülekantavad teistele eelprotsessoritele nagu Less või isegi natiivsele CSS-ile eksperimentaalse @layer at-reegliga (sellest lähemalt hiljem).

Näide 1: Nuppude põhistiilid

Oletame, et teil on esmane nupustiil, mida soovite rakendada teistele nupuvariatsioonidele.

Sass:

            
.btn-primary {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  @extend .btn-primary;
  background-color: #6c757d;
}

.btn-success {
  @extend .btn-primary;
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Kompileeritud CSS:

            
.btn-primary, .btn-secondary, .btn-success {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-success {
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Pange tähele, kuidas kompileeritud CSS grupeerib selektorid, mis jagavad samu põhistiile. See on tõhusam kui põhistiilide dubleerimine igas nupuvariatsioonis.

Näide 2: Vormielemendid

Saate kasutada @extend'i, et luua oma vormielementidele ühtne välimus ja tunnetus.

Sass:

            
.form-control {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}

.form-input {
  @extend .form-control;
}

.form-textarea {
  @extend .form-control;
  height: 150px;
}

            

              
                Copy
              
            
          

Näide 3: Teavitussõnumid

Erinevat tüüpi teavitused saavad jagada ühiseid stiile, kuid neil on unikaalsed värvid või ikoonid.

Sass:

            
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  @extend .alert;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-info {
  @extend .alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  @extend .alert;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  @extend .alert;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

            

              
                Copy
              
            
          

Parimad praktikad @extend'i kasutamisel

Kuigi @extend on võimas tööriist, on oluline seda kasutada läbimõeldult ja järgida parimaid praktikaid võimalike probleemide vältimiseks.

• Kasutage semantiliste selektoritega: @extend töötab kõige paremini, kui seda kasutatakse semantiliste selektoritega (nt .button, .form-control) mitte liiga spetsiifiliste selektoritega (nt #content .article p). Spetsiifiliste selektorite laiendamine võib viia tihedalt seotud CSS-ini, mida on raske ümber kujundada.
• Vältige laiendamist üle failide: Selektorite laiendamine erinevate CSS-failide vahel võib muuta stiilide vaheliste seoste mõistmise raskemaks. Üldiselt on kõige parem hoida laiendused samas failis või moodulis.
• Olge teadlik selektori spetsiifilisusest: @extend võib mõjutada selektori spetsiifilisust. Laiendav selektor pärib laiendatud selektori spetsiifilisuse. See võib mõnikord põhjustada ootamatut käitumist, kui te pole ettevaatlik. Näiteks, kui laiendate ID-selektorit, on laiendaval klassil sama kõrge spetsiifilisus.
• Kaaluge kohatäite selektorite kasutamist: Kohatäite selektorid (nt %base-styles Sassis) on spetsiaalselt loodud kasutamiseks koos @extend'iga. Neid ei väljastata lõplikus CSS-is, kui neid ei laiendata. See on kasulik põhistiilide määratlemiseks, mida kavatsete kasutada ainult pärimiseks.
• Dokumenteerige oma laiendused: Dokumenteerige selgelt, millised selektorid mida laiendavad. See muudab teistel arendajatel (ja teie tulevasel minal) CSS-i arhitektuuri mõistmise lihtsamaks.
• Testige põhjalikult: Testige oma CSS-i alati põhjalikult pärast @extend'i kasutamist, et veenduda, et stiile rakendatakse õigesti ja et pole ootamatuid kõrvalmõjusid. See on eriti oluline suurte või keerukate projektide puhul.

@extend'i võimalikud lõksud

Vaatamata oma eelistele võib @extend hoolimatul kasutamisel tekitada ka mõningaid potentsiaalseid probleeme.

• Suurenenud spetsiifilisus: Nagu varem mainitud, võib @extend suurendada selektori spetsiifilisust, mis võib muuta stiilide hilisema ülekirjutamise raskemaks.
• Varjatud sõltuvused: @extend'i loodud selektorite vahelised seosed võivad olla varjatud, mis muudab CSS-i arhitektuuri lühidalt mõistmise keeruliseks.
• Soovimatud tagajärjed: Mitmes kohas kasutatava selektori laiendamine võib põhjustada soovimatuid tagajärgi, kuna stiilid rakendatakse kõikidele elementidele, mis vastavad laiendavale selektorile.
• Ringlevad sõltuvused: @extend'iga on võimalik luua ringlevaid sõltuvusi (nt selektor A laiendab selektorit B ja selektor B laiendab selektorit A). See võib viia lõpmatute tsükliteni CSS-i kompileerimisel ja seda tuleks vältida.
• Spetsiifilisuse sõjad: @extend'i liigne kasutamine koos !important'i liberaalse kasutamisega võib kergesti tekitada kaskaadstiilide õudusunenägusid. On oluline arvestada, kuidas spetsiifilisus mõjutab teie disaini, kui kasutate @extend'i.

@extend vs. Mixin'id

Nii @extend kui ka mixin'id on CSS-i eelprotsessorites võimsad funktsioonid, mis aitavad teil kirjutada tõhusamat CSS-i. Kuid need töötavad erineval viisil ja neil on erinevad kasutusjuhud.

@extend:

• Pärib stiilid ühelt selektorilt teisele.
• Muudab CSS-selektoreid, et lisada laiendav selektor.
• Võib mõnel juhul viia väiksemate CSS-failideni.
• Sobib kõige paremini põhistiilide jagamiseks seotud elementide vahel.

Mixin'id:

• Kopeerib ja kleebib stiilid praegusesse selektorisse.
• Võimaldab teil edastada argumente stiilide kohandamiseks.
• Võib laialdasel kasutamisel viia suuremate CSS-failideni.
• Sobib kõige paremini korduvkasutatavate koodiplokkide loomiseks kohandatavate valikutega (nt tarnijaprefiksid, responsiivsed murdepunktid).

Üldiselt kasutage @extend'i, kui soovite jagada põhistiile seotud elementide vahel ja te ei pea stiile kohandama. Kasutage mixin'e, kui peate looma korduvkasutatavaid koodiplokke kohandatavate valikutega.

Vaadake seda näidet:

            
// Using Extend
.base-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button {
  @extend .base-button;
  background-color: blue;
  color: white;
}

// Using a Mixin
@mixin button-styles($bg-color, $text-color) {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: $bg-color;
  color: $text-color;
}

.secondary-button {
  @include button-styles(green, white);
}

            

              
                Copy
              
            
          

Natiivsed CSS-i alternatiivid: Stiilide pärimise tulevik

Kuigi @extend on peamiselt seotud CSS-i eelprotsessoritega, on esile kerkimas natiivseid CSS-i funktsioone, mis pakuvad sarnast funktsionaalsust, ehkki erinevate lähenemisviiside ja piirangutega. Üks selline funktsioon on @layer at-reegel (CSS Cascade Layers).

CSS kaskaadikihid (@layer)

Kaskaadikihid pakuvad viisi CSS-kaskaadi eesõiguse järjekorra kontrollimiseks. Kuigi see ei ole otsene asendus @extend'ile, saab seda kasutada sarnase stiilipärimise ja organiseerimise taseme saavutamiseks.

@layer'i peamine idee on määratleda eraldiseisvad stiilikihid ja kontrollida nende rakendamise järjekorda. See võimaldab teil luua põhistiile, mida on lihtne üle kirjutada spetsiifilisemate stiilidega järgnevates kihtides. See on eriti kasulik kolmandate osapoolte teekide või keerukate CSS-arhitektuuridega tegelemisel.

Näide:

            
@layer base {
  .button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
}

@layer theme {
  .button {
    background-color: blue;
    color: white;
  }
}

.special-button {
  @layer theme;
  background-color: red;
}


            

              
                Copy
              
            
          

Kuigi süntaks pole identne, loob see struktuur 'base' (põhi) stiilikihi ja 'theme' (teema) stiilikihi. Kuna `theme` kiht on pärast `base` kihti, kirjutab see põhistiilid üle. Märkus: Kaskaadikihid on endiselt suhteliselt uued ja ei pruugi olla kõikides brauserites täielikult toetatud. Kontrollige alati brauseri ühilduvust enne nende kasutamist tootmises.

Kokkuvõte

CSS @extend on võimas tööriist puhtama, paremini hooldatava ja tõhusama CSS-i kirjutamiseks. Mõistes selle eeliseid, kasutusjuhtumeid, parimaid praktikaid ja võimalikke lõkse, saate seda kasutada oma CSS-i arhitektuuri parandamiseks ja veebiarenduse töövoo sujuvamaks muutmiseks. Kuigi esile kerkivad natiivsed CSS-i alternatiivid nagu kaskaadikihid, jääb @extend väärtuslikuks tehnikaks, eriti töötades CSS-i eelprotsessoritega nagu Sass ja Less. Arvestades hoolikalt oma projekti vajadusi ja järgides selles juhendis toodud juhiseid, saate meisterlikult omandada stiilide pärimise ja luua kvaliteetset, hooldatavat CSS-i oma veebiprojektidele, olenemata sellest, kus maailmas teie sihtrühm asub.

Lisalugemist

• Sassi dokumentatsioon: https://sass-lang.com/documentation/at-rules/extend
• Lessi dokumentatsioon: http://lesscss.org/features/#extend-feature
• CSS kaskaadikihid: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer