HTML is at the core of the web. Sometimes, in the pursuit of making things look beautiful using CSS, we forget that. If you’ve ever used Sass (or a CSS compiler in general), you’ve probably seen your site’s styles break due to a compile error. But before you rush to fix the error you just introduced, take this as an opportunity to analyze and enhance the core of your site: the HTML.



“Failure is simply the opportunity to begin again, this time more intelligently.” — Henry Ford

Normally I’m not one for motivational clichés. However, turning failure into an opportunity for success can hold true when working with Sass (or any CSS compiler). Bear with me and I’ll explain.

Let’s Begin with an Error

If you’ve written CSS using Sass, you’ve undoubtedly seen a compile error. In the command line, it looks something like this:

Syntax error: Invalid CSS after ".module": expected "{", was "}"

Sometimes you might not catch that error in the command line. However, you will undoubtedly catch the error when you switch over to the browser because everything appears broken!

Your first reaction might be to instantaneously switch back to your text editor, fix the syntax error you just introduced, and watch everything go back to normal. But hold on a second! This could be one of those “turn failure into an opportunity” moments.

Sass breaking can be a great opportunity to see your site in the nude, completely undressed. No styling, just pure, untainted HTML, the essence of the web at it’s core. You see, when the browser makes a request it generally gets back a single .html file—pure hyptertext—and that’s it. Everything else (i.e. CSS and Javascript) is an enhancement. As Jeremy Keith states,

“Every line of CSS you write is a suggestion. You are not dictating how the HTML should be rendered; you are suggesting how the HTML should be rendered. I find that to be a very liberating and empowering idea.”

CSS style rules are some of the first enhancements you apply to an HTML document and act as suggestions, not commands, for how the page should look. Seeing those styles break can be an opportunity to stop and analyze the core your web page—the HTML—and improve it if need be. HTML is a long-term format that has been around for quite some time. Not only does the first web site still work, it’s effectively responsive too!

As Ian Yates said,

“All websites are responsive by default, until we start adding styles and breaking them.”

When looking at the pure HTML of your page, ask yourself questions like:

Does my site’s HTML structure make sense, i.e. is it readable and understandable on its own, without any CSS (or JavaScript)? Am I properly marking up my content, i.e. <ul> for unordered lists of items but a <dl> when defining relationships between items? Am I denoting semantically-rich variations in the text using tags like <strong> and <em> where appropriate, rather than generic tags like <span> ?

I have an idea: how about you test this out on your own existing web page right now? Go to your site, open up the developer tools, find the .css file your site uses, and remove all the style rules.

Tip: Alternatively, extensions such as the Web Developer plugin for Chrome will enable you to toggle CSS styles easily.



Look at that! On my own site I’ve found room for improvement. There are a few HTML elements that are non-essential without JavaScript. I should remove those so they are not initially present in the DOM and add them later with JavaScript as enhancements. Additionally, some of the list components could be tweaked and unified in semantics. But this isn’t about me, let’s get back to talking about your website.

Your Website

Browse down through your “naked” page and try reading the content. Does it make sense? Are things that should be headings marked up as headings? Are things that should be lists lists? If not, re-evaluate your markup. The HTML is what constitutes your website at its most basic level. Justin Jackson has a great example of this. Once you have some solid, semantic HTML to start with you can rest assured that even if nothing else on your page loads but the HTML, users can still read and understand your message (search engines too).

a11y

Universally accessible content is a core tenant of the web and is always a great place to start. Speaking in 2004 of this accessible, semantic approach to web design, Jeffery Veen stated,

“[I deliver] solutions to my clients that are far less complex to implement, are much easier to maintain, cost exponentially less to serve, work on multiple browsers and devices, do way better in the search engine lottery, and — of course — are accessible to everyone … everyone … using the Web today. And try to argue with the business value of that. And that’s why I don’t care about accessibility. Because when Web design is practiced as a craft, and not a consolation, accessibility comes for free.”

Conclusion

So next time you’re tweaking your site’s CSS with Sass and you strike a compile error, take it as an opportunity to examine the real content and structure of your site: the HTML. It might be one of those moments where a failure ends up lending itself to a genuine opportunity of enrichment that would have otherwise been missed.