How I Learned to Love CSS

Admit it, engineers. You don’t want to work on CSS if you can possibly avoid it. Hey, I understand. CSS is infamously frustrating, and I used to tear my hair out trying to figure out why nothing seemed to behave properly without adding float:left to every single element on the page.

It’s a poorly understood medium. No one can even decide what it is. A programming language? A standard? A random collection of browser inconsistencies, unpredictable behavior and awkwardly appropriated programming terminology? (I’m looking at you, “class.” Give me a way to implement public and private methods and then we’ll talk.)

But I’ve come to love working with CSS. If you look past its flaws you’ll see it describing a kind of physics – one that belongs to documents, rather than to the physical world. CSS exists because we needed a way to explain how words should flow on a page, and how blocks of text should respond to the constraints of being displayed at different screen sizes, in multiple columns, or wrapping around images.

Once you start thinking about a design this way you get a feel for how it moves. Your block level elements are barriers for controlling where text flows, and in a responsive layout you can tell those barriers to stretch and shrink depending on the width of the screen. But only the width, because it’s the content – the text – that dictates the height.

Here at Plastiq we don’t actually write CSS. Right now we’re using SASS, which neatly sidesteps the controversy over what is or is not a programming language. (Although you can build cellular automata with it. Just saying.)

Of course, SASS doesn’t get us out of having to learn CSS, but it has allowed us to do some powerful things, like bundle our styles with their corresponding UI components. Structuring it this way has taught me a ton about writing scalable, maintainable CSS. And my coworkers here have embraced and grown to love CSS as much as I do. Probably. Well Trideep does anyway.

So the next time you find yourself poring over stack overflow trying to figure out why your text is poking out the bottom of the box like that, take a deep breath, think about how your document is trying to flow, and if all else fails try adding !important. That usually fixes it.