Structuring CSS is not a trivial task, especially in large projects. Even smaller systems may become complex and hard to maintain when introduced to RWD. In this post I’ll describe how I approach implementing larger sets of CSS rules.
I’ve made my third iteration of the disposition available on the net. As always, it’s available on http://folk.uio.no/arnehass/master/disposition.pdf, but I’ve also updated the project on GitHub if you wish to see earlier revisions.
For those not so interested in Javascript and Semantic Web, frown not. At my work we’ve been developing a new framework for structuring abstractions of CSS with LESS. I’ve also tested the concepts on one of my sideprojects, Zetty (will probably explain it in a later post), where I work with Compass, and it’s a breeze to work with.
I’ll write some words on it when given time, which hopefully is soon ^\_^
CSS is powerful in its own rights, but when it comes to large, complex websites filled with elements that doesn’t necessarily share styles easily, the styling quickly becomes messy and hard to navigate. Conventions, frameworks and guidelines help structure the code, and tools such as Firebug helps the process. But my eyes still get soar when scanning through code-snippets such as:
#header { ... }
#header .menu { ... }
#header .menu ul { ... }
#header .menu ul li { ... }
#header .login { ... }
#header .login ul { ... }
I like my html to be semantically good structured (or as good as it can get when keeping certain obstacles in mind *cough*IE6*snirk*). That means not overloading it with classes that doesn’t add meaning (such as clearfix, which I use in all of my projects). CSS doesn’t have a good way of reusing this code within the stylesheet, and this is a shame.
And then there’s the classic need for variables. When trying out different color-schemes in a design, it’s a pain if you have to update a color-code multiple places in the stylesheet. Even more fun if they’re scattered throughout the document. And what if you the color-scheme to front different colors, each related to a base-color?