CSS paprastai nepavyksta iš karto. Jis žlunga po metų, kai sistema yra realiame naudojime ir kažką keisti jaučiasi rizikinga. Stilius pradeda jaustis sunkus. atidarote DevTools, peršokti per taisykles ir pabandykite suprasti, kodėl kažkas veikia taip, kaip tai daro. Blogas CSS yra ne tik bjaurus, jis yra brangus.Tai kodėl paprasti UI atnaujinimai trunka tris dienas, o ne tris minutes. Kodas veikia . Per daug Pernelyg daug lizdų.Per daug specifiškumo.Per daug anksti priimtų sprendimų, kurie yra pernelyg sunkūs ir per brangūs panaikinti. Šis straipsnis yra apie tai, kas tai sukelia ir kaip to išvengti. ne per gudrybes ar įrankius, bet per keletą įpročių, kurie išlaiko CSS paprastą, įskaitomą ir nebrangų keisti, kai projektas auga. Tai yra dalykai, kuriuos norėčiau išmokti anksčiau. Pradėti su CSS yra pirmoji klaida Žinau, kad straipsnis yra apie CSS, bet viena iš labiausiai paplitusių klaidų, kurias matau, kad jauni žmonės daro, yra šokinėti į užduotį ir statyti viską vienu metu. stilius, JavaScript, žymėjimas, ankstyvos abstrakcijos. Paprastai jie prasideda nuo sudėtingiausios dalies arba juokingiausios. CSS yra viliojantis, nes jis yra apčiuopiamas. Jūs matote rezultatus iš karto. Geriausias būdas yra pašalinti CSS, sustabdyti, sulėtinti ir pradėti nuo žymėjimo. Jei kuriate visą programą, pradėkite nuo puslapio apvalkalo. Žymos, antraštės hierarchija, pagrindiniai skyriai. Pirmiausia dirbkite su tuo. Skaitykite puslapį pradėkite baigti. Ar tai prasminga? Jei dirbate su mažesne funkcija, ta pati idėja taikoma. Pirmiausia išdėstykite žymėjimą ir pažiūrėkite, kaip jis tinka likusiai programai. ar žymės atitinka ketinimą? ar gerbiate aplinkinę antraštės tvarką? Pradedant nuo žymėjimo, jūs priversti galvoti apie ketinimą, o ne išvaizdą. Ne tai, ką jie Naudodami HTML-first metodą apibrėžiate struktūrą, prasmę ir apribojimus, kurie daro sistemą paprastą ir nuspėjamą. yra Žiūrėti kaip CSS should adapt to that, not the other way around. Kai skubate į stilių, jūs linkę formuoti žymėjimą aplink vizualines užuominas. Papildomos pakuotės. Netinkamos žymės. gerai, bet yra semantiškai neteisingi, arba neįmanoma išplėsti. Žiūrėti Pirmiausia atlikdami žymėjimą, užrakinsite tvirtą pagrindą. Prieinamumas, dokumento aprašymas, klaviatūros srautas ir turinio hierarchija dažniausiai išsprendžiami iš anksto. Tai taip pat sulėtina jus geru būdu. Jūs anksti sugauti krašto atvejus. Jūs matote, kur daiktai nepriklauso. Galite stumti atgal į kai kuriuos dizaino sprendimus. Trumpai tariant: HTML-first daro prasmę visam kitam. Kai CSS daro daugiau nei manote Kita dažna klaida, kurią matau kodų peržiūrose, yra jauni žmonės Dažnai net nesuprantama, tačiau norėčiau pateikti keletą pavyzdžių. Per daug Tarkime, kad norite sutelkti turinio stulpelį horizontaliai: .entry-content { max-inline-size: 48rem; margin: 0 auto; /* ❌ Avoid this! */ } Jūs nustatote maksimalų plotį ir elementą centrą naudojant automatines ribas. Tačiau tai, ko jūs negalite suprasti, yra tai, kad jūs taip pat nustatote viršutinę ir apatinę ribas iki nulio. Dažniausiai sutrumpinimas naudojamas tik todėl, kad jis yra trumpesnis. .entry-content { max-inline-size: 48rem; margin-inline: auto; /* ✅ Do this */ } Toks pats rezultatas. jokių šalutinių poveikių. daugiau ketinimų. Kitas bendras pavyzdys: .button--secondary { background: var(--color--dark-gray); } Tai nustato fono spalvą, naudojant pritaikytą nuosavybę, bet taip pat atkuria daugybę kitų su fone susijusių savybių. --color--dark-gray Iš tiesų labai daug: Atvaizdas - Nėra Pagrindinė pozicija → 0% 0% Pagrindinis / Automobilis Pagrindinis / Pakartotinis Žemėlapis padding-box Žymės: Border-Box Pagrindinis → Scroll Tai gali lengvai sukelti erzinančius šalutinius poveikius, su kuriais turėsite susidoroti vėliau. Ko jūs tikriausiai norite vietoj to. .button--secondary { background-color: var(--color--dark-gray); } Ta pati mintis kaip ir anksčiau, bet chirurginė.Pakeiskite tik tai, ką iš tikrųjų norite pakeisti. Tas pats principas taikomas ir kitoms trumpalaikėms savybėms, tokioms kaip: , , , , ir kiti. Būkite atsargūs, kai naudojate juos kaip trumpas rankas. arba visiškai vengti naudoti trumpas rankas. border transform transition font Dar vienas įprastas pavyzdys, kaip daryti per daug, yra būti pernelyg konkrečiu per anksti. a { text-decoration: none; background-image:linear-gradient(to right, currentColor, currentColor); background-position:0%100%; background-repeat: no-repeat; background-size:100%2px; transition: background-size 0.3s; &:hover, &:focus-visible { background-position:100%100%; } } Šis fragmentas prideda animuotą pagrindą nuorodoms. Problema ta, kad ne visi Žymė yra teksto nuoroda. Vaizdai gali būti nuorodos. Profilio avatarai gali būti nuorodos. mygtukai dažnai pažymėti kaip ankorai. <a> Staiga šis "protingas" pasaulinis stilius prideda keistų 2px linijų po jūsų logotipu arba sulaužo fono gradientus pagrindiniuose mygtukuose. Dabar jūs praleisite likusį projektą, kovodami su kaskada, rašydami "undo" stilius kiekvienai ne teksto nuorodai, kurioje dirbate. visual debt Galite tai išspręsti keliais būdais. Viena galimybė yra nukreipti tekstines nuorodas į turinį. .entry-content:is(h1, h2, h3, h4, h5, h6, p, li) > a { /* styles here */ } Tačiau netgi tai vis dar gali būti pernelyg siaura arba pernelyg plati, priklausomai nuo žymėjimo. Mano mėgstamiausias metodas yra naudingumo klasė. .has-animated-underline { /* styles here */ } Perkeliant tai į klasę, jūs sukuriate elgesį Jis yra aiškus, tyčinis ir, svarbiausia, nereikalauja, kad jūs ištaisytumėte dalykus, kurie iš pradžių nebuvo sugadinti. opt-in rather than opt-out Kai mobilusis yra apmąstymas Mobilusis žiniatinklio srautas 2016 m. Pralenkė darbalaukį visame pasaulyje - beveik prieš dešimt metų.Tačiau vis dar matau, kad dizaineriai didžiąją laiko dalį praleidžia dirbdami su darbalaukio kompiliacijomis ir pristatydami darbą darbalaukyje pirmiausia, o mobilieji telefonai laikomi paprasta "suspausta" darbalaukio versija. Tai vis dar jaučiama atgal. Mylėkite tai ar ne, mes pirmiausia patiriame internetą telefonu.Tai gali vėl pasikeisti, bet tai šiandien yra realybė. Tai, kaip mes kuriame internetą, turėtų atspindėti. Praktiškai, štai kaip aš kreipiuosi į stilių dabar: Išleiskite žymę (kalbėta apie tai 😉). Pakeiskite naršyklę iki maždaug 400px ir stiliaus programą ar funkciją, tarsi darbalaukio neegzistuoja. Kai jis veikia mobiliuosiuose įrenginiuose, pakeiskite naršyklės dydį į darbalaukį ir atlikite antrą perėjimą prie stilių. Dirbdami tokiu būdu, jūs natūraliai gaunate 80% (atsitiktinį skaičių, kuris jaučiasi teisingas), kad jūsų projektas būtų prieinamas ir paruoštas mažiems ekranams. Tai organiškai veda mus prie mobiliojo pirmojo įgyvendinimo. Kai pradėjau kurti žiniatinklio svetaines, žiniasklaidos užklausos buvo vargu ar kažkas. Tada pasirodė „iPhone“, o žiniasklaidos užklausos tapo pagrindiniu įrankiu reaguojančiam išdėstymui. /* phones */ @media (max-width: 480px) {} /* large phones and small tablets */ @media (max-width: 767px) {} /* tablets */ @media (min-width: 768px) and (max-width: 1024px) {} /* desktop */ @media (min-width: 1025px) {} Atkreipkite dėmesį, kad tai net nėra mobilusis pirmasis. ir požiūris. min-width Šiandien realybė yra kitokia.Yra per daug prietaisų ir ekranų dydžių, kuriuos galima suprojektuoti vien tik naudojant pertraukas.Dažnai protingiau pasikliauti įrankiais, kurie natūraliai prisitaiko prie viso diapazono. Pavyzdžiui: Vidinis išdėstymas su „Grid“ arba „Flexbox“ skystos reikšmės, naudojant clamp() šrifto dydžiams, tarpusavio ir matmenims Konteinerių paklausa Žiniasklaidos užklausos vis dar yra naudingos, tačiau jos neturėtų būti pirmasis įrankis, kurį pasieksite. Jei išdėstymas veikia tik dėl pertrūkių, jis tikriausiai yra pernelyg standus.Kai jis veikia be jų, žiniasklaidos užklausos tampa mažais, tyčiniais reaguojančios struktūros, o ne pamatų, koregavimais. Kova su kaskade, o ne jos naudojimas Tai dar viena sritis, kurioje dažnai matau jaunųjų inžinierių kovą. Daug CSS sistemų ir sprendimų egzistuoja, kad išspręstų vieną pagrindinę funkciją: kaskadą. Ir aš suprantu, kodėl. Jūs rašote taisyklę ir ji nieko nedaro. Jūs ją pakeičiate ir staiga kažkas kitaip sulaužo. Be to, vartotojo agento stiliaus lapas daro savo dalyką fone. Tai yra varginantis, nes CSS nėra kaip dauguma kitų kalbų. „JavaScript“ galite sukurti modulį ir niekas neišnyksta. Jūs negalite kreiptis į CSS tuo pačiu būdu. jei bandysite, tai tikrai įkandžia jus į veidą. Kiekvienas CSS pakeitimas gyvena dviejose srityse vienu metu: tai, ką jūs stiliuojate, ir likusi sistema, į kurią jis patenka. Grįžtant prie ankstesnio pavyzdžio, jūs negalite tiesiog parašyti: a { text-decoration: none; background-image:linear-gradient(to right, currentColor, currentColor); background-position:0%100%; background-repeat: no-repeat; background-size:100%2px; transition: background-size 0.3s; &:hover, &:focus-visible { background-position:100%100%; } } Jei tai padarysite, tai taikys fone susijusias savybes kiekvienam šarvai puslapyje, net jei šis šarvai nėra teksto nuoroda. Daugeliu atvejų tai nėra tai, ko jūs norite. Kai kurie inžinieriai tai išmoksta sunkiai ir reaguoja, visiškai išvengiant kaskados, pavyzdžiui, vaikystėje paliesdami karštą krosnį ir išmokdami niekada to nedaryti. Manau, kad tai yra klaida, nes tai lemia daugybę pasikartojimų. Štai pavyzdys iš neseniai atlikto projekto, kuriame dirbau. @define-mixin focus-state { &:focus-visible { outline: var(--outline--color) var(--outline--style) var(--outline--width); outline-offset: var(--outline--offset); } } Vėliau jis buvo įtrauktas į keletą komponentų: .button { @mixin focus-state; } a { @mixin focus-state; } .pagination-link { @mixin focus-state; } ... ir taip toliau. Dėmesio kontūrai turėtų atrodyti nuosekliai visame projekte, su labai nedaug išimčių. Šioje konfigūracijoje kiekvienas "mixin call" sukuria tą patį CSS vėl ir vėl. Elegantiškesnis požiūris yra remtis kaskadine sistema ir apibrėžti ją visame pasaulyje: :focus-visible { outline-color:var(--outline--color); outline-offset:var(--outline--offset); outline-style:var(--outline--style); outline-width:var(--outline--width); } Dabar kiekvienas elementas, kuris gauna matomą fokusavimo būseną, pagal numatytuosius nustatymus gauna tą patį stilių. Ir retais atvejais, kai kažkas turi būti kitoks, galite jį viršyti vietoje: .pagination-link { --outline--offset: -2px; } Tai yra. paprasta, kompaktiška ir nuspėjama. Tas pats pasakytina ir apie tokius dalykus kaip , „Margin Resets“ , ir kitų stilių, kurie turėtų elgtis nuosekliai visoje programėlėje. box-sizing ::selection text-wrap Greitas gerklės patikrinimas padeda čia. jei stilius atrodo Tą patį galima pasakyti apie kiekvieną komponentą, su Išimtys, tai tikriausiai priklauso jūsų pasauliniams stiliams. exactly very few Negalima ignoruoti kaskadą. Naudokite jį savo pranašumui. Specifiškumas yra ten, kur daiktai ir toliau krenta atskirai Tai paprastai yra priežastis "Aš parašiau savo CSS, bet tai neveikia". Aš nesiruošiu gilintis į tai, kas yra specifiškumas. Svarbu tai, kad didelis specifiškumas yra vienas iš pagrindinių skausmo šaltinių dirbant su trečiųjų šalių bibliotekomis ar kažkieno kito kodu. Tai daro tikrai gerai Paimkime šį pavyzdį: .layout > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) { max-width: var(--content-width); margin-left: auto; margin-right: auto; } Čia mes sutelkiame tiesioginius vaikus į horizontaliai ir taikyti maksimalų plotį – visi vaikai, išskyrus , , ir . .layout alignleft alignright alignfull alignwide Yra dvi pagrindinės priežastys, kodėl šis kodas kvepia. Pirma, tai yra juodojo sąrašo modelis. Mes stilizuojame viską problema yra ta, kad "viskas" visada keičiasi laikui bėgant. Kaip projektas auga, jūs beveik neabejotinai pridėsite daugiau išimčių. Vieną dieną pamiršite jį pridėti, ir kažkas sulaužys. Išskyrus Antra, kiekvienas pasirinkimas, kurį pridedate, padidina specifiškumą. Tai reiškia, kad viršijant jį reikia dar stipresnio atrankos, , Arba įdėti viską į Kitaip tariant, jūs išsprendžiate sudėtingumą su daugiau sudėtingumo. 0.5.0 !important @layer :where() "WordPress" yra geras pavyzdys, kaip pradėti be CSS architektūros ir baigti chaosu. body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; } Aš gaunu mišrių signalų čia. Mes sujungėme save su pattern, suprato, kad tai buvo bloga idėja, susigrąžinta su Po to – taikoma Aš tikiu, kad tam buvo priežastis, bet žmogus... argi ne toks nusivylimas. :not() :where() !important Jūs tikrai galite padaryti visa tai ... Arba galite būti labiau apgalvoti ir nusipirkti sau ramybės: /* 0.1.0 */ .layout > * { max-width: var(--content-width); margin-left: auto; margin-right: auto; } /* 0.2.0 */ .layout > .alignleft, .layout > .alignright { --content-width: var(--content-width--narrow); } /* 0.2.0 */ .layout > .alignwide { --content-width: var(--content-width--wide); } /* 0.2.0 */ .layout > .alignfull { --content-width: var(--content-width--full); } Tai lengviau perskaityti ir lengviau suprasti. Išimtys yra . 0.1.0 0.2.0 Nuspėjama ir tyčia. Štai dar vienas bendras būdas, kaip specifiškumas auga be geros priežasties: /* ❌ combine element with a class ❌ element nested inside the block ❌ modifier nested inside the block */ a.button { &.button__label {...} &.button--secondary {...} } Šiuo pavyzdžiu: Jei nėra priežasties sujungti a ir .button, to nedarykite. Jei nėra priežasties įdėti .button__label po .button, to nedarykite. Tas pats pasakytina ir apie modifikuotas klases. Jei siunčiate naują komponentą, paprastai tai, ko norite vietoj: /* ✅ no element + class combination ✅ elements and modifiers stay flat */ .button {...} .button__icon {...} .button--primary {...} Štai piršto taisyklė, kurią aš seku: Pagal numatytuosius nustatymus pageidautina naudoti vieną klasės atranką. Naudokite programinės įrangos variantus, o ne surinkti rinkėjus. Šaltinio tvarka padės jums čia. Laikykite specifiškumą 0,1.0 arba 0,1. Negalima viršyti 0.2.0 funkcijų, kurias siunčiate. Venkite #id selektoriai ir inline stilių programos kodą. Jie spike specifiškumą ir yra skausminga peržiūrėti. Naudokite didesnį specifiškumą tik tada, kai viršijate trečiosios šalies ar paveldėtą kodą, kurio dar negalite atkurti. Pastaba yra , ir :where() @layer @scope Aš visiškai žinau apie šiuos įrankius. Galite sumažinti specifiškumą iki nulio Izoliuoti stilius su , ir apimties selektoriai su . :where() @layer @scope Jie yra galingi, ir jie turi savo vietą. bet jie neištaiso blogos architektūros. Tos pačios specifiškumo taisyklės vis dar taikomos kiekviename sluoksnyje ir kiekvienoje srityje. Laikykitės mažo specifiškumo.Tavo būsimasis aš tau padėkos.
