CSS anjeneral pa t 'fwi imedyatman. Li manke yon ane pita, lè sistèm la se nan itilize reyèl ak chanje yon bagay sanble riski. Styles kòmanse santi grav. Ou louvri DevTools, salpe atravè règ yo, epi eseye konprann poukisa yon bagay travay jan li fè. Refactoring santi mentalman taks ak tan konsomasyon se konsa ou ajoute yon lòt override jis fè tikè a ale. Bad CSS se pa sèlman wòch, li se chè. Li se poukisa ajou UI senp pran twa jou olye pou twa minit. Kòd la se fè . Pifò Pifò nesesite. Pifò spesifikite. Pifò desizyon te fè nan tan kap vini an ki yo trè difisil ak trè chè yo anile. Nan atik sa a se sou sa ki ka fè sa a ak ki jan yo evite li. Pa atravè trik oswa zouti, men atravè kèk koutim ki kenbe CSS senp, liable, ak bon mache chanje kòm yon pwojè grandi. Li se bagay sa yo mwen ta vle aprann pi bonè. 1. Kòmanse ak CSS se premye erè Mwen konnen atik la se sou CSS, men youn nan erè yo ki pi komen mwen wè jeneratè fè se salpe nan yon travay ak bati tout nan yon sèl fwa. Styles, JavaScript, Markup, abstraksyon anvan. Souvan yo kòmanse ak pati ki pi konplike, oswa pati ki pi enteresan. Mwen jwenn li. CSS se tentant paske li se tangib. Ou wè rezilta imedyatman. Pwosesis la pi bon se mete CSS nan yon pati, pause, ralanti, ak kòmanse ak marqueur la. Si ou ap bati yon aplikasyon antye, kòmanse ak kouvèti paj la. Landmarks, jereyori tit, seksyon prensipal. travay sou sa an premye. Li paj la kòmanse pou fini. Èske li gen rezon? Jis deplase nan style lè li fè. Si ou ap travay sou yon karakteristik ti, menm lide a aplike. Lè sa a, mete makèt an premye epi tcheke ki jan li koresponn ak rès la nan app a. Èske etikèt yo koresponn ak entansyon an? Èske ou respekte orè a nan tit la alantou? Kòmanse ak makèt fè ou panse sou entansyon, pa aparans. Ou deside ki bagay Men, pa sa yo Pa gen yon HTML-prensipal apwòch ou defini estrikti, vle di, ak restriksyon ki kenbe sistèm la senp ak previzib. se gade nan CSS should adapt to that, not the other way around. Kòm ou apresye nan style, ou gen tendans yo fòme maketing la alantou sentèz vizyèl. Ekstra anbalaj. Tag yo mal. Anjeneral ou fini ak bagay ki bon, men yo se semantikman erè, oswa pa posib yo skaler. Tcheke Pa angaje nan maketing an premye, ou bloke nan yon fondasyon solide. Aksesibilite, dokiman kontwòl, klavye flux, ak hierarchi kontni se sitou rezoud anvan. Styling Lè sa a, vin additif anvan korektè. Li tou ralanti ou nan yon bon fason. Ou pran kantite ka byen bonè. Ou wè kote bagay yo pa fè. Ou ka pouse tounen sou kèk desizyon konsepsyon. Kòzman: HTML-first fè tout lòt bagay vle di. 2. Lè CSS fè plis pase ou panse Yon lòt erè komen mwen wè nan revizyon kòd se juniors fè , souvan san yo pa konprann li. Pran yon kèk egzanp senp. Pifò Si ou vle santre kolòn kontni orizontalman: .entry-content { max-inline-size: 48rem; margin: 0 auto; /* ❌ Avoid this! */ } Li travay. Ou mete yon max lajè ak santri eleman an lè l sèvi avèk marg otomatik. Sepandan, sa ou ka pa realize se ke ou tou mete marg yo tèt ak anba nan zèb. Si sa a se intensif, ok. Pifò tan li se pa. Pifò tan kout la se itilize jis paske li se pi kout. Ki sa ou ta ka vle nan plas se sa a: .entry-content { max-inline-size: 48rem; margin-inline: auto; /* ✅ Do this */ } Rezilta menm jan an. Pa gen efè segondè. Plis intentions. Yon lòt egzanp komen: .button--secondary { background: var(--color--dark-gray); } Sa a mete koulè background lè l sèvi avèk pwopriyete Custom. Men, li tou resèt yon seri de lòt pwopriyete ki gen rapò ak background. --color--dark-gray Plis anpil, an reyalite: background-imaj → pa gen pozisyon background → 0% 0% background-dimansyon nan machin background-repeat → repete background-origin → padding-box nan background-clips nan border-box background-attachment → Scroll Pifò nan tan, sa a se pa sa ou vle. Sa a ka fasilman mennen nan efè segondè enkyetid ke ou pral gen pou fè fas ak pita. Ki sa ou ta ka vle nan plas se sa a. .button--secondary { background-color: var(--color--dark-gray); } Men, chiriji. Chanje sèlman sa ou reyèlman vle chanje. Yon fwa ankò, plis entansyon. Prensip la menm aplike pou lòt pwopriyete kout, tankou nan nan nan , ak lòt moun. Atansyon lè l sèvi avèk yo kòm koutèt. Oswa evite sèvi ak koutèt nan tout. border transform transition font Yon egzanp plis komen nan fè pou anpil se yo dwe trè spesifik pou anvan tout tan. Pran règ sa a: 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%; } } Sa a snippet ajoute yon underline animasyon nan lyen. Problèm se ke pa tout moun tag se yon lyen tèks. imaj ka lyen. avatars pwofil ka lyen. bouton yo souvan etikèt kòm anker. <a> Soti nan yon moman, sa a "sèl" mondyal style se ajoute estrikti 2px liy anba logo ou a oswa broke gradients background sou bouton prensipal ou yo. Ou te kreye Koulye a, ou pral pase rès la nan pwojè a batay kaskad la, ekri estil "undo" pou chak lyen ki pa tèks ou travay sou. Menm si ou fikse li, klè. visual debt Ou ka rezoud sa a nan plizyè fason. Youn nan opsyon yo se yo mete alantou lyen tèks nan kontni. .entry-content:is(h1, h2, h3, h4, h5, h6, p, li) > a { /* styles here */ } Men, menm sa a ka toujou trè enkyetid oswa trè laj, depann sou maketing la. Li depann sou yon estrikti HTML espesifik ki ka chanje. Pwopriyete favè mwen se yon klas sèvis piblik. .has-animated-underline { /* styles here */ } Pa deplase sa a nan yon klas, ou fè konpòtman an Li eksplisit, entansyonèl, ak - pi enpòtan - li pa mande pou ou retire bagay ki pa te kraze nan premye. opt-in rather than opt-out 3. Lè mobil se yon Afterthought Mobil web trafik te pase Desktop atravè lemond nan 2016 - prèske yon dekad de sa. Sepandan, mwen toujou wè desenè pase pi fò tan yo travay sou Desktop comps ak prezante travay Desktop-premye, ak mobil yo te trete kòm yon vèsyon senp "stacked" nan Desktop la. Li se toujou santi tounen. Èske ou renmen li oswa pa, nou eksperyans entènèt la nan yon telefòn premye. Sa a ka chanje ankò, men li se reyalite a jodi a. Ki jan nou bati pou entènèt la ta dwe reflete sa a. Nan pratik, sa a se ki jan mwen apwòch style kounye a: Kite makèt la (konvèti sou li 😉). Resize navigatè a nan alantou 400px ak style app la oswa karakteristik kòm si Desktop la pa egziste. Yon fwa li travay sou mobil, redimansyon navigatè a nan Desktop ak fè yon dezyèm pase sou style yo. Kòmanse nan fason sa a natirèlman jwenn ou 80% (nimewo alegan ki sanble dwa) gen nan fen fè pwojè ou aksè ak pare pou ekran ti. Sa a òganikman mennen nou nan aplikasyon an mobil-premye. Lè mwen te kòmanse fè devlopman entènèt, kesyon medya te mal yon bagay. Nou pa browse entènèt la sou telefòn yo. Li te yon mond desktops sèlman. Lè sa a, iPhone a te soti, ak kesyon medya te vin zouti prensipal la pou layout responsive. Nimewo a nan aparèy ki gen kapasite pou entènèt te limite, se konsa ou te kapab ale ak yon seri rigid de pousantaj: /* 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) {} Remake sa a se pa menm mobil premye. Pa Pwosesis nan. min-width Jodi a, reyalite a se diferan. Gen anpil aparèy ak gwosè ekran pou konsepsyon pou lè l sèvi avèk pousantaj pa sèlman. Li se souvan pi entelijan yo depann sou zouti ki natirèlman adapte nan tout jaden an. Pou egzanp: Layout intrinsè ak Grid oswa Flexbox valè fluid lè l sèvi avèk clamp() pou gwosè font, spacing, ak dimansyon Konteksyon pou Media kesyon yo toujou itil, men yo pa ta dwe zouti an premye ou rive pou. Si yon layout sèlman travay akòz pousantaj, li se pwobableman trè rigid. Lè li travay san yo pa yo, kesyon medya vin ti, ajisteman entansyèl nan estrikti a responsive, pa fondasyon an. 4. Kòmanse Cascade a anvan yo sèvi ak li Isit la se yon lòt zòn nan ki mwen souvan wè enjenyè jèn batay. Yon anpil frameworks CSS ak solisyon egziste pou solisyon yon karakteristik prensipal: kaskad la. Epi mwen jwenn poukisa. Si ou ale nan CSS san yo pa anpil eksperyans, li ka santi chaotik. Ou ekri yon règ ak li pa fè anyen. Ou ajiste li epi pafwa yon bagay lòt vire. Anplis de sa, style sheet a ajan itilizatè a se fè bagay li yo nan background la. Li se frustrant paske CSS se pa gen anyen tankou lòt lang yo. Nan JavaScript, ou ka kreye yon modil ak pa gen anyen kache. Variables rete kontni nan modil sa a. Ou pa ka avanse CSS nan menm fason an. Si ou eseye, li pral moute ou reyèlman difisil nan figi. Tout CSS chanjman ap viv nan de zòn nan yon sèl fwa: bagay ou estilye ak restan nan sistèm nan li flux nan. Retounen nan egzanp anvan, ou pa ka jis ekri sa a: 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%; } } Si ou fè sa, sa a ap aplike pwopriyete ki gen rapò ak fon nan chak anker sou paj la, menm si anker sa a se pa yon lyen tèks. Pifò nan tan, sa a se pa sa ou vle. Yon kèk enjenyè aprann sa a nan fason difisil ak reponn pa evite kaskad la konplètman, tankou touche yon manje cho kòm yon timoun ak aprann yo pa fè li ankò. Mwen panse ke sa a se yon erè paske li mennen nan anpil repitasyon. Isit la se yon egzanp nan yon pwojè dènye mwen te travay sou. Gen yon mixin: @define-mixin focus-state { &:focus-visible { outline: var(--outline--color) var(--outline--style) var(--outline--width); outline-offset: var(--outline--offset); } } Lè sa a, li te enkli nan plizyè eleman: .button { @mixin focus-state; } a { @mixin focus-state; } .pagination-link { @mixin focus-state; } ... ak sou sa. Mwen pa ka panse yon bon rezon pou sa a. Konte kontri yo ta dwe gade konsistan nan tout yon pwojè, ak kèk exceptions. Nan konfigirasyon sa a, chak apèl mixin kreye menm CSS a ankò ak ankò. Yon apwòch pi elegant se sou kaskad la epi defini sa a globalman: :focus-visible { outline-color:var(--outline--color); outline-offset:var(--outline--offset); outline-style:var(--outline--style); outline-width:var(--outline--width); } Koulye a, chak eleman ki resevwa yon aparans fòs vizib jwenn estil la menm pa default. Epi nan ka rare kote yon bagay ta dwe diferan, ou ka ranplase li lokalman: .pagination-link { --outline--offset: -2px; } Li se sa. Simpleman, kompak, ak prediktif. Yon idantite menm aplike pou bagay tankou nan Marge nan resèt, , ak lòt style ki ta dwe kondui konsistentman atravè app la. box-sizing ::selection text-wrap Yon tcheke gou rapid ede isit la. Si yon estil ap gade menm jan an sou chak eleman, ak Eksepsyon, li pwobableman nan estil ou mondyal. exactly very few Pa ignore kaskad la. Sèvi ak li nan avantaj ou. Spesifikite se kote bagay yo kontinye rale deyò Sa a se anjeneral rezon ki baze sou "Mwen te ekri CSS mwen men li pa travay." Mwen pa pral ale byen lwen nan sa spesifikite se. MDN deja Ki sa ki enpòtan isit la se ke spesifikite segondè se youn nan sous prensipal la nan doulè lè travay ak bibliyotèk twazyèm-pati oswa kòd yon lòt moun. Li fè sa a reyèlman byen Pran egzanp sa a: .layout > :not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide) { max-width: var(--content-width); margin-left: auto; margin-right: auto; } Isit la nou konsantre timoun ki imedyatman nan horizontalman ak aplike yon lajè max - tout timoun san yo pa nan nan E . .layout alignleft alignright alignfull alignwide Gen de rezon prensipal pou kode sa a odè. Premyèman, sa a se yon modèl lis nwa. Nou style tout bagay yon lis kwasans nan bagay. Problèm la se ke "tou" toujou chanje ak tan. Kòm pwojè a kwasans, ou pral prèske asire w ke ou pral ajoute plis eksepsyon. Yon jou ou pral oblije ajoute li, ak yon bagay pral kraze. Sepandan Dezyèmman, chak selèktè ou ajoute ogmante spesifikite. Fragman an pi wo a se deja Li vle di depase li mande pou yon selèktè menm pi fò, nan , oswa kouvri tout bagay nan Nan lòt men, ou fikse konplisite ak plis konplisite. 0.5.0 !important @layer :where() WordPress se yon bon egzanp nan kòmanse san yo pa arsitektur CSS ak fini ak chaos. Isit la se yon ti kras menm jan an soti nan koutim: 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; } Mwen jwenn sinyal mixed isit la. Nou kouvri tèt nou ak pattern, te konprann li te yon lide mal, rekiperasyon ak , ak Lè sa a ... aplike Mwen te asire ke li te gen yon rezon pou sa a, men moun ... pa sa ki frustrant. :not() :where() !important Ou ka fè tout bagay sa a ... ...oswa ou ka gen plis entansyon ak achte pou tèt ou yon ti kras pafè: /* 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); } Li pi fasil yo li ak pi fasil yo argumente sou. Règ la baz se Eksepsyon yo se . 0.1.0 0.2.0 Previsib ak entansyonèl. Isit la se yon lòt fason komen spesifikite kwasans pa yon bon rezon: /* ❌ combine element with a class ❌ element nested inside the block ❌ modifier nested inside the block */ a.button { &.button__label {...} &.button--secondary {...} } Nan egzanp sa a: Si pa gen okenn rezon pou konbine a ak .button, pa fè sa. Si pa gen okenn rezon pou enstale .button__label anba .button, pa fè sa. Li menm jan an pou modifye klas. Si w ap livrezon yon nouvo eleman, sa a se nòmalman sa ou vle nan plas: /* ✅ no element + class combination ✅ elements and modifiers stay flat */ .button {...} .button__icon {...} .button--primary {...} Isit la se règ la nan poutèt mwen swiv: Preferans yon selèktè klas sèl pa default. Sèvi ak varyasyon sèvis piblik olye pou piki selèktè. Ordinasyon sous pral ede ou isit la. kenbe spesifikite nan 0.1.0 oswa 0.1.1. Pa ale pi wo pase 0.2.0 nan karakteristik ou voye. Evite #id selèktè ak style nan liy nan kòd aplikasyon. Yo pike spesifikite ak se doulè yo override. Sèvi ak spesifisite ki pi wo sèlman lè ou depase kòd nan twazyèm-pati oswa legacy ou pa ka refactor ankò. Izole li epi pou yo kontinye. Notè nan nan E :where() @layer @scope Mwen se konplètman konesans nan zouti sa yo. Ou ka redwi spesifikite nan zèb ak Isole estil ak , ak opsyon selèktè ak . :where() @layer @scope Yo se fòs, epi yo gen plas yo. Men, yo pa fikse mal anbalaj. Règ espesyalite yo menm yo toujou aplike nan chak kouch ak nan chak jaden. kenbe spesifikite ki ba. pwovens tèt ou pral kontan.
