New Experiments in CSS Tooling

CSS is awful, but it doesn’t have to be that way. For example, new languages that compile to CSS like Stylus, Less, and Sass have made it much less painful to lay out and style web projects. However, these projects are limited: they provide delicious, delicious sugar, but ultimately they are using the same core semantics as CSS. I am really interested in projects that replace the semantics of CSS with something brand new and wholly better: check out Grid Style Sheets, for example. Someday websites might be designed with something like GSS instead of CSS.

A less ambitious solution that is built on top of today’s HTML and CSS standards stands a chance to help more people today. I’ve built a prototype that analyzes both your CSS and your HTML together in order to provide more conveniences than are currently possible. The code for this prototype, codename Deawfulator, is on Github and following are examples of what it can currently do.

First, let’s talk about something simple. When you use float you generally have to remember to add a clearfix class in order to prevent undesirable layout quirks. You could clearfix globally, which I once suggested, but that idea didn’t really catch on due to various limitations. So, clearfixing whenever you use float is the best solution, but why should you have to do it manually? By analyzing both CSS and HTML together, Deawfulator can do it for you.

Before:

See the Pen emrwB by Greg (@incompl) on CodePen.

After:

See the Pen zJgBb by Greg (@incompl) on CodePen.

Pretty convenient. Adding clearfix classes might not seem like a major burden if you’re a CSS veteran, but it’s the endless supply of such gotchas that makes CSS so inaccessible to newcomers.

How about something more subtle? One thing that infuriates me to no end is the implicit margin around inline-block elements. The hacks that people are doing to work around this problem are simply insane. Why can’t margins for inline-block elements just work like you’d expect? While inline-block was once lauded as the replacement for float, that article actually suggested that you might “just float them instead”.

Enough with this madness! Ultimately the hacks for inline-block are all ways to remove the whitespace-only text nodes between the inline-block elements. But why should I have to do that manually? Why can’t my tooling do it?

Oh, but it can! Deawfulator will delete any whitespace-only text nodes between inline-block elements. The result: hack-free HTML goodness.

Before:

See the Pen dJGBL by Greg (@incompl) on CodePen.

After:

See the Pen bxoIr by Greg (@incompl) on CodePen.

These examples demonstrate that this type of tooling can provide real value to web developers. Before I consider turning this prototype into a tool that I could recommend using, there are a few things I need to think about:

• What other bugs can this tooling fix?
• What types of convenience features could it have?
• It currently would work with any HTML template language (such as Handlebars) that can be parsed by Cheerio. What about more exotic template languages such as Slim?
• How much of a problem is it that this does not understand certain template constructs such as partials and helpers?
• Are there cases where the changes that are made may not be desirable?
• Currently it operates on raw CSS, so it could be a build step after the compilation of a language that compiles to CSS. Are there cases where this wouldn’t work?
• It needs a better name than Deawfulator

Do you have any thoughts on these concerns? Do you think this type of tooling would be useful or useless? Tell me what you think in the comments!