CSS is hard! There, I said it. Grasping an understanding of how the cascade works, what each property does, the selectors, quirks then toss in which browser supports what and how. It’s not easy. Then you add on top of that the complexity of the interfaces we’re building, and the maintenance that goes along with that (browser updates, new devices and channels) and … hold on a minute … why are we doing this again? CSS is a puzzle, and some of us enjoy the eventual completion.
So why is CSS so hard? It all begins with what CSS was originally designed to do versus the things we do with it today. Yes, progress is moving along at a nice pace these days thanks to rapid browser innovation and implementation of CSS3 and beyond. Did you read that Microsoft? The fun part is we rely on techniques that are, at the root, hacks. Take the
float property. It’s a great example.
float was designed to simply align an image within a block of text. That’s it! Then we go and bend that property to lay out entire interfaces.
Our stylesheets are immensely repetitive. Colors, fonts, often used groupings of properties and more. It’s a lot to remember without scanning your code over and over again. Also, most CSS files are very linear documents, show them to an object oriented programmer and they’ll probably be driven mad.
As the complexity of interfaces increases and web applications become more robust, we bend the original design of CSS to do more things it never dreamed about. Us coders are crafty! At least for our sanity, browser makers adopt new CSS features for more rapidly today then in the past, providing us more efficient and powerful properties and selectors to aid in solving today’s layout problems. Remember what it took not to long ago to create boxes with rounded corners? Enter CSS3’s
border-radius . So long Flash we now have transitions, transforms, animation and more. Yet, from a programmers point-of-view, there’s still a lot missing.
CSS doesn’t know DRY
Let’s open the door into the world of software engineering (just a crack, you don’t want to be sucked in), we’ll quickly start to see organization, variables, constants, etc., are a critical way to work for developers building complex systems. This is where the principle “Don’t repeat yourself” (DRY) came from:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
The Pragmatic Programmer – Andy Hunt and Dave Thomas
CSS and DRY are not friends, probably not even acquaintances. CSS get’s out of the shower and doesn’t even DRY off, dripping it’s repeated rules, declarations, and values. It constantly makes us repeat the same snippets of code for colors, fonts, and patterns. If a DRY developer looks at your stylesheet, they’d throw their hands up – “How in the world do you maintain this jumbled mess?!?” – to which you’d respond, “Did I mention IE bugs yet…”.
Back to CSS being difficult
So why did it’s creators make CSS so difficult? If we take a peak at this quote from CSS co-inventor Bert Bos, we should gain a little insight.
On the other hand, CSS stops short of even more powerful features that programmers use in their programming languages: macros, variables, symbolic constants, conditionals, expressions over variables, etc. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS. It’s a balance. And for CSS the balance is different than for some other things.
The creators were concerned with CSS’s adoption. They wanted as many people creating websites and using CSS. So it had to be powerful enough to style web pages and separate content from presentation, it also had to be easy to understand and use. We have to respect that, however you and I have work to do, that work continues to become more complicated, more nuanced, and harder to maintain and future-proof.
Enter Sass. Sass is a CSS preprocessor to help plug the holes in CSS, allowing us to write DRY code that’s efficient and maintainable. What Sass does not do is increase our understanding or mastery of CSS. Without this mastery, you may just create a bigger mess. More on Sass in later posts.
Although CSS seems easy when you start using it, it’s takes a lot of effort, time and trial and error to master and understand it. Take care while editing your stylesheets.