Share
Dit artikel gaat helemaal over CSS-codestructuren - specifiek over een methode die ik de laatste jaren gebruik om logica en consistentie te brengen in de volgorde waarin ik mijn CSS schrijf. Het is een methode die ik "Outside In" noem.
Ik heb in het verleden al gehoord van verschillende manieren om CSS te schrijven. Sommige mensen gebruiken helemaal geen bepaalde volgorde, anderen alfabetiseren verklaringen op eigendomsnaam, ik heb zelfs gehoord van een handvol gevallen waarin sommige ze visueel bestellen door de lengte van elk eigendoms-waarde paar-!
Een vorige peiling over CSS-Tricks stelde deze vraag met een resultaat dat ik tamelijk verrassend vond: 39% van de meer dan 11.000 mensen hebben geen specifiek plan als het gaat om het bestellen van CSS.
Hoe bestelt u uw CSS-eigenschappen? Totaal kiezers: 11.093Groeperen op type zou kunnen suggereren hoogte naast zijn breedte. Alfabetisch zouden de aangiften vermeld worden van achtergrond door naar z-index, bijvoorbeeld.
Ik gebruik de methode om eigenschappen te groeperen op type - hoewel ik zelfs een specifieke volgorde gebruik om per groep te bestellen!
Met uitzondering van de "willekeurige methode", is er enige orde in alle andere benaderingen. Maar die volgorde hoeft niet noodzakelijkerwijs goed te zijn voor iets dat bijzonder nuttig is met betrekking tot de vormgeving van websites.
Als u gegevens verzamelde over de lengte van studenten in een klaslokaal, is het zinvol om ze te ordenen met een lengtemeting. Als u een verzameling dvd's categoriseert, is alfabetische volgorde misschien zinvol. Maar zouden CSS-eigenschappen die op deze manieren zijn besteld iets te maken hebben met hun volgorde van belang wanneer die stijlen door de browser worden geverfd?
Als je alfabetisch bestelt, zijn de elementen van een element kleur belangrijker dan zijn breedte? Is een element border-style belangrijker dan of het wel of niet in de normale flow van het document zit? Ik zou niet zeggen.
De methode die ik zo leuk heb gevonden, bestelt CSS-eigenschappen op basis van de impact die ze hebben op de geselecteerde elementen of andere elementen om hen heen. De essentie van de techniek is om te beginnen met grootbeeldeigenschappen die dingen buiten het element beïnvloeden en werken aan de fijnere details. Dit is waarom ik het de "Outside In" -methode noem.
positie en vlotter Verklaringen verwijderen elementen uit hun normale stroom en hebben een enorme impact op andere elementen om hen heen. Dit is iets belangrijks en ik vind dat dit bovenaan een blok CSS duidelijk moet worden gemaakt.
Het besturen van dingen zoals de cursor of overloop van een element zijn (meestal) minder belangrijk en daarom heb ik de neiging om dergelijke dingen tegen het einde achter te laten.
De volgorde die ik gebruik is als volgt:
Accentsconagua
positie, vlotter, duidelijk, tonen)breedte, hoogte, marge, vulling)kleur, achtergrond, grens, box-shadow)lettertypegrootte, font-family, text-align, text-transform)cursor, overloop, z-index)ik weet dat grens is een eigenschap in vakmodel en z-index is gerelateerd aan positie, maar deze volgorde werkt voor mij. Hoewel ik niet van alfabetische volgorde houd, is er iets dat gewoon goed voelt om te zetten z-index aan het einde…
Laten we het voorbeeld nemen van het stylen van een knopmodule.
Laten we beginnen met een mooie, zinvolle klasse zoals .knop. Ik persoonlijk houd niet van gecontracteerde namen zoals .BTN en neigen ernaar om waar mogelijk lange, beschrijvende klassennamen te begunstigen - het is gewoon een persoonlijke voorkeur, YMMV :)
/ * Bestel nu → * / .knop
We willen de verticale afstand rond de knop kunnen manipuleren, dus de tonen van in lijn (de standaard voor ankerkoppelingen) naar inline-block.
Om de knop in breedte te laten groeien, afhankelijk van de tekstinhoud, inline-block is een meer flexibele keuze dan vlotter met een breedte reeks.
.knop display: inline-block;
Vervolgens moeten we enkele kenmerken van vakmodellen toevoegen, zoals marge en opvulling. Marge gaat dus buiten de doos, dus "Outside In" moet eerst komen.
.knop display: inline-block; marge: 1em 0; opvulling: 1em 4em;
De volgende dingen om toe te voegen zijn de kleuren. Om elke groep eigendomsvormen van elkaar te scheiden, laat ik graag een lege regel achter, waardoor elke sectie veel meer opvalt.
.knop display: inline-block; marge: 1em 0; opvulling: 0,5em 3em; color: # fff; background: # 196e76;
Vervolgens kunnen we de randen en schaduwen toevoegen om wat diepte te bieden, gevolgd door typografische eigenschappen, opnieuw gescheiden door een lege regel.
.knop display: inline-block; marge: 1em 0; opvulling: 1em 4em; color: # fff; background: # 196e76; rand: 0.25em vaste stof # 196e76; box-shadow: inzet 0.25em 0.25em 0.5em rgba (0,0,0,0.3), 0.5em 0.5em 0 # 444; font-size: 3em; font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; text-transform: in hoofdletters; text-decoration: none;
Een voordeel van het hebben van een systeem als dit is dat het de noodzaak om na de implementatie te veel te denken wegneemt. Als ik mijn code doorlees en iets groots als een element wil veranderen breedte of positie, Ik weet dat ik naar de top van een regel zal kijken. Als ik iets als wil aanpassen text-transform of list-style, Ik zal naar de onderkant van het blok kijken.
De code zo gestructureerd houden is ook echt handig voor anderen die de CSS lezen; als het gaat om code die op deze manier is georganiseerd, is het heel eenvoudig om alle onderdelen te zien die deel uitmaken van een knopmodule. Bij het schrijven van code is het belangrijk om het onze collega-ontwikkelaars zo gemakkelijk mogelijk te maken om te lezen; dit maakt code gemakkelijker te begrijpen en te onderhouden.
Ik heb vanilla CSS gebruikt om mijn methoden hier uit te leggen, maar je kunt de "Outside In" -aanpak net zo effectief toepassen in je Sass, LESS en Stylus.
Codering kan heel persoonlijk zijn. Als u een andere methode gebruikt om uw CSS te organiseren, zou het geweldig zijn om erover te horen! Laat een reactie achter om de discussie voort te zetten.
