.<\/p>\n
Det \u00e4r b\u00e4st att anv\u00e4nda klasser och h\u00e5lla v\u00e4ljare s\u00e5 enkla som m\u00f6jligt. S\u00e5 h\u00e4r kan du f\u00f6renkla v\u00e4ljaren ovan:<\/p>\n
\r\n.nav a {\r\n color: blue;\r\n}<\/pre>\nDen h\u00e4r v\u00e4ljaren g\u00f6r samma sak som den tidigare, men den \u00e4r mycket enklare. V\u00e4lj valfritt objekt som \u00e4r en avkomling av ett element med en klass av “nav”.<\/a><\/p>\nAtt f\u00f6renkla dina v\u00e4ljare g\u00f6r din CSS l\u00e4ttare att l\u00e4sa och underh\u00e5lla. Det minskar ocks\u00e5 sannolikheten f\u00f6r specificitetskonflikter, d\u00e4r mer specifika v\u00e4ljare \u00e5sidos\u00e4tter mindre specifika.<\/p>\n
T\u00e4nk dock p\u00e5 att f\u00f6renkling av dina v\u00e4ljare ocks\u00e5 kan \u00f6ka sannolikheten f\u00f6r namnkonflikter, d\u00e4r tv\u00e5 element har samma klassnamn men b\u00f6r ha olika stilar. F\u00f6r att undvika detta kan du anv\u00e4nda metoder som BEM (Block, Element, Modifier) \u200b\u200bf\u00f6r att namnge dina klasser p\u00e5 ett s\u00e4tt som minskar sannolikheten f\u00f6r konflikter.<\/p>\n
<\/span>6. Inte organisera din CSS<\/span><\/h4>\nOm din CSS inte \u00e4r organiserad kan det vara sv\u00e5rt att hitta och \u00e4ndra stilar. Detta kan orsaka sv\u00e5righeter vid underh\u00e5ll av kod, s\u00e4rskilt n\u00e4r du arbetar med stora stilmallar eller i en teammilj\u00f6.<\/p>\n
<\/span>Exempel:<\/span><\/h5>\nL\u00e5t oss s\u00e4ga att du har en CSS-fil med hundratals rader kod och alla stilar \u00e4r blandade:<\/p>\n
\r\nh1 {\r\n color: blue;\r\n}\r\n\r\n.footer {\r\n background: black;\r\n}\r\n\r\nh2 {\r\n color: green;\r\n}\r\n\r\n.header {\r\n background: white;\r\n}<\/pre>\nI det h\u00e4r exemplet \u00e4r stilarna f\u00f6r olika delar av webbplatsen utspridda i CSS-filen. Detta kan g\u00f6ra det sv\u00e5rt att hitta stilar f\u00f6r ett specifikt avsnitt n\u00e4r du beh\u00f6ver uppdatera dem.<\/p>\n
<\/span>Ordna:<\/span><\/h5>\nEn bra praxis \u00e4r att organisera din CSS logiskt. S\u00e5 h\u00e4r kan du organisera CSS ovan:<\/p>\n
\r\n\/* Header *\/\r\n.header {\r\n background: white;\r\n}\r\n\r\nh1 {\r\n color: blue;\r\n}\r\n\r\nh2 {\r\n color: green;\r\n}\r\n\r\n\/* Footer *\/\r\n.footer {\r\n background: black;\r\n}<\/pre>\nI det h\u00e4r exemplet \u00e4r stilarna grupperade efter den del av webbplatsen som de g\u00e4ller. Detta g\u00f6r det l\u00e4ttare att hitta och uppdatera stilar f\u00f6r en specifik sektion.<\/p>\n
Det finns m\u00e5nga s\u00e4tt att organisera din CSS och den b\u00e4sta metoden beror p\u00e5 detaljerna i ditt projekt. Vissa utvecklare f\u00f6redrar att organisera sin CSS efter komponent, andra f\u00f6redrar att organisera den efter sida, och ytterligare andra f\u00f6redrar att organisera den efter stiltyp (typografi, layout, f\u00e4rg, etc.).<\/p>\n
F\u00f6rutom att organisera din CSS i varje fil, \u00e4r det ocks\u00e5 en bra id\u00e9 att organisera dina egna CSS-filer. F\u00f6r stora projekt kan det vara anv\u00e4ndbart att dela upp din CSS i flera filer (till exempel en f\u00f6r typografi, en f\u00f6r layout, en f\u00f6r f\u00e4rger, etc.) och sedan importera dem alla till en huvudformatmall med hj\u00e4lp av @import-satser. Detta kan g\u00f6ra din CSS l\u00e4ttare att hantera och underh\u00e5lla.<\/p>\n
<\/span>7. Anv\u00e4nd inte CSS-variabler<\/span><\/h4>\nCSS-variabler, \u00e4ven k\u00e4nda som anpassade egenskaper, l\u00e5ter dig lagra specifika v\u00e4rden f\u00f6r att \u00e5teranv\u00e4nda i hela din CSS. Om du inte anv\u00e4nder dem kan du komma p\u00e5 att du upprepar samma v\u00e4rden om och om igen, vilket kan g\u00f6ra din CSS sv\u00e5rare att underh\u00e5lla och uppdatera.<\/p>\n
<\/span>Exempel:<\/span><\/h5>\nL\u00e5t oss s\u00e4ga att du har en specifik nyans av bl\u00e5tt som du ofta anv\u00e4nder i din CSS:<\/p>\n
\r\n.header {\r\n background-color: #007BFF;\r\n}\r\n\r\n.button {\r\n background-color: #007BFF;\r\n}\r\n\r\n.link {\r\n color: #007BFF;\r\n}<\/pre>\nI det h\u00e4r exemplet upprepas samma f\u00e4rgv\u00e4rde tre g\u00e5nger. Om du best\u00e4mmer dig f\u00f6r att \u00e4ndra den h\u00e4r f\u00e4rgen m\u00e5ste du hitta och uppdatera varje instans av den i din CSS.<\/p>\n
<\/span>Ordna:<\/span><\/h5>\nDu kan anv\u00e4nda en CSS-variabel f\u00f6r att lagra detta f\u00e4rgv\u00e4rde:<\/p>\n
\r\n:root {\r\n --main-color: #007BFF;\r\n}\r\n\r\n.header {\r\n background-color: var(--main-color);\r\n}\r\n\r\n.button {\r\n background-color: var(--main-color);\r\n}\r\n\r\n.link {\r\n color: var(--main-color);\r\n}<\/pre>\nI det h\u00e4r exemplet lagras f\u00e4rgv\u00e4rdet i en variabel som kallas \u2013main-color, och denna variabel anv\u00e4nds varhelst f\u00e4rgen beh\u00f6vs. Om du best\u00e4mmer dig f\u00f6r att \u00e4ndra denna f\u00e4rg beh\u00f6ver du bara uppdatera variabeln och \u00e4ndringen kommer att till\u00e4mpas \u00f6verallt d\u00e4r variabeln anv\u00e4nds.<\/p>\n
CSS-variabler kan g\u00f6ra din CSS l\u00e4ttare att underh\u00e5lla och uppdatera. De kan ocks\u00e5 hj\u00e4lpa till att s\u00e4kerst\u00e4lla konsekvens i dina stilar. Observera dock att CSS-variabler inte st\u00f6ds i vissa \u00e4ldre webbl\u00e4sare, s\u00e5 om du beh\u00f6ver st\u00f6dja den h\u00e4r webbl\u00e4saren kan du beh\u00f6va tillhandah\u00e5lla en reserv eller anv\u00e4nda en f\u00f6rprocessor som Sass eller Less, som har sina egna system f\u00f6r variabler. .<\/p>\n
<\/span>8. Utan att ta h\u00e4nsyn till tillg\u00e4nglighet<\/span><\/h4>\nTillg\u00e4nglighet inom webbdesign inneb\u00e4r att g\u00f6ra din webbplats anv\u00e4ndbar f\u00f6r alla m\u00e4nniskor, oavsett deras f\u00f6rm\u00e5ga eller funktionsneds\u00e4ttning. Detta inkluderar personer med syn-, h\u00f6rsel-, kognitiva och motoriska funktionsneds\u00e4ttningar. Om du inte \u00f6verv\u00e4ger tillg\u00e4nglighet i din CSS, kanske du utesluter en viktig del av din publik.<\/p>\n
<\/span>Exempel:<\/span><\/h5>\nL\u00e5t oss s\u00e4ga att du har en webbplats med ljusgr\u00e5 text p\u00e5 en vit bakgrund:<\/p>\n
\r\nbody {\r\n color: #999;\r\n background-color: #fff;\r\n}<\/pre>\nDetta kan se fancy ut, men det \u00e4r sv\u00e5rt att l\u00e4sa f\u00f6r personer med nedsatt syn eller f\u00e4rgseende.<\/p>\n
Ordna:<\/p>\n
F\u00f6r att g\u00f6ra din webbplats mer tillg\u00e4nglig kan du anv\u00e4nda f\u00e4rger med h\u00f6g kontrast f\u00f6r text och bakgrund:<\/p>\n
\r\nbody {\r\n color: #333;\r\n background-color: #fff;\r\n}<\/pre>\nDetta \u00e4r mycket l\u00e4ttare att l\u00e4sa, \u00e4ven f\u00f6r personer med synproblem.<\/p>\n
F\u00f6rutom f\u00e4rgkontrasten finns det m\u00e5nga andra tillg\u00e4nglighetsaspekter att ta h\u00e4nsyn till i din CSS. H\u00e4r \u00e4r n\u00e5gra exempel:<\/p>\n
\n- Anv\u00e4nd relativa enheter som em och rem f\u00f6r teckenstorlekar s\u00e5 att anv\u00e4ndarna kan justera textstorleken om det beh\u00f6vs.<\/li>\n
- Undvik att anv\u00e4nda CSS f\u00f6r att d\u00f6lja inneh\u00e5ll som ska vara tillg\u00e4ngligt f\u00f6r sk\u00e4rml\u00e4sare. Anv\u00e4nd till exempel visibility:hidden eller opacity:0 ist\u00e4llet f\u00f6r show:none.<\/li>\n
- Anv\u00e4nd mediefr\u00e5gor f\u00f6r att g\u00f6ra din design responsiv s\u00e5 att den kan anv\u00e4ndas p\u00e5 alla sk\u00e4rmstorlekar.<\/li>\n
- Anv\u00e4nd ARIA-roller och egenskaper vid behov f\u00f6r att tillhandah\u00e5lla ytterligare information till hj\u00e4lpmedelstekniker.<\/li>\n<\/ul>\n
Kom ih\u00e5g att tillg\u00e4nglighet inte bara \u00e4r en funktion som \u00e4r trevlig att ha, det \u00e4r ett krav f\u00f6r bra webbdesign. Att g\u00f6ra din webbplats tillg\u00e4nglig kan f\u00f6rb\u00e4ttra dess anv\u00e4ndbarhet f\u00f6r alla anv\u00e4ndare, inte bara de med funktionshinder.<\/p>\n
<\/span>9. Testa inte \u00f6ver webbl\u00e4sare<\/span><\/h4>\nDin webbplats kan se ut och bete sig olika i olika webbl\u00e4sare p\u00e5 grund av skillnader i hur de tolkar och renderar CSS. Om du inte testar din webbplats i alla st\u00f6rre webbl\u00e4sare kanske du inte \u00e4r medveten om dessa skillnader, vilket leder till en d\u00e5lig anv\u00e4ndarupplevelse f\u00f6r vissa av dina bes\u00f6kare.<\/p>\n
<\/span>Exempel:<\/span><\/h5>\nAnta att du har anv\u00e4nt CSS-rutn\u00e4tslayout i din webbdesign:<\/p>\n
\r\n.container {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n}<\/pre>\n\u00c4ven om CSS Grid st\u00f6ds i alla moderna webbl\u00e4sare, kanske det inte st\u00f6ds fullt ut eller kan uppf\u00f6ra sig annorlunda i \u00e4ldre versioner av vissa webbl\u00e4sare.<\/p>\n
<\/span>Ordna:<\/span><\/h5>\nF\u00f6r att s\u00e4kerst\u00e4lla att din webbplats ser ut och fungerar korrekt i alla st\u00f6rre webbl\u00e4sare b\u00f6r du testa den i var och en av dem. Detta inkluderar Chrome, Firefox, Safari och Edge. Det finns \u00e4ven verktyg tillg\u00e4ngliga som kan hj\u00e4lpa dig med testning \u00f6ver webbl\u00e4sare, som t.ex Webbl\u00e4sarstack<\/a> och bit bar<\/a>.<\/p>\nOm du uppt\u00e4cker att en viss CSS-funktion inte st\u00f6ds eller beter sig annorlunda i en viss webbl\u00e4sare kan du anv\u00e4nda funktionsfr\u00e5gor (@supports-regeln) f\u00f6r att tillhandah\u00e5lla ett alternativ:<\/p>\n
\r\n.container {\r\n display: flex;\r\n}\r\n\r\n@supports (display: grid) {\r\n .container {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n }\r\n}<\/pre>\nI det h\u00e4r exemplet kommer beh\u00e5llaren att anv\u00e4nda den flexibla layouten som standard. Om webbl\u00e4saren st\u00f6der CSS Grid (som best\u00e4ms av @supports-regeln), kommer den att anv\u00e4nda rutn\u00e4tslayouten ist\u00e4llet.<\/p>\n
M\u00e5let med testning \u00f6ver webbl\u00e4sare \u00e4r inte att f\u00e5 din webbplats att se exakt likadan ut i alla webbl\u00e4sare, utan att s\u00e4kerst\u00e4lla en konsekvent och anv\u00e4ndbar upplevelse f\u00f6r alla anv\u00e4ndare.<\/p>\n
<\/span>10. Anv\u00e4nder inte responsiv design<\/span><\/h4>\nMed dagens variation av enheter och sk\u00e4rmstorlekar \u00e4r det viktigt att din webbplats \u00e4r responsiv. Det betyder att din webbdesign m\u00e5ste anpassa sig till sk\u00e4rmstorleken p\u00e5 den enhet som den visas p\u00e5. Om du inte anv\u00e4nder en responsiv design kan din webbplats vara sv\u00e5r att anv\u00e4nda p\u00e5 vissa enheter, s\u00e4rskilt mobila enheter.<\/p>\n
<\/span>Exempel:<\/span><\/h5>\nL\u00e5t oss s\u00e4ga att du har en webbplats med en fast bredd:<\/p>\n
\r\n.container {\r\n width: 1200px;\r\n}<\/pre>\nDen h\u00e4r webbplatsen kommer att se bra ut p\u00e5 sk\u00e4rmar som \u00e4r 1200 pixlar breda eller st\u00f6rre, men p\u00e5 mindre sk\u00e4rmar kommer den att orsaka horisontell rullning, vilket generellt anses vara en d\u00e5lig anv\u00e4ndarupplevelse.<\/p>\n
<\/span>Ordna:<\/span><\/h5>\nF\u00f6r att g\u00f6ra din webbplats responsiv kan du anv\u00e4nda mediefr\u00e5gor f\u00f6r att till\u00e4mpa olika stilar f\u00f6r olika sk\u00e4rmstorlekar. S\u00e5 h\u00e4r kan du g\u00f6ra exemplet ovan responsivt:<\/p>\n
\r\n.container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n}<\/pre>\nI det h\u00e4r exemplet kommer beh\u00e5llaren att ta upp 100 % av sk\u00e4rmbredden p\u00e5 mindre sk\u00e4rmar och kommer att centreras med en maximal bredd p\u00e5 1200px p\u00e5 st\u00f6rre sk\u00e4rmar.<\/p>\n
Du kan ocks\u00e5 anv\u00e4nda mediefr\u00e5gor f\u00f6r att till\u00e4mpa helt olika stilar f\u00f6r olika sk\u00e4rmstorlekar. Till exempel:<\/p>\n
\r\n.container {\r\n width: 100%;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .container {\r\n width: 750px;\r\n margin: 0 auto;\r\n }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n .container {\r\n width: 1170px;\r\n margin: 0 auto;\r\n }\r\n}<\/pre>\nI det h\u00e4r exemplet kommer beh\u00e5llaren att ha full bredd p\u00e5 sk\u00e4rmar som \u00e4r mindre \u00e4n 768px, 750px breda p\u00e5 sk\u00e4rmar mellan 768px och 1199px och 1170px breda p\u00e5 sk\u00e4rmar 1200px eller st\u00f6rre.<\/p>\n
Att anv\u00e4nda responsiv design kan g\u00f6ra din webbplats mer anv\u00e4ndarv\u00e4nlig och tillg\u00e4nglig f\u00f6r en bredare publik. Det \u00e4r en avg\u00f6rande aspekt av modern webbdesign.<\/p>\n