Fordelene med Strukturering av CSS Rundt Utseende og Layout

0
16

Jeg liker dette punktet at Jonathan Snook laget på, og jeg har tenkt på det non-stop, fordi det beskriver noe som er veldig hardt om å skrive CSS:

Jeg føler at tweet lyder enten svært grunt eller dypt avhengig av hvordan du ser på det, men i virkeligheten, det tror jeg ikke noe system, rammeverk, eller biblioteket virkelig ta dette med i betraktning—spesielt i forbindelse med vedlikehold.

— Snook (@snookca) februar 26, 2019

Faktisk, jeg regner med dette er det vanskeligste med å skrive stabile CSS i en stor codebase. Det er et enormt problem i min dag-til-dag-arbeidet, og jeg regner det er hva de fleste tekniske gjeld i CSS til slutt koker ned til.

La oss tenke oss at vi er styling av boksen, for eksempel – at boksen har sannsynligvis en posisjon på siden, noen marginer, og kanskje andre lokalisering stiler også. Og at boksen kan være grønne, men blir blå når du klikker på det.

Jeg tror vi kan skille mellom disse to typer av stiler som layout og utseende.

Men å skrive gode CSS krever å holde disse to typer av stiler atskilt. På den måten, avmerkingsboksen stiler kan brukes på nytt gang på gang uten å måtte bekymre deg for hvordan de lokalisering stiler (som margin, padding eller bredde) kan komme tilbake å bite deg.

På Gusto, vi bruker Bootstrap er grid-system som er flott fordi vi kan skrive HTML som dette som eksplisitt skiller disse bekymringer som så:

<div class=”row”>
<div class=”col-6″>
<!– Avmerkingsboksen går her –>
</div>
<div class=”col-6″>
<!– Et annet element kan være plassert her –>
</div>
</div>

Ellers kan du ende opp med å skrive stiler som dette, som vil ende opp med massevis av problemer hvis de avmerkingsboksen stiler er gjenbrukt i fremtiden:

.avmerkingsboksen {
bredde: 40%;
margin-bottom: 60px;
/* Andre avmerkingsboksen stiler */
}

Når jeg ser kode som dette, er min første tanke er: “Hvorfor er det bredde 40% og 40% av hva?” Plutselig kan jeg se at denne avmerkingsboksen klasse er nå avhengig av noen andre bit av koden at jeg ikke forstår.

Så jeg har begynt å tenke på alle CSS som passer inn i en av de to bøtter: utseende og layout. Det er viktig fordi jeg tror disse to typer av stiler bør nesten aldri være bakt inn i ett sett av stiler eller en klasse. Layout på siden skal være ett sett av stiler, og utseendet (som hva avkrysningsruten faktisk ser ut som) bør være i en annen. Og om du gjør det med HTML eller en egen CSS-klasse er oppe til debatt.

Grunnen til at dette er et problem er at folk vil hele tiden prøve å overskrive layout stiler, og det er da vi til slutt ende opp med et codebase som ligner en spaghetti monster. Jeg tror dette skillet er super viktig å skrive gode CSS som vekter på riktig måte. Hva tror du? Legg til en kommentar nedenfor!