.
Ordna:
Det är bäst att använda klasser och hålla väljare så enkla som möjligt. Så här kan du förenkla väljaren ovan:
.nav a {
color: blue;
}
Den här väljaren gör samma sak som den tidigare, men den är mycket enklare. Välj valfritt objekt som är en avkomling av ett element med en klass av “nav”.
Att förenkla dina väljare gör din CSS lättare att läsa och underhålla. Det minskar också sannolikheten för specificitetskonflikter, där mer specifika väljare åsidosätter mindre specifika.
Tänk dock på att förenkling av dina väljare också kan öka sannolikheten för namnkonflikter, där två element har samma klassnamn men bör ha olika stilar. För att undvika detta kan du använda metoder som BEM (Block, Element, Modifier) för att namnge dina klasser på ett sätt som minskar sannolikheten för konflikter.
6. Inte organisera din CSS
Om din CSS inte är organiserad kan det vara svårt att hitta och ändra stilar. Detta kan orsaka svårigheter vid underhåll av kod, särskilt när du arbetar med stora stilmallar eller i en teammiljö.
Exempel:
Låt oss säga att du har en CSS-fil med hundratals rader kod och alla stilar är blandade:
h1 {
color: blue;
}
.footer {
background: black;
}
h2 {
color: green;
}
.header {
background: white;
}
I det här exemplet är stilarna för olika delar av webbplatsen utspridda i CSS-filen. Detta kan göra det svårt att hitta stilar för ett specifikt avsnitt när du behöver uppdatera dem.
Ordna:
En bra praxis är att organisera din CSS logiskt. Så här kan du organisera CSS ovan:
/* Header */
.header {
background: white;
}
h1 {
color: blue;
}
h2 {
color: green;
}
/* Footer */
.footer {
background: black;
}
I det här exemplet är stilarna grupperade efter den del av webbplatsen som de gäller. Detta gör det lättare att hitta och uppdatera stilar för en specifik sektion.
Det finns många sätt att organisera din CSS och den bästa metoden beror på detaljerna i ditt projekt. Vissa utvecklare föredrar att organisera sin CSS efter komponent, andra föredrar att organisera den efter sida, och ytterligare andra föredrar att organisera den efter stiltyp (typografi, layout, färg, etc.).
Förutom att organisera din CSS i varje fil, är det också en bra idé att organisera dina egna CSS-filer. För stora projekt kan det vara användbart att dela upp din CSS i flera filer (till exempel en för typografi, en för layout, en för färger, etc.) och sedan importera dem alla till en huvudformatmall med hjälp av @import-satser. Detta kan göra din CSS lättare att hantera och underhålla.
7. Använd inte CSS-variabler
CSS-variabler, även kända som anpassade egenskaper, låter dig lagra specifika värden för att återanvända i hela din CSS. Om du inte använder dem kan du komma på att du upprepar samma värden om och om igen, vilket kan göra din CSS svårare att underhålla och uppdatera.
Exempel:
Låt oss säga att du har en specifik nyans av blått som du ofta använder i din CSS:
.header {
background-color: #007BFF;
}
.button {
background-color: #007BFF;
}
.link {
color: #007BFF;
}
I det här exemplet upprepas samma färgvärde tre gånger. Om du bestämmer dig för att ändra den här färgen måste du hitta och uppdatera varje instans av den i din CSS.
Ordna:
Du kan använda en CSS-variabel för att lagra detta färgvärde:
:root {
--main-color: #007BFF;
}
.header {
background-color: var(--main-color);
}
.button {
background-color: var(--main-color);
}
.link {
color: var(--main-color);
}
I det här exemplet lagras färgvärdet i en variabel som kallas –main-color, och denna variabel används varhelst färgen behövs. Om du bestämmer dig för att ändra denna färg behöver du bara uppdatera variabeln och ändringen kommer att tillämpas överallt där variabeln används.
CSS-variabler kan göra din CSS lättare att underhålla och uppdatera. De kan också hjälpa till att säkerställa konsekvens i dina stilar. Observera dock att CSS-variabler inte stöds i vissa äldre webbläsare, så om du behöver stödja den här webbläsaren kan du behöva tillhandahålla en reserv eller använda en förprocessor som Sass eller Less, som har sina egna system för variabler. .
8. Utan att ta hänsyn till tillgänglighet
Tillgänglighet inom webbdesign innebär att göra din webbplats användbar för alla människor, oavsett deras förmåga eller funktionsnedsättning. Detta inkluderar personer med syn-, hörsel-, kognitiva och motoriska funktionsnedsättningar. Om du inte överväger tillgänglighet i din CSS, kanske du utesluter en viktig del av din publik.
Exempel:
Låt oss säga att du har en webbplats med ljusgrå text på en vit bakgrund:
body {
color: #999;
background-color: #fff;
}
Detta kan se fancy ut, men det är svårt att läsa för personer med nedsatt syn eller färgseende.
Ordna:
För att göra din webbplats mer tillgänglig kan du använda färger med hög kontrast för text och bakgrund:
body {
color: #333;
background-color: #fff;
}
Detta är mycket lättare att läsa, även för personer med synproblem.
Förutom färgkontrasten finns det många andra tillgänglighetsaspekter att ta hänsyn till i din CSS. Här är några exempel:
- Använd relativa enheter som em och rem för teckenstorlekar så att användarna kan justera textstorleken om det behövs.
- Undvik att använda CSS för att dölja innehåll som ska vara tillgängligt för skärmläsare. Använd till exempel visibility:hidden eller opacity:0 istället för show:none.
- Använd mediefrågor för att göra din design responsiv så att den kan användas på alla skärmstorlekar.
- Använd ARIA-roller och egenskaper vid behov för att tillhandahålla ytterligare information till hjälpmedelstekniker.
Kom ihåg att tillgänglighet inte bara är en funktion som är trevlig att ha, det är ett krav för bra webbdesign. Att göra din webbplats tillgänglig kan förbättra dess användbarhet för alla användare, inte bara de med funktionshinder.
9. Testa inte över webbläsare
Din webbplats kan se ut och bete sig olika i olika webbläsare på grund av skillnader i hur de tolkar och renderar CSS. Om du inte testar din webbplats i alla större webbläsare kanske du inte är medveten om dessa skillnader, vilket leder till en dålig användarupplevelse för vissa av dina besökare.
Exempel:
Anta att du har använt CSS-rutnätslayout i din webbdesign:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Även om CSS Grid stöds i alla moderna webbläsare, kanske det inte stöds fullt ut eller kan uppföra sig annorlunda i äldre versioner av vissa webbläsare.
Ordna:
För att säkerställa att din webbplats ser ut och fungerar korrekt i alla större webbläsare bör du testa den i var och en av dem. Detta inkluderar Chrome, Firefox, Safari och Edge. Det finns även verktyg tillgängliga som kan hjälpa dig med testning över webbläsare, som t.ex Webbläsarstack och bit bar.
Om du upptäcker att en viss CSS-funktion inte stöds eller beter sig annorlunda i en viss webbläsare kan du använda funktionsfrågor (@supports-regeln) för att tillhandahålla ett alternativ:
.container {
display: flex;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
I det här exemplet kommer behållaren att använda den flexibla layouten som standard. Om webbläsaren stöder CSS Grid (som bestäms av @supports-regeln), kommer den att använda rutnätslayouten istället.
Målet med testning över webbläsare är inte att få din webbplats att se exakt likadan ut i alla webbläsare, utan att säkerställa en konsekvent och användbar upplevelse för alla användare.
10. Använder inte responsiv design
Med dagens variation av enheter och skärmstorlekar är det viktigt att din webbplats är responsiv. Det betyder att din webbdesign måste anpassa sig till skärmstorleken på den enhet som den visas på. Om du inte använder en responsiv design kan din webbplats vara svår att använda på vissa enheter, särskilt mobila enheter.
Exempel:
Låt oss säga att du har en webbplats med en fast bredd:
.container {
width: 1200px;
}
Den här webbplatsen kommer att se bra ut på skärmar som är 1200 pixlar breda eller större, men på mindre skärmar kommer den att orsaka horisontell rullning, vilket generellt anses vara en dålig användarupplevelse.
Ordna:
För att göra din webbplats responsiv kan du använda mediefrågor för att tillämpa olika stilar för olika skärmstorlekar. Så här kan du göra exemplet ovan responsivt:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
I det här exemplet kommer behållaren att ta upp 100 % av skärmbredden på mindre skärmar och kommer att centreras med en maximal bredd på 1200px på större skärmar.
Du kan också använda mediefrågor för att tillämpa helt olika stilar för olika skärmstorlekar. Till exempel:
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
margin: 0 auto;
}
}
I det här exemplet kommer behållaren att ha full bredd på skärmar som är mindre än 768px, 750px breda på skärmar mellan 768px och 1199px och 1170px breda på skärmar 1200px eller större.
Att använda responsiv design kan göra din webbplats mer användarvänlig och tillgänglig för en bredare publik. Det är en avgörande aspekt av modern webbdesign.
