CSS @extend: Stilu pārmantošanas meistarība efektīvai tīmekļa izstrādei

Pastāvīgi mainīgajā tīmekļa izstrādes pasaulē tīra, uzturama un efektīva CSS rakstīšana ir vissvarīgākā. Viena spēcīga tehnika, kas var ievērojami uzlabot jūsu CSS arhitektūru, ir @extend direktīva. Šī funkcija, kas bieži sastopama CSS preprocesoros, piemēram, Sass un Less (bet ar dažām atrunām pieejama arī natīvā CSS, kā mēs apspriedīsim), ļauj pārmantot stilus no viena selektora uz otru, samazinot dublēšanos un veicinot organizētāku kodu bāzi. Šī rokasgrāmata padziļināti aplūkos @extend direktīvu, izpētot tās priekšrocības, lietošanas gadījumus, labākās prakses un iespējamos trūkumus.

Kas ir CSS @extend?

@extend direktīva būtībā kopē viena CSS selektora definētos stilus un piemēro tos citam. Tas ir līdzīgi objektorientētās programmēšanas pārmantošanas principiem, kur klase (selektors) var pārmantot īpašības un metodes (stilus) no vecāku klases (selektora). Galvenais mērķis ir ievērot DRY (Don't Repeat Yourself - neatkārto sevi) principu, samazinot koda dublēšanos un padarot jūsu stila lapas vieglāk pārvaldāmas un atjaunināmas.

Atšķirībā no miksiniem (mixins) (cita izplatīta funkcija CSS preprocesoros), @extend nevis vienkārši kopē un ielīmē stilus. Tā vietā tā modificē CSS selektorus, lai iekļautu paplašinošo selektoru. Tas var novest pie efektīvāka CSS iznākuma, īpaši strādājot ar sarežģītiem stiliem.

@extend izmantošanas priekšrocības

• DRY CSS: Izvairieties no vienu un to pašu stilu atkārtošanas vairākās vietās. Tas padara jūsu CSS vieglāk lasāmu, rakstāmu un uzturamu. Iedomājieties, ka uzturat vietni ar stila noteikumiem, kas izkaisīti pa daudziem failiem; globāla stila maiņa kļūst par murgu. @extend novērš šo problēmu.
• Uzturamība: Kad jums nepieciešams atjaunināt stilu, jums tas jāmaina tikai vienā vietā. Tas samazina kļūdu un neatbilstību risku. Apsveriet scenāriju, kurā pogu stili ir definēti atkārtoti visā vietnes CSS. Ja jums ir nepieciešams pielāgot visu pogu atstarpes (padding), jums būtu jāatrod un jāmodificē katrs gadījums. @extend ļauj modificēt pamata pogas stilu, un visi paplašinošie stili tiek automātiski atjaunināti.
• Veiktspēja: Dažos gadījumos @extend var radīt mazākus CSS failus salīdzinājumā ar miksiniem, jo tas izvairās no vienu un to pašu stilu vairākkārtējas dublēšanas. Tas nodrošina ātrāku lapas ielādes laiku un uzlabotu vietnes veiktspēju.
• Semantiskais CSS: @extend izmantošana var palīdzēt jums izveidot semantiskāku CSS, izveidojot skaidras attiecības starp dažādiem elementiem jūsu lapā. Piemēram, jūs varat izveidot pamata stilu visiem paziņojumiem un pēc tam to paplašināt dažādiem paziņojumu veidiem (veiksmīgs, brīdinājums, kļūda).

Praktiski @extend piemēri

Ilustrēsim @extend spēku ar dažiem praktiskiem piemēriem. Mēs izmantosim Sass sintaksi, jo tas ir populārs un labi atbalstīts CSS preprocesors. Tomēr šie koncepti ir pārnesami uz citiem preprocesoriem, piemēram, Less, vai pat uz natīvo CSS ar eksperimentālo @layer at-rule (vairāk par to vēlāk).

1. piemērs: Pamata pogu stili

Pieņemsim, ka jums ir primārās pogas stils, kuru vēlaties piemērot citām pogu variācijām.

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
              
            
          

Kompilētais 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
              
            
          

Ievērojiet, kā kompilētais CSS grupē selektorus, kuriem ir vienādi pamata stili. Tas ir efektīvāk nekā dublēt pamata stilus katrā pogas variācijā.

2. piemērs: Formas elementi

Jūs varat izmantot @extend, lai izveidotu konsekventu izskatu un sajūtu jūsu formas elementiem.

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
              
            
          

3. piemērs: Brīdinājuma paziņojumi

Dažādiem brīdinājumu veidiem var būt kopīgi stili, bet atšķirīgas krāsas vai ikonas.

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
              
            
          

Labākās prakses @extend lietošanai

Lai gan @extend ir spēcīgs rīks, ir svarīgi to lietot apdomīgi un ievērot labākās prakses, lai izvairītos no potenciālām problēmām.

• Lietojiet ar semantiskiem selektoriem: @extend vislabāk darbojas ar semantiskiem selektoriem (piem., .button, .form-control), nevis ar pārāk specifiskiem selektoriem (piem., #content .article p). Specifisku selektoru paplašināšana var novest pie cieši saistīta CSS, ko ir grūti pārveidot.
• Izvairieties no paplašināšanas starp failiem: Selektoru paplašināšana starp dažādiem CSS failiem var apgrūtināt stilu savstarpējo attiecību izpratni. Parasti vislabāk ir saglabāt paplašinājumus vienā failā vai modulī.
• Esiet uzmanīgi ar selektoru specifiskumu: @extend var ietekmēt selektoru specifiskumu. Paplašinošais selektors pārmantos paplašinātā selektora specifiskumu. Tas dažkārt var izraisīt negaidītu uzvedību, ja neesat uzmanīgs. Piemēram, ja jūs paplašināt ID selektoru, paplašinošajai klasei būs tāds pats augsts specifiskums.
• Apsveriet viettura selektoru izmantošanu: Viettura selektori (piem., %base-styles Sass) ir īpaši paredzēti lietošanai ar @extend. Tie netiek iekļauti gala CSS, ja vien tie nav paplašināti. Tas ir noderīgi, lai definētu pamata stilus, kurus plānojat izmantot tikai pārmantošanai.
• Dokumentējiet savus paplašinājumus: Skaidri dokumentējiet, kuri selektori paplašina kurus. Tas atvieglos citiem izstrādātājiem (un jums pašam nākotnē) izprast CSS arhitektūru.
• Rūpīgi testējiet: Vienmēr rūpīgi testējiet savu CSS pēc @extend izmantošanas, lai pārliecinātos, ka stili tiek piemēroti pareizi un nav negaidītu blakusparādību. Tas ir īpaši svarīgi, strādājot pie lieliem vai sarežģītiem projektiem.

Iespējamie @extend trūkumi

Neskatoties uz tā priekšrocībām, @extend var radīt arī dažas potenciālas problēmas, ja to nelieto uzmanīgi.

• Paaugstināts specifiskums: Kā minēts iepriekš, @extend var palielināt selektoru specifiskumu, kas vēlāk var apgrūtināt stilu pārrakstīšanu.
• Slēptās atkarības: Attiecības starp selektoriem, ko rada @extend, var būt slēptas, apgrūtinot CSS arhitektūras izpratni uzreiz.
• Negaidītas sekas: Selektora paplašināšanai, kas tiek izmantots vairākās vietās, var būt negaidītas sekas, jo stili tiks piemēroti visiem elementiem, kas atbilst paplašinošajam selektoram.
• Cikliskās atkarības: Ar @extend ir iespējams izveidot cikliskas atkarības (piem., selektors A paplašina selektoru B, un selektors B paplašina selektoru A). Tas var novest pie bezgalīgiem cikliem CSS kompilēšanas laikā, un no tā vajadzētu izvairīties.
• Specifiskuma kari: Pārmērīga @extend lietošana kopā ar brīvu `!important` lietošanu var viegli radīt kaskādes stilu murgus. Ir svarīgi apsvērt, kā specifiskums ietekmē jūsu dizainu, izmantojot @extend.

@extend pretstatā Mixins

Gan @extend, gan miksini (mixins) ir spēcīgas funkcijas CSS preprocesoros, kas var palīdzēt jums rakstīt efektīvāku CSS. Tomēr tie darbojas dažādos veidos un tiem ir dažādi lietošanas gadījumi.

@extend:

• Pārmanto stilus no viena selektora uz otru.
• Modificē CSS selektorus, lai iekļautu paplašinošo selektoru.
• Dažos gadījumos var radīt mazākus CSS failus.
• Vislabāk piemērots pamata stilu koplietošanai starp saistītiem elementiem.

Miksini:

• Kopē un ielīmē stilus pašreizējā selektorā.
• Ļauj nodot argumentus, lai pielāgotu stilus.
• Var radīt lielākus CSS failus, ja tiek plaši izmantoti.
• Vislabāk piemēroti atkārtoti lietojamu koda bloku izveidei ar pielāgojamām opcijām (piem., piegādātāju prefiksi, responsīvie pārtraukumpunkti).

Kopumā, izmantojiet @extend, kad vēlaties koplietot pamata stilus starp saistītiem elementiem un jums nav nepieciešams pielāgot stilus. Izmantojiet miksinus, kad jums ir nepieciešams izveidot atkārtoti lietojamus koda blokus ar pielāgojamām opcijām.

Apsveriet šo piemēru:

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

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

// Lietojot 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
              
            
          

Natīvās CSS alternatīvas: Stilu pārmantošanas nākotne

Lai gan @extend galvenokārt tiek saistīts ar CSS preprocesoriem, parādās jaunas natīvās CSS funkcijas, kas piedāvā līdzīgu funkcionalitāti, kaut arī ar atšķirīgām pieejām un ierobežojumiem. Viena no šādām funkcijām ir @layer at-rule (CSS kaskādes slāņi).

CSS kaskādes slāņi (@layer)

Kaskādes slāņi nodrošina veidu, kā kontrolēt prioritātes secību CSS kaskādē. Lai gan tas nav tiešs @extend aizstājējs, to var izmantot, lai sasniegtu līdzīgu stilu pārmantošanas un organizācijas līmeni.

Galvenā ideja aiz @layer ir definēt atšķirīgus stilu slāņus un kontrolēt to piemērošanas secību. Tas ļauj jums izveidot pamata stilus, kurus viegli pārraksta specifiskāki stili nākamajos slāņos. Tas ir īpaši noderīgi, strādājot ar trešo pušu bibliotēkām vai sarežģītām CSS arhitektūrām.

Piemērs:

            
@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
              
            
          

Lai gan sintakse nav identiska, šī struktūra izveido 'base' (pamata) stilu slāni un 'theme' (tēmas) stilu slāni. Tā kā `theme` slānis ir pēc `base`, tas pārrakstīs pamata stilus. Piezīme: Kaskādes slāņi joprojām ir salīdzinoši jauni un var nebūt pilnībā atbalstīti visās pārlūkprogrammās. Pirms to izmantošanas produkcijā vienmēr pārbaudiet pārlūkprogrammu saderību.

Noslēgums

CSS @extend ir spēcīgs rīks tīrāka, uzturamāka un efektīvāka CSS rakstīšanai. Izprotot tā priekšrocības, lietošanas gadījumus, labākās prakses un iespējamos trūkumus, jūs varat to izmantot, lai uzlabotu savu CSS arhitektūru un pilnveidotu savu tīmekļa izstrādes darbplūsmu. Lai gan parādās natīvās CSS alternatīvas, piemēram, kaskādes slāņi, @extend joprojām ir vērtīga tehnika, īpaši strādājot ar CSS preprocesoriem, piemēram, Sass un Less. Rūpīgi apsverot sava projekta vajadzības un ievērojot šajā rokasgrāmatā izklāstītās vadlīnijas, jūs varat apgūt stilu pārmantošanu un izveidot augstas kvalitātes, uzturamu CSS saviem tīmekļa projektiem neatkarīgi no tā, kur pasaulē atrodas jūsu auditorija.

Papildu mācību materiāli

• Sass dokumentācija: https://sass-lang.com/documentation/at-rules/extend
• Less dokumentācija: http://lesscss.org/features/#extend-feature
• CSS kaskādes slāņi: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer