Share
Denna artikel handlar om CSS-kodstruktur - specifikt om en metod som jag har använt de senaste åren för att få en logik och konsekvens i den ordning i vilken jag skriver min CSS. Det är en metod som jag kallar "Outside In".
Jag har hört talas om olika sätt att skriva CSS tidigare. Vissa människor använder inte någon viss ordning alls, andra alfabetiseringsdeklarationer enligt fastighetsnamn, jag har även hört talas om en handfull fall där någon beställer dem visuellt med längden på varje fastighetsvärde par!
En tidigare omröstning på CSS-Tricks ställde den här frågan med ett resultat som jag tyckte ganska överraskande: 39% av över 11 000 personer har ingen specifik plan när det gäller att beställa CSS.
Hur beställer du dina CSS-egenskaper? Totala omröstare: 11,093Gruppering efter typ kan föreslå höjd vara bredvid bredd. Alfabetiskt skulle se de förklaringar som anges från bakgrund genom att z-index, till exempel.
Jag använder metoden för att gruppera egenskaper per typ - även om jag till och med använder en viss order för beställning per grupp!
Med undantag för "slumpmässig metod" finns det en viss grad av ordning i alla andra tillvägagångssätt. Men den ordningen kartlägger inte nödvändigtvis bra på allt som är särskilt användbart när det gäller stilering av webbplatser.
Om du samlade data om elevernas höjd i ett klassrum, är det viktigt att beställa dem med en längdmätning. Om du kategoriserar en samling av DVD-skivor kan alfabetisk beställning vara meningsfullt. Men skulle CSS egenskaper som beställts på dessa sätt har något att göra med deras order av betydelse när dessa stilar är målade av webbläsaren?
Om du beställer alfabetiskt är ett element Färg viktigare än dess bredd? Är ett element border-style viktigare än om det ligger i dokumentets normala flöde eller inte? Jag skulle inte säga det.
Metoden som jag har kommit att älska beställer CSS-egenskaper med hur mycket påverkan de har på de valda elementen eller andra element runt dem. Tekniken är att börja med storbildsegenskaper som påverkar saker utanför elementet och arbetar mot de finare detaljerna. Det är därför jag kallar det "Outside In" -metoden.
placera och flyta deklarationer tar bort element från sitt normala flöde och har stor inverkan på andra element runt dem. Detta är något viktigt och jag tycker att det borde klargöras precis ovanpå ett block av CSS.
Styrning av saker som markören eller svämma över av ett element är (vanligtvis) mindre viktigt och därför tenderar jag att lämna saker som detta mot slutet.
Den ordning jag använder är som följer:
Accentsconagua
placera, flyta, klar, visa)bredd, höjd, marginal, stoppning)Färg, bakgrund, gräns, box-shadow)textstorlek, typsnittsfamilj, text-align, text-trans)markören, svämma över, z-index)jag vet det gräns är en boxmodell egendom och z-index är relaterad till position, men denna order fungerar för mig. Även om jag inte gillar alfabetisk beställning finns det något som bara känns rätt att sätta z-index i slutet…
Låt oss ta ett exempel på att utforma en knappmodul.
Låt oss börja med ett trevligt meningsfullt klassnamn som .knapp. Jag personligen ogillar inte kontraktsnamn som .BTN och tenderar att favorera långa beskrivande klassnamn där det är möjligt - det är bara en personlig preferens, YMMV :)
/ * Beställ nu → * / .button
Vi vill kunna manipulera det vertikala avståndet runt knappen så det kommer att behöva ändras visa från i kö (standard för ankarlänkar) till inline-blocket.
För att tillåta att knappen växer i bredd beroende på textinnehållet, inline-blocket är ett mer flexibelt val än flyta med en bredd uppsättning.
.knapp display: inline-block;
Därefter måste vi lägga till vissa boxmodellegenskaper som marginal och vaddering. Margin går utanför lådan så, "Outside In", bör detta komma först.
.knapp display: inline-block; marginal: 1em 0; vaddering: 1em 4em;
Nästa saker att lägga till är färgerna. För att skilja ut varje grupp av egendomstyper, tycker jag om att lämna en tom linje - det gör att varje sektion sticker ut mycket mer.
.knapp display: inline-block; marginal: 1em 0; vaddering: 0,5em 3em; färg: #fff; Bakgrund: # 196e76;
Därefter kan vi lägga till i gränserna och skuggorna för att ge lite djup, följt av typografiegenskaper, återigen åtskilda av en tom linje.
.knapp display: inline-block; marginal: 1em 0; vaddering: 1em 4em; färg: #fff; Bakgrund: # 196e76; gräns: 0.25em fast # 196e76; boxskugga: inset 0.25em 0.25em 0.5em rgba (0,0,0,0,3), 0,5em 0,5em 0 # 444; font-size: 3em; fontfamilj: Avenir, Helvetica, Arial, sans-serif; text-align: center; text-trans: versaler; text-decoration: none;
En fördel med att ha ett sådant system är att det tar bort behovet att tänka för mycket när det har genomförts. Om jag läser igenom min kod och vill ändra något stort bild som ett element bredd eller placera, Jag vet att jag ska se mot toppen av en regel. Om jag vill justera något liknande text-trans eller list-style, Jag ska titta mot botten av blocket.
Att ha koden strukturerad så här är också riktigt hand för andra som läser CSS; om den står inför en kod som är organiserad så här är det väldigt enkelt att se alla de komponenter som utgör en knappmodul. När du skriver kod är det viktigt att göra det så enkelt som möjligt för våra medarbetare att läsa; detta gör kod lättare att förstå och underhålla.
Jag har använt vanilj CSS för att förklara mina metoder här, men du kan tillämpa "Outside In" -metoden lika effektivt i din Sass, LESS och Stylus.
Kodning kan vara en mycket personlig sak. Om du använder en annan metod för att organisera din CSS, skulle det vara kul att höra om det! Lämna en kommentar för att fortsätta diskussionen.
