HTML5 & CSS3 No No’s, Tips for Maintainability
Building a website? Looking to improve your html and css skills and not look like a fool? This is my list of HTML5 & CSSs No No’s, Tips for Maintainability, Now don’t get me wrong, if the job gets done and the client is happy you did well. What I’m talking about in this article is if any other competent developer sees you going against these guidelines you will be judged. These so happen to also be a list of my pet peeves and usually makes me want to punch small children. Anyway lets get started!
Don’t Use !important
Starting off with guns blazing, my #1 biggest pet peeve, the use of !important markup. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. There may only be a few times in your career where you will have to use one and you will feel like you are shooting yourself in the foot. Really there is not a single case in which this should be needed, unfortunately the world is not a perfect place and people can not understand the rules of Css Specificity ( Link & Link ). I can’t tell you the amount of times I have wasted time trying style the markup and have run head first into this issue. If there is anything you can take away from this article is please do not use !important. The last theme I went to clean up had 144 of them. !importants overriding !importants, talk about a headache. Moral of the story do not use them unless your life depends on it! Using !important destroys the cascading feature of css thus leaving you with one jumbled stylesheet that is going to be a nightmare to maintain and fix.
Watch Your Inline CSS
Know the Box Model
The box model is crucial to styling. If you don’t know it then I would suggest doing your due diligence ( Link & Link ) if you are serious about your career or if you just flat out enjoy not wasting your time throwing code around and seeing what sticks. This was one of those eureka moments when I understood this concept and changed the way I coded. Which leads us into the next item in our list!
Use Dry ( Dont Repeat Yourself ) way of thinking
The title says it all “Don’t Repeat Yourself”, if you can understand which styles are default to what element in what browsers. You do not need to memorize then, there are helpful styles like the Css Reset to make your life that much easier by resetting any styles a browser might add in as one off styling ( I’m looking at you Internet Explorer ). Lets face it, deep down inside we are all lazy and want to create both an amazing and robust product yet why spend more hours than you should? After all you are wasting your own resources ( or others ) when you could spend that time doing something more productive or solving other problems.
Use a CSS Pre-Processor
We all know that css selectors when done properly can become a huge burden to manage and scale. Do yourself a favor and learn to use one if you don’t already I suggest Less or Sass ( I personally use Less as it is what I am most comfortable with ). Using these amazing tools you can reduce the overall time of development and code smell! Its a win win, really though if you are not using one, start and get familiar with it, you can thank me later.
Know Your IDE
Lately I have been realizing the benefits of using the IDE as a craftsman tool rather than as a text editor. I use Php Storm which seems to work best for me since I am a Front End developer but also dive head first into multiple languages at once ( I’ve heard a lot of hype around Sublime but never really dove into it ). Using a proper IDE will boost productivity and hopefully make you more money in the end, after all the faster you type and most importantly the smarter that you code make you stand out. A proper IDE can make use of matching paths and really help with error reporting.
Understand the cascading feature of Css
As the word cascading is in the name, you need to learn to properly manipulate the code. If you have your selectors & properties logically grouped there should be a bit of inconsistency in your code as far as not being alphabetized. I only say this because there are a few plugins I have seen pop up over the years that try to help out and help manage your code. Css Comb for example takes your css ( properties only, not available for use with a pre-processor ) and alphabetizes it. I’m not sure they really understand the concept of Cascading style sheets, otherwise it would be Alphabetized Style Sheet ( Ass for short ). In theory it is an amazing tool and would be awesome if I actually saw some real purpose in it rather than unleash hell upon you when you attempt to alphabetize a large css / less file. Please don’t contact me if something like that happens, you brought yourself into that ditch.
Overriding a theme with a new stylesheet
This may seem like a logical and thought out comment but believe me, I have seen this go horribly wrong for some people. What seems to be like a quick style fix to a one off site turns into a massive endeavor to maintain and you think to yourself, lets just add it to the bottom and we will be ok. Yeah I’ve learned from my mistakes plenty of times, whether it is the author of a theme pushing out an update and breaking all of your code to making a quick fix and not realizing you broke styling on pages you forgot you even had. Make another Stylesheet, no harm in doing this as you can combine and minify them at the end and it will look as though nothing has ever changed ( maybe even give you a speed boost! )
Below is a video from a HTML5 Dev Conf ( a little dry but informative )