The Importance of Separating Structure from Style
Many times I’ve asked myself, “When should I use an H4 or an H5?”, “Should I use a div? A span? Or is it better to keep using headline elements?”. In the end, what the users will see is what the style says and not what the element represents; I could use a span and style it to look exactly the same as the biggest headline in my page.
See also: Bootstrap Android OpenGL 2.0
At this point, I started questioning myself and came to the conclusion that HTML elements are useful to guide the programmer when designing the structure of a web page and are also useful to the user when the CSS doesn’t load. None of these advantages are related to styling and this is because your styles shouldn’t be related to HTML elements, that’s what classes are for. If you only style your elements using classes, something that’s a button today can be an anchor tag tomorrow and the user would be none the wiser.
At Wolox, that’s one of our code styling rules since this allows us to reuse all of our styling properties without having to relate them to a particular tag. As you may imagine, if I change an anchor tag to a button, I suddenly get a lot of undesired styles like a very ugly border and a gray background. That’s another problem! It might seem like a good idea to have a basic setup for browser elements by default if you have no CSS. But if I have my own stylesheet, I would prefer to define my own button from scratch without having to override undesired stuff.
So, while developing lots of custom components to reuse in our projects, we are also creating a CSS reset file which just removes all browser styling leaving your elements free of undesired properties and making them look all alike. This way, if your CSS loads correctly, you’ll see your styles and if not, the default browser styles will be shown. So, just remember to keep your style in classes and decide when writing your HTML whether that’s what the page should look like when the CSS fails to load.
See also: AWS Lambda + SimpleDb + Mandrill
I’ll close this post by adding that we also try to avoid using ids to prevent the use of unnecessary ‘important!’ statements. Classes can do the same job as ids but, they are less specific. If you want to be specific, nest your selectors. But remember: too much nesting is a sign that you are not structuring your site the right way (up to 4 levels max is what we use).
Thanks for reading, we hope this helps you the next time you are starting a page. If you have any suggestion or opinion, you can always contact me and we’ll discuss about it.
Posted by Gabriel Zanzotti, Front End Technical Leader at Wolox, @WSKOLZ, (gabriel.zanzotti@wolox.com.ar)
