How should we class?

Where I am coming from

I have recently made the migration from Less  to Sass which, to me, seems to have a brighter future.

I have also made the decision to use bootstrap over something like foundation or susy sass, purely because I am comfortable with it and because it is still the most popular and easy to use.

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!

SASSY SASS

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.

  1. 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.
  2. “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).
  3. 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?

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s