Kažkada CSS buvo grynai pateikimo (prezentacinė) kalba. Ji imperatyviai tvarkė šriftus, spalvas, fonus, tarpus, išdėstymus ir kitus žymėjimo kalbų stilius. Tai buvo kalba išvaizdai, daranti tai, ko jos prašoma, niekada negalvojanti ir nepriimanti sprendimų. Bent jau tam ji buvo sukurta, kai Håkon Wium Lie 1994 m. pasiūlė CSS, o Pasaulinio tinklo konsorciumas (W3C) ją priėmė po dvejų metų.
Persikelkime į šiandieną – daug kas pasikeitė pridėjus naujų funkcijų, o dar daugiau jų yra pakeliui, perkeliančių stilių kalbą į labiau imperatyvią paradigmą. Dabar CSS aktyviai palaiko sudėtingas prisitaikančias ir interaktyvias vartotojo sąsajas. Su naujausiais pasiekimais, tokiais kaip konteinerio užklausos, reliacinės pseudo-klasės ir if() funkcija, kalba, kadaise buvusi pateikimo srityje, įžengė į logikos teritoriją, sumažindama savo priklausomybę nuo kalbos, kuri iki šiol tvarkė jos loginį aspektą – „JavaScript“.
Šis pokytis kelia įdomių klausimų apie CSS ir jos ateitį programuotojams. CSS sąmoningai ilgą laiką išliko tik stilizavimo srityje, bet ar atėjo laikas tai pakeisti? Taip pat, ar CSS vis dar yra pateikimo kalba, kaip ir pradžioje, ar ji tampa kažkuo daugiau ir didesniu? Šis straipsnis nagrinėja, kokia protinga CSS tapo per metus, kur link ji juda, kokias problemas sprendžia, ar ji tampa per sudėtinga, ir kaip programuotojai reaguoja į šį pokytį.
Istorinis kontekstas: sąmoningas CSS paprastumas
Žvilgsnis į CSS istoriją rodo kalbą, gimusią atskirti turinį nuo pateikimo, kad tinklalapius būtų lengviau valdyti ir prižiūrėti. Pirmoji oficiali CSS versija, CSS1, buvo išleista 1996 m. ir pristatė pagrindines stilizavimo galimybes, tokias kaip šrifto savybės, spalvos, dėžutės modelis (atitraukimas iš vidaus, išorės ir rėmelis), dydžiai (plotis ir aukštis), keletas paprastų rodymo tipų (none, block ir inline) ir pagrindiniai selektoriai.
Po dvejų metų buvo išleista CSS2, kuri praplėtė tai, ką CSS galėjo stilizuoti HTML, pridėdama tokias funkcijas kaip pozicionavimas, z-index, patobulinti selektoriai, lentelių išdėstymai ir medijos tipai skirtingiems įrenginiams. Tačiau stilių kalboje buvo nenuoseklumų – problemą, kurią CSS2.1 išsprendė 2011 m., tapdama modernaus CSS standartu. Tai supaprastino interneto kūrimą ir svetainių priežiūrą.
Tarp CSS1 ir CSS2.1 metų CSS buvo didžiąja dalimi statinė ir deklaratyvi. Programuotojai savo projektuose patyrė ir nusivylimų, ir proveržių. Dėl intuityvių išdėstymo įrankių, tokių kaip „Flexbox“ ir „CSS Grid“, nebuvimo, programuotojai rėmėsi „hakeriškomis“ alternatyvomis su lentelių išdėstymais, pozicionavimu ar slankiaisiais elementais (angl. floats), kad įgyvendintų sudėtingus dizainus, nors slankieji elementai iš pradžių buvo skirti tekstui aplenkti kliūtį tinklalapyje, dažniausiai medijos objektą. Dėl to programuotojai susidūrė su problemomis, tokiomis kaip susitraukiantys konteineriai ir netikėtas elementų išsidėstymas. Nepaisant to, bazinis stilizavimas buvo intuityvus. Naujokas galėjo lengvai pradėti mokytis interneto kūrimo šiandien ir jau kitą dieną pridėti bazinį stilių. CSS buvo atskirta nuo turinio ir logikos, todėl ji buvo labai našus ir lengvasvoris.
CSS3: Pirmas žingsnis link konteksto suvokimo
Viskas pasikeitė, kai buvo išleista CSS3. Programuotojai tikėjosi vieno monolitinio atnaujinimo, kaip ir ankstesnėse versijose, tačiau jų lūkesčiai ir naujausio leidimo realybė nesutapo. CSS3 raudonas kilimas atskleidė modulinę sistemą su galingais išdėstymo įrankiais, tokiais kaip „Flexbox“, „CSS Grid“ ir medijos užklausos, pirmą kartą apibrėžiančiais, kaip programuotojai kuria prisitaikančius dizainus. Su daugiau nei 20 modulių, CSS3 pažymėjo „protingesnės CSS“ pradžią.
„Flexbox“ įdiegimas apie 2012 m. suteikė lanksčią, vienmatę išdėstymo sistemą, o 2017 m. paleistas „CSS Grid“ išdėstymą pakėlė dar aukščiau, pasiūlydamas dvimatę išdėstymo sistemą, leidžiančią kurti sudėtingus dizainus su minimaliu kodu. Šie pasiekimai, kaip aptarė Chris Coyier, sumažino priklausomybę nuo tokių „hakų“ kaip slankieji elementai.
Tai dar ne viskas. Yra medijos užklausos, ryškus CSS3 leidimas, kuris yra vienas pagrindinių šios protingos CSS elementų. Su medijos užklausomis CSS gali reaguoti į skirtingų įrenginių ekranus, pritaikydama savo stilius prie ekrano matmenų, kraštinių santykio ir orientacijos – tai pasiekimas, kurio ankstesnės versijos negalėjo lengvai įgyvendinti. Penktajame lygyje ji pridėjo vartotojo nuostatų medijos savybes, tokias kaip prefers-color-scheme ir prefers-reduced-motion, padarydama CSS labiau orientuotą į vartotoją, pritaikant stilius prie vartotojo nustatymų ir gerinant prieinamumą.
CSS3 pažymėjo kontekstą suvokiančios CSS pradžią.
Konteksto suvokimas – tai gebėjimas suprasti ir atitinkamai reaguoti į situaciją aplink save ar savo aplinkoje. Tai reiškia, kad sistemos ir įrenginiai gali jausti kritinę informaciją, pavyzdžiui, jūsų buvimo vietą, paros laiką ir veiklą, ir atitinkamai prisitaikyti.
Interneto kūrime terminas „konteksto suvokimas“ visada buvo naudojamas kalbant apie komponentus, bet kas lemia kontekstą suvokiantį komponentą? Jei paminėjote ką nors kita, išskyrus komponento stilius, klydote! Kad komponentas būtų laikomas kontekstą suvokiančiu, jis turi jausti savo aplinkos buvimą ir žinoti, kas joje vyksta. Pavyzdžiui, kad jūsų svetainė atnaujintų savo stilius, pritaikydama tamsųjį režimą, ji turi žinoti apie vartotojo nuostatas. Taip pat, norėdama pakeisti savo išdėstymą, svetainė turi žinoti, kokiu įrenginiu vartotojas ją pasiekia – ir dėka vartotojo nuostatų medijos užklausų, tai yra įmanoma.
Nepaisant šių funkcijų, CSS išliko didžiąja dalimi reaktyvi. Ji reagavo į išorinius veiksnius, tokius kaip ekrano dydis (per medijos užklausas) ar įvesties būsenas (pvz., :hover, :focus ar :checked), bet niekada nepriėmė sprendimų, pagrįstų pokyčiais savo aplinkoje. Dėl tokio lygio interaktyvumo programuotojai paprastai kreipdavosi į „JavaScript“.
Tačiau nebe.
Pavyzdžiui, su konteinerio užklausomis ir, naujausiu metu, konteinerio stiliaus užklausomis, CSS dabar reaguoja ne tik į išdėstymo apribojimus, bet ir į dizaino intenciją. Ji gali prisitaikyti pagal komponento aplinką ir net jo tėvinio elemento temą ar būseną. Ir tai dar ne viskas. Neseniai specifikuota if() funkcija žada įterptinę sąlyginę logiką, leidžiančią stiliams keistis priklausomai nuo sąlygų, ir visa tai galima pasiekti be scenarijų.
Šie pokyčiai rodo, kad CSS pereina nuo pateikimo prie elgsenos tvarkymo, kvestionuodama savo tradicinį vaidmenį.
Naujos CSS funkcijos, skatinančios intelektą
Kelios funkcijos šiuo metu stumia CSS link dinamiško ir adaptyvaus krašto, taip darydamos ją protingesne, tačiau verta paminėti šias dvi: konteinerio stiliaus užklausos ir if() funkcija.
Kas yra konteinerio stiliaus užklausos ir kodėl jos svarbios?
Norint geriau suprasti, kas yra konteinerio stiliaus užklausos, prasminga trumpam stabtelėti prie artimos giminaitės: konteinerio dydžio užklausų, pristatytų CSS apribojimo modulio 3 lygyje.
Konteinerio dydžio užklausos leidžia programuotojams stilizuoti elementus pagal jų tėvinio konteinerio matmenis. Tai didžiulis laimėjimas komponentais pagrįstiems dizainams, nes pašalina poreikį įsprausti prisitaikančius stilius į globalias medijos užklausas.
/* Size-based container query */
@container (min-width: 500px) {
.card {
flex-direction: row;
}
}Konteinerio stiliaus užklausos eina dar toliau, leisdamos jums stilizuoti elementus pagal pasirinktines savybes (dar žinomas kaip CSS kintamuosius), nustatytas konteineryje.
/* Style-based container query */
@container style(--theme: dark) {
.button {
background: black;
color: white;
}
}Šios funkcijos yra didelis dalykas CSS, nes jos atveria kontekstą suvokiančių komponentų galimybes. Mygtukas gali keisti išvaizdą pagal tėvinio elemento nustatytą --theme savybę, nenaudojant „JavaScript“ ar fiksuotų klasių.
if() funkcija: žvilgsnis į ateitį
CSS if() funkcija gali būti pats radikaliausias pokytis. Kai ji bus įdiegta („Chrome“ yra vienintelė, kuri ją palaiko, nuo 137 versijos), ji leis programuotojams rašyti įterptinę sąlyginę logiką tiesiogiai savybių deklaracijose. Galvokite apie ternarinį operatorių CSS.
padding: if(style(--theme: dark): 2rem; else: 3rem);Ši hipotetinė eilutė ar pseudo kodas, ne sintaksė, nustato teksto spalvą į baltą, jei --theme kintamasis lygus dark, arba juodą kitu atveju. Šiuo metu if() funkcija nepalaikoma jokiose naršyklėse, tačiau ji yra CSS darbo grupės akiratyje, o įtakingi programuotojai, tokie kaip Lea Verou, jau tiria jos galimybes.
Naujoji CSS: ar nyksta riba tarp CSS ir „JavaScript“?
Tradiciškai, atsakomybių pasidalijimas stilizavimo atžvilgiu buvo toks: CSS – kaip viskas atrodo, o „JavaScript“ – kaip viskas veikia. Tačiau tokios funkcijos kaip konteinerio stiliaus užklausos ir specifikuota if() funkcija pradeda trinti šią ribą. CSS pradeda elgtis – ne API iškvietimų ar įvykių klausytojų prasme, o gebėjimu sąlygiškai taikyti stilius, pagrįstus logika ar kontekstu.
Evoliucionuojant interneto kūrimui, CSS pradėjo veržtis į „JavaScript“ teritoriją. CSS3 atnešė animacijas ir perėjimus – galingą derinį interaktyviam interneto kūrimui, kuris anksčiau buvo neįmanomas be „JavaScript“. Šiandien tyrimai rodo, kad CSS perėmė kelias interaktyvias užduotis, kurias anksčiau tvarkė „JavaScript“. Pavyzdžiui, :hover pseudo-klasė ir transition savybė leidžia sukurti vizualinį grįžtamąjį ryšį ir sklandžias animacijas, kaip aptariama „Interaktyvumo suteikimas jūsų svetainei su interneto standartais“.
Tai dar ne viskas. Akordeonų ir modalinių langų perjungimas anksčiau priklausė „JavaScript“ sričiai, tačiau šiandien tai įmanoma su naujais galingais CSS deriniais, tokiais kaip <details> ir <summary> HTML žymės akordeonams arba modaliniams langams su :target pseudo-klase. CSS taip pat gali tvarkyti paaiškinimus (angl. tooltips), naudojant aria-label su content: attr(aria-label), ir žvaigždučių vertinimus su radijo mygtukais ir etiketėmis, kaip išsamiai aprašyta tame pačiame straipsnyje.
Kitame straipsnyje, „5 dalykai, kuriuos galite padaryti su CSS vietoj „JavaScript““, išvardijamos tokios funkcijos kaip scroll-behavior: smooth sklandžiam slinkimui ir @media (prefers-color-scheme: dark) tamsiajam režimui – užduotys, kurioms kadaise reikėjo „JavaScript“. Tame pačiame straipsnyje taip pat galite pamatyti, kad įmanoma sukurti karuselę be „JavaScript“, naudojant CSS slinkimo pritraukimo (angl. scroll snapping) funkciją (ir mes net nekalbame apie funkcijas, sukurtas specialiai karuselėms kurti tik CSS, kurios neseniai buvo prototipuotos „Chrome“).
Šie CSS išsiplėtimai į „JavaScript“ sritį dabar paliko pastarajai tik sudėtingų, esminių sąveikų tvarkymą interneto programoje, pavyzdžiui, vartotojo įvestis, API iškvietimus ir būsenos valdymą. Nors CSS pseudo-klasės, tokios kaip :valid ir :invalid, gali padėti kaip klaidų ar sėkmės indikatoriai įvesties elementuose, jums vis tiek reikia „JavaScript“ dinaminiam turinio atnaujinimui, formų validavimui ir realaus laiko duomenų gavimui.
CSS dabar sprendžia problemas, apie kurias daugelis programuotojų net nežinojo. Pašalinus „JavaScript“ iš daugelio stiliaus scenarijų, programuotojai dabar turi supaprastintas kodo bazes. Priklausomybių yra mažiau, pridėtinių išlaidų mažiau, o svetainės našumas geresnis, ypač mobiliuosiuose įrenginiuose. Tiesą sakant, šis pokytis artina CSS prie prieinamesnio interneto, nes CSS pagrįstus dizainus dažnai lengviau apdoroti naršyklėms ir pagalbinėms technologijoms.
Nors naujos funkcijos atneša daug naudos, jos taip pat įveda sudėtingumų, kurių anksčiau nebuvo:
- Kas nutinka, kai logika paskirstyta ir CSS, ir „JavaScript“?
- Kaip derinti sąlyginius stilius be aiškaus vaizdo, kas juos sukėlė?
- CSS anksčiau tvarkė tik pagrindinį stilizavimą, pavyzdžiui, spalvas, šriftus, išdėstymus ir tarpus, kuriuos naujiems programuotojams buvo lengviau įsisavinti. Kiek sudėtingesnė tampa mokymosi kreivė, kai šios naujos funkcijos reikalauja suprasti koncepcijas, kurios kadaise buvo išskirtinai „JavaScript“ sritis?
Programuotojai yra pasidaliję. Nors vieni džiaugiasi protingesnio, labiau į komponentus orientuoto interneto natūralios evoliucijos idėja, kiti nerimauja, kad CSS tampa per sudėtinga – kalba, iš pradžių skirta dokumentų formatavimui, dabar žongliruoja logikos medžiais ir stiliaus skaičiavimais.
Pasidalijusi nuomonė: ar logika CSS yra naudinga, ar žalinga?
Nors įrodymai ankstesnėje skiltyje linksta prie ribų nykimo, tarp programuotojų yra didelių nesutarimų. Daugelis modernių programuotojų teigia, kad logika CSS jau seniai reikalinga. Augant komponentų svarbai interneto kūrime, deklaratyvaus stilizavimo apribojimai tapo akivaizdesni, todėl šalininkai mato logiką kaip būtiną evoliuciją kadaise buvusiai grynai stilizavimo kalbai.
Pavyzdžiui, „frontend“ bibliotekose, tokiose kaip „React“, komponentams dažnai reikia sąlyginių stilių, pagrįstų savybėmis (angl. props) ar būsenomis. Programuotojai turėjo tenkintis „JavaScript“ arba „CSS-in-JS“ sprendimais tokiais atvejais, tačiau tiesa yra ta, kad šie sprendimai nėra teisingi. Jie įveda sudėtingumą ir susieja stilius su logika. CSS ir „JavaScript“ turėtų turėti atskiras atsakomybes interneto kūrime, bet tokios bibliotekos kaip „CSS-in-JS“ ignoravo taisykles ir sujungė abi.
Matėme, kaip preprocesoriai, tokie kaip SASS ir LESS, įrodė sąlygų, ciklų ir kintamųjų naudingumą stilizavime. Programuotojai, kurie nepriima CSS „JavaScript“ metode, tenkinosi šiais preprocesoriais. Nepaisant to, kaip ir Adam Argyle, jie išreiškia poreikį vietiniams CSS sprendimams. Su vietinėmis sąlygomis programuotojai galėtų sumažinti „JavaScript“ pridėtines išlaidas ir išvengti klasių perjungimo vykdymo metu, kad pasiektų sąlyginį pateikimą.
„Man niekada neatrodė teisinga manipuliuoti stiliaus nustatymais „JavaScript“, kai CSS yra tinkamas įrankis šiam darbui. Su CSS pasirinktinėmis savybėmis galime siųsti į CSS tai, kas turi ateiti iš „JavaScript“.“
— Chris Heilmann
Taip pat, Bob Ziroll nemėgsta naudoti „JavaScript“ tam, kam skirta CSS, ir mano, kad tai nereikalinga. Tai atspindi pirmenybę teikti CSS stilizavimo užduotims, net kai dalyvauja „JavaScript“. Šie programuotojai priima naujas CSS galimybes, matydami tai kaip būdą sumažinti priklausomybę nuo „JavaScript“ dėl našumo priežasčių.
Kiti argumentuoja prieš. Logikos įvedimas į CSS yra slidus kelias, ir CSS gali prarasti savo pagrindines stiprybes – paprastumą, skaitomumą ir prieinamumą – tapdama per daug panaši į programavimo kalbą. Baiminamasi, kad programuotojai rizikuoja sukomplikuoti internetą labiau, nei turėtų būti.
„Aš esu senamadiška. Man patinka, kai mano CSS atskirtas nuo mano HTML; mano HTML atskirtas nuo mano JS; mano JS atskirtas nuo mano CSS.“
— Sara Soueidan
Šis požiūris pabrėžia tradicinį atsakomybių atskyrimą, teigiant, kad vaidmenų maišymas gali apsunkinti priežiūrą. Be to, Brad Frost taip pat išreiškė skepticizmą, kalbėdamas konkrečiai apie „CSS-in-JS“, teigdamas, kad jis „nepritaikomas aplinkoms be JS karkasų, prideda daugiau triukšmo jau ir taip triukšmingam JS failui, o matyti demonstraciniai pavyzdžiai neatspindėjo CSS geriausių praktikų.“ Tai pabrėžia susirūpinimą dėl mastelio ir geriausių praktikų, rodant, kad išnykusi riba ne visada gali būti naudinga.
Bendruomenės diskusijos, pavyzdžiui, „Stack Overflow“, taip pat atspindi šį pasidalijimą. Klausimas, pavyzdžiui, „Ar visada geriau naudoti CSS, kai įmanoma, vietoj JS?“, sulaukia atsakymų, palaikančių CSS dėl našumo ir paprastumo, tačiau kiti teigia, kad „JavaScript“ yra būtinas sudėtingiems scenarijams, iliustruodami vykstančią diskusiją. Neapsigaukite. Gali atrodyti patogu sutikti, kad CSS veikia geriau nei „JavaScript“ stilizavime, bet taip yra ne visada.
Protingesnė CSS, neprarandant savo sielos
CSS visada išsiskyrė iš visaverčių programavimo kalbų, tokių kaip „JavaScript“, būdama deklaratyvi, prieinama ir orientuota į tikslą.
Jei CSS turi tapti protingesnė, iššūkis slypi ne tame, kad ji taptų galingesnė pati savaime, o tame, kad ji evoliucionuotų nepakenkdama savo pagrindinei paskirčiai.
Tad kaip galėtų atrodyti logiškai praturtinta, bet vis dar deklaratyvi CSS? Išsiaiškinkime.
Sąlyginės taisyklės (if(), @when…@else) su atsargiai įvesta logika
Svarbi CSS evoliucijos sritis yra vietinių sąlygų įvedimas per if() funkciją ir @when…@else taisykles, kurios yra CSS sąlyginių taisyklių modulio 5 lygio specifikacijos dalis. Nors vis dar ankstyvojoje juodraščio stadijoje, tai leistų programuotojams taikyti stilius, pagrįstus įvertintomis sąlygomis, nesikreipiant į „JavaScript“ ar preprocesorių. Skirtingai nuo imperatyvaus „JavaScript“ pobūdžio, šios sąlygos siekia išlaikyti logiką integruotą į esamą CSS srautą, suderintą su kaskada ir specifiškumu.
Galingesni, tikslingesni selektoriai
Selektoriai visada buvo viena iš pagrindinių CSS stiprybių, ir tikslingas jų plėtimas palengvintų ryšių ir sąlygų deklaratyvų išreiškimą, nereikalaujant klasių ar scenarijų. Šiuo metu :has() leidžia programuotojams stilizuoti tėvinį elementą pagal vaikinį, o :nth-child(An+B [of S]?) („Selectors Level 4“) leidžia sudėtingesnius atitikimo modelius. Kartu jie leidžia didesnį tikslumą, nekeičiant CSS prigimties.
Lokalizuotas stilius be „JavaScript“
Vienas iš iššūkių, su kuriais susiduria programuotojai komponentais pagrįstuose karkasuose, tokiuose kaip „React“ ar „Vue“, yra stiliaus lokalizavimas. Stiliaus lokalizavimas užtikrina, kad stiliai taikomi tik konkretiems elementams ar komponentams ir „neišteka“ į išorę. Anksčiau, norint tai pasiekti, reikėjo įdiegti BEM pavadinimų konvencijas, „CSS-in-JS“ arba kūrimo įrankius, tokius kaip „CSS Modules“. Vietinis lokalizuotas stilius CSS, per naują eksperimentinę @scope taisyklę, leidžia programuotojams apgaubti stilius konkrečiame kontekste be papildomų įrankių. Ši funkcija daro CSS moduliškesnę, nesusiejant jos su „JavaScript“ logika ar sudėtingomis klasių sistemomis.
Dabar fundamentalus dizaino klausimas yra, ar galėtume suteikti CSS daugiau galių, nepadarydami jos panašios į „JavaScript“. Tiesa ta, kad norint suteikti CSS sąlyginę logiką, galingus selektorius ir lokalizuotas taisykles, mums nereikia, kad ji atkartotų „JavaScript“ sintaksę ar sudėtingumą. Tikslas yra deklaratyvus išraiškingumas, suteikiantis CSS daugiau suvokimo ir kontrolės, išlaikant jos aiškų, skaitomą pobūdį, ir turėtume sutelkti dėmesį į tai. Teisingai padarius, protingesnė CSS gali sustiprinti kalbos stiprybes, o ne jas susilpninti.
Tikrasis pavojus yra ne pati logika, o nekontroliuojamas sudėtingumas, kuris užgožia paprastumą, su kuriuo buvo sukurta CSS.
Įspėjimai ir apribojimai: kodėl protingiau ne visada yra geriau
Veržimasis link protingesnės CSS kartu su kontrole ir lankstumu atneša reikšmingų kompromisų. Per metus istorija parodė, kad naujos funkcijos pridėjimas prie kalbos, karkaso ar bibliotekos dažniausiai įveda sudėtingumą ne tik naujokams, bet ir ekspertams programuotojams. Pavojus slypi ne tame, kad CSS įgyja galių, o tame, kaip tos galios yra įgyvendinamos, mokomos ir naudojamos.
Viena iš didžiausių CSS stiprybių visada buvo jos paprastumas pradedantiesiems. Dizaineriai ir pradedantieji galėjo greitai išmokti pagrindus: selektorius, savybes ir reikšmes. Įvedus daugiau logikos, lokalizavimo ir pažangių selektorių, ši mokymosi kreivė tampa statesnė. Rizika yra didėjantis atotrūkis tarp „bazinės CSS“ ir „realaus pasaulio CSS“, atkartojant tai, kas atsitiko su „JavaScript“ ir jo ekosistema.
Tampant CSS galingesne, programuotojai vis labiau remiasi įrankiais, kad valdytų ir abstrahuotų tas galias, pavyzdžiui, kūrimo sistemomis (pvz., „webpack“, „Vite“), tikrintuvais ir formatuotojais bei komponentų bibliotekomis su griežtomis stilizavimo konvencijomis. Tai sukuria priklausomybes, kurių sunku išvengti. Įrankiai tampa prielaida, o ne pasirinkimu, dar labiau komplikuojant įvedimą ir didinant projektų, kurie anksčiau veikė su vienu stilių failu, sąrankos laiką.
Taip pat, daugiau logikos reiškia daugiau potencialo netikėtiems rezultatams. Gali kilti naujų problemų, kurias sunkiau pastebėti ir ištaisyti. Ištekliai, tokie kaip „DevTools“, turės evoliucionuoti, kad vizualizuotų apimties ribas, sąlyginius taikymus ir sudėtingas selektorių grandines. Iki tol derinimas gali išlikti iššūkiu. Visos šios problemos patiriamos su „CSS-in-JS“; kiek dar daugiau su vietine CSS?
Mes tai matėme anksčiau. CSS istorija pilna pernelyg sudėtingų sprendimų, tokių kaip lentelės išdėstymui prieš „Flexbox“, pasikliovimas slankiaisiais elementais su „clearfix“ „hakais“ ir pernelyg standžios tinklelio sistemos prieš vietinį „CSS Grid“. Kiekvienu atveju „hakeriškas“ sprendimas galiausiai tapo problema. CSS pagerėjo ne imituodama kitas kalbas, o standartizuodama apgalvotus, deklaratyvius sprendimus. Su tinkamomis galiomis, galų gale, galime padaryti CSS geresnę.
Išvada
Ką tik pasivaikščiojome po CSS istorijos takus, išnagrinėjome jos dabartį ir pažvelgėme į tai, kokia galėtų būti jos ateitis. Visi galime sutikti, kad CSS nuėjo ilgą kelią nuo paprastos, deklaratyvios kalbos iki dinamiškos, kontekstą suvokiančios ir, taip, protingesnės kalbos. Žinoma, evoliucija atneša įtampą: protingesnė stilių kalba su mažiau priklausomybių nuo scenarijų ir sudėtinga kalba su statesne mokymosi kreive.
Štai kokią išvadą darome:
CSS ateitis neturėtų būti lenktynės pridėti logiką vien dėl pačios logikos. Vietoj to, tai turėtų būti apgalvotas plėtimasis, galia subalansuota aiškumu, o inovacijos – pagrįstos prieinamumu.
Tai reiškia, kad reikia užduoti sunkius klausimus prieš išleidžiant naujas funkcijas. Tai reiškia užtikrinti, kad naujos galimybės padėtų
