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.
أدهم أبهابي مدون محترف مهووس بالتطوير و تغيير ألوان قوالب بلوجر ، أحب ألعاب الفيديو و كرة القدم، ناجحٌ في دراستي إتكلم الفرنسية و الإنجليسية و مالك مدونة نجوم ويب.
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات تابع المدونة تابع المدونة