Box modellen i CSS refererar till ett specifikt tänk när man jobbar med layout på moderna webbplatser byggda med CSS. Det stora problemet med CSS när man pratar om layout och design är att CSS baserade sajter traditionellt sett ofta blir något för boxiga och kantiga. Detta är ett resultat av att man i CSS definierar upp olika boxar som man fyller med innehåll, egentligen allt (nåja mestadels) som är relaterat till design och innehåll –bilder och text- har fyra kantiga hörn beroende på hur man ser det.
För att kunna göra bra CSS-baserade designmallar är det bra att ha lite koll på box modellen. Nedan finns en visualisering av denna som är en mycket bra skildring av hur en box i CSS egentligen ser ut.
Varje box som definieras upp i CSS har vissa egenskaper man bör känna till. Alla boxar har ett innehållsområde, ett valfritt omgärdande mellanrum kallad padding, en valfri kant -border- samt en valfri marginal -margin-.
Det man oftast glömmer är vad som är margin och vad som är padding. Enklast blir det att komma ihåg att padding är det som är innanför ramen –border-.
Nu lämnar vi box modellen och återknyter istället till något jag inledningsvis nämnde, dåliga CSS-baserade designmallar.
Många gillar att prata gott om CSS som om det är lösningen på alla stora problem inom webbutveckling, det är det dock inte. Det finns många nackdelar med CSS dock tänkte jag idag bara beröra detta med webbplatser designade i CSS.
I en bok som jag läste när jag lärde mig CSS för flera år sedan så klargjorde författaren tydligt i sista kapitlet att man var tvungen att tänka ”outside the box” för att kunna göra en bra CSS-design.
Nackdelen med detta tänk –att tänka sig en design utanför boxarnas boxighet- var att det är något svårt, CSS är ju boxar.
Det finns lösningar kring detta men det kan vara lätt att hamna i en komplex CSS-djungel av massor med div-element som –får man säga det?- nästan kan liknas vid 90-talets nästlade tabeller.
Resultatet av ovanstående hemska kod?
En stor box, indelad i tre boxar, indelad i ytterligare boxar, indelade i flera boxar, komplett med prickiga linjer, streckiga linjer och för lite padding osv…
Det är lätt att tro att bara för att man gör en sajt i CSS som validerar så är det ”bra”.
Så är det inte, det finns viss skillnad i en sajt som kodats i ”bra CSS” och en som inte har det oavsett om det stolt markerats på den att den klarar alla valideringar.
En bra kodad CSS-baserad sajt återanvänder CSS-element samt undviker att använda för många element. Koden är effektiv och nedbantad och det är lätt att följa hur en layout är uppbyggd i body-elementet samtidigt som layouten inte alls ser ut att innehålla några boxar alls.
Att nå den nivån –att förstå att CSS inte går ut på att positionera boxar inne i boxar- är första steget i den moderna CSS-skolan.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.