Where I am coming from
Good ol css3
With the introduction of css3 into the world, everyone seemed to be very careful about loading style sheets , ordering them appropriately and avoiding the “!important” tag like the plague unless absolutely necessary.
Using Bootstrap in the vanilla css environment was a fantastic breakthrough for me as the transition between static and responsive design seemed effortless.
However my div’s started to look very messy: between mixing bootstraps lovely built in css, grid system and my own css, often made me feel like a bomb technician , carefully pulling apart something that could go off at any second (which usually went off after a weekend when I sat down and completely forgot what had happened on the friday).
Then came the less
I could now extend my own classes with bootstraps wonderful range of less mixins and variables, making my html much cleaner and my conscience too. I could now combine all of this magnificent css into a single class! How marvellous!
For me sass basically did the same thing as less but seemed a lot cleaner and freer than less in that it accepted my idiocracy much quicker than less.
But was this cleaner feel better?
I think I over use the cliche “less is more” especially when working with less or sass as it doubles up as a pun as well – how fabulous! – .
Ultimately though, I am a firm believer that your preference in coding style (especially something as fundamental as styling) should be like your preference in wine :
Whatever is the best for you is the best.
I am not saying that we must not use new technologies and practices, but rather just because something is newer, doesn’t always make it better.
And if you are still using vanilla css, it is time to change!
Get to the point man!
To get the point of this whole thing I would like to share a few gems with you as to how I currently see the wonderful world of html and css at this point in time.
- Just because you can use a single class for everything doesn’t mean you should: basically I try to use my own classes as much as possible and extend them only when aesthetically necessary. I feel like having a class that is extended by “col-sm-12” or “row” in my less/sass often gives me a greater headache than before. I like to see an overview of the site when looking at the basic html mockup and things like grid positioning and floating should always be clear – not something that is vaguely hidden away in some _scss prepossessed file.
- “id”s are there for a reason, so lets use them. I feel like not enough emphasis goes into the fact that object oriented principles can also be applied to css (to a certain extent). What I mean is, one should always have a single “id” with a collective option as well – “class” (NB: use ids with caution).
- Don’t be afraid to use inline styling, okay , before we continue, I am not an advocate of styling something inline at the last second because I was too lazy to dig up the style sheet and find the freaking class. But rather, if something is that important that you are considering using an “!important tag” , why not use inline styling instead? It certainly makes more sense when looking at the html to see the important elements of the styling being displayed, especially when they make a structural difference to the presentation of your html.
If anything here is horribly profane and offends you, please feel free to leave a comment. My advice is by no means perfect, but rather share what you know and where you are in your web development life then not, amiright?