5 minučių įvadas į stiliaus elementus

CSS yra keista. Jos pagrindus galite išmokti per 15 minučių. Tačiau gali prireikti metų, kol sugalvoji gerą savo stilių sutvarkymo būdą.

Iš dalies tai tik dėl pačios kalbos keiksmų. CSS yra gana ribotas, be jokių kintamųjų, kilpų ar funkcijų. Tuo pačiu metu tai yra gana leistina, nes galite stiliuoti elementus, klases, ID ar bet kurį jų derinį.

Chaotiško stiliaus lapai

Kaip jūs tikriausiai jau esate patyrę patys, tai dažnai yra chaoso receptas. Ir nors tokie pirminiai procesoriai kaip SASS ir LESS prideda daug naudingų funkcijų, jie tikrai nedaro daug priemonių CSS anarchijai sustabdyti.

Šis organizacinis darbas buvo paliktas tokioms metodikoms kaip BEM, kuri, nors ir naudinga, yra visiškai neprivaloma ir negali būti vykdoma kalbos ar įrankių lygiu.

Naujoji CSS banga

Keletas metų į priekį ir nauja „JavaScript“ pagrindu sukurtų įrankių banga bando išspręsti šias problemas iš esmės, pakeisdama CSS rašymo būdą.

„Styled Components“ yra viena iš šių bibliotekų ir ji greitai sulaukė daug dėmesio dėl savo naujovių ir pažinimo derinio. Taigi, jei naudojate „React“ (o jei nenaudojate, peržiūrėkite mano „Java“ tyrimo planą ir mano „React“ įvadą), tikrai verta pažvelgti į šią naują CSS alternatyvą.

Neseniai ja pasinaudojau kurdamas savo asmeninę svetainę ir šiandien norėjau pasidalyti keliais dalykais, kuriuos sužinojau proceso metu.

Komponentai, stiliaus

Svarbiausia, ką turite suprasti apie stiliaus elementus, kad jo pavadinimas turėtų būti vartojamas gana pažodžiui. Nebegalvojate HTML elementų ar komponentų pagal jų klasę ar HTML elementą:

Sveikas pasaulis

h1.title {
  šrifto dydis: 1,5em;
  spalva: violetinė;
}

Vietoj to, jūs apibrėžiate stilizuotus komponentus, kurie turi savo pačių įdėtą stilių. Tuomet laisvai naudojate šiuos duomenis savo pagrindinėje bazėje:

importuoti iš „stiliaus komponentų“;
const Pavadinimas = stiliaus.h1 “
  šrifto dydis: 1,5em;
  spalva: violetinė;
`;
 Sveikas pasaulis 

Tai gali atrodyti kaip nedidelis skirtumas, ir iš tikrųjų abi sintaksės yra labai panašios. Tačiau pagrindinis skirtumas yra tas, kad stiliai dabar yra jų komponentas.

Kitaip tariant, mes atsikratome CSS klasių kaip tarpinio žingsnio tarp komponento ir jo stilių.

Kaip teigia stiliaus komponentai, kūrėjas Maxas Stoiberis sako:

„Pagrindinė stiliaus komponentų idėja yra įgyvendinti geriausią praktiką pašalinant stilių ir komponentų atvaizdus.“

Pakrovimo sudėtingumas

Iš pradžių tai atrodys neintuityvu, nes CSS naudojimas, o ne tiesiogiai formuojantis HTML elementus (atsimeni žymą ?) Yra atskirti stilius ir žymėjimą įvedant šį tarpinį klasės sluoksnį.

Tačiau tas atsiejimas taip pat sukuria daug sudėtingumo ir reikia pateikti argumentą, kad, palyginti su CSS, tokia „tikra“ programavimo kalba, kaip „JavaScript“, yra daug geriau pritaikyta šiam sudėtingumui.

Rekvizitai per klases

Laikydamiesi šios klasių neturinčios filosofijos, stiliaus komponentai, remdamiesi klasių elementais, naudoja rekvizitus, kai reikia pritaikyti komponento elgesį. Taigi vietoj:

Sveikas pasaulis

// bus mėlynas
h1.title {
  šrifto dydis: 1,5em;
  spalva: violetinė;
  
  & .primary {
    spalva: mėlyna;
  }
}

Jūs rašytumėte:

const Pavadinimas = stiliaus.h1 “
  šrifto dydis: 1,5em;
  spalva: $ {rekvizitai => rekvizitai.primary? 'mėlyna': 'purpurinė'};
`;
 Sveikas pasaulis  // bus mėlynas

Kaip matote, stiliaus komponentai leidžia jums išvalyti „React“ komponentus, nesant jų visos CSS ir HTML diegimo informacijos.

Beje, stiliaus komponentų CSS vis dar yra CSS. Taigi tokie dalykai taip pat yra visiškai galiojantys (nors šiek tiek ne idiotiški) kodai:

const Pavadinimas = stiliaus.h1 “
  šrifto dydis: 1,5em;
  spalva: violetinė;
  
  & .primary {
    spalva: mėlyna;
  }
`;
 Sveikas pasaulis  // bus mėlynas

Tai yra viena ypatybė, dėl kurios labai lengva įsilieti į stiliaus elementus: kai kyla abejonių, visada galite sugrįžti prie to, ką žinote!

Įspėjimai

Taip pat svarbu paminėti, kad stiliaus komponentai yra dar jaunas projektas ir kad kai kurios funkcijos dar nėra visiškai palaikomos. Pvz., Jei norite formuoti vaiko komponentą iš tėvų, dabar turėsite pasikliauti CSS klasėmis (bent jau kol pasirodys stiliaus komponentai v2).

Taip pat dar nėra „oficialaus“ būdo, kaip iš anksto pateikti CSS serveryje, nors tai tikrai įmanoma, įvesdami stilius rankiniu būdu.

O tai, kad stiliaus komponentai generuoja savo pasirinktinius klasių pavadinimus, gali apsunkinti jūsų naršyklės dev įrankių naudojimą išsiaiškinti, kur iš pradžių buvo apibrėžti jūsų stiliai.

Tačiau labai džiugina tai, kad pagrindinė komanda, kurios stilistika yra žinoma, žino visas šias problemas ir sunkiai dirba, spręsdama jas po vieną. Netrukus pasirodys 2 versija ir aš to labai laukiu!

Sužinokite daugiau

Mano tikslas yra ne išsamiai paaiškinti, kaip veikia stiliaus komponentai, bet daugiau suteikti jums šiek tiek žvilgsnio, kad galėtumėte patys nuspręsti, ar verta tai patikrinti.

Jei man pavyko jus sudominti, pateiksiu keletą vietų, kur galite sužinoti daugiau apie stiliaus komponentus:

  • Maxas Stoiberis neseniai parašė straipsnį apie „Smashing Magazine“ stiliaus komponentų priežastį.
  • Pats suprojektuotų komponentų atpirkimas turi išsamią dokumentaciją.
  • Šiame Jamie Dixono straipsnyje aprašomi keli perėjimo prie stiliaus komponentų pranašumai.
  • Jei norite sužinoti daugiau apie tai, kaip biblioteka realiai įgyvendinama, peržiūrėkite šį Maxo straipsnį.

Ir jei norite žengti dar toliau, taip pat galite sužinoti apie „Glamour“ - kitokį naujų bangų CSS pasirinkimą!

Savireklamos laikas: mes ieškome atvirojo kodo bendraautorių, galinčių padėti naudojant „Nova“. Tai yra paprasčiausias būdas sukurti „React“ ir „GraphQL“ programas, užpildytas formomis, duomenų įkėlimu ir vartotojo abonementais. Kol kas nenaudojame stiliaus komponentų, tačiau jūs galite būti pirmasis juos įgyvendinęs!