CSS Gurus - what are your thoughts on this

[Izi]

I love neat code - I always try and reduce the amount of code written to as little as possible whilst retaining legibility.

What I have found when outsourcing CSS is that it will come back it will display perfectly but there will be 1000 lines of CSS with hundreds of classes. This led me to believe there must be a better way of doing this.

I am not saying I am the first to do this I am sure its documented well, but I want to know what you think and send me any links which discusses this further

In my styles I set some OO classes such as:

.size14 {font-size:14px;}
.size11 {font-size: 11px;}
.grey {color:#606060;}
.bold {font-weight: bold;}
.left {float: left;}
.right {float: right;}
.clear {clear:both;}
.inline-block {display: inline-block; *display:inline;}
.thirds {width: 320px;}
.width-635 {width: 635px;}
.width-210 {width: 210px;}
.margin-top-10 {margin-top:10px;}
.margin-bottom-10 {margin-bottom:10px;}
.margin-right-15 {margin-right:15px;}
.padding-bottom-5 {padding-bottom: 5px;}
.no-padding-margin {padding: 0; margin:0;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}

Then in my front end I normally create a singular container for each large section to the site;

<div class="container"></div>

Then within my container without creating further classes I simply use the OO classes above:

<div class="container">
<div class="left thirds">
<span class="size14 inline-block"> some text here</div>
</div>

<div class="right thirds">
etc
</div>
</div>

Like I said, I know I won't be the first person to have done this, but why do I not see more websites done like this? Do people find it unreadable?

I managed to get my CSS document down to 127 lines. This obviously means the speed at which the page loads is faster due to reduced css size, and also I find it much easier to maintain/read.

What are your thoughts?

 

[Izi]

Thanks for the replies.

Simisker - I agree, I did find in some cases that you could end up with:

left inline-block size10 bold

Which becomes less neat and more messy.

Spunkey - It sounds you do the same as me, I create container / layout classes then use the OO classes for items within. Its interesting to know other do this, please share any other tips you have.

I find using cheeky bits of jQuery also neatens up things, for example:

 $('table.data-table tr:odd').each(function () {
                $(this).addClass('row-odd');
            });
            $('table.data-table td:last-child').each(function () {
                $(this).css('border-right', 'none');
            });
            $('table.data-table tbody tr').hover(
            function () {
                $(this).addClass('row-hover');
            },
            function () {
                $(this).removeClass('row-hover');
            });

I realise with JS turned off this wouldn't render, but I am not too bothered.

 

[Izi]

This is terrible practice!

The point of CSS is to separate styling and design fluff from the content of your site.

You're not actually separating the styling information from your HTML. What you've done is found a way to sneak the information back in, by effectively using inline styles, but getting around them actually being inline styles by giving simple styles a class describing what it does.

What happens when you decide you want to make the text larger, site wide. Do you change the .size14 class so that it's actually 15px, meaning the CSS & HTML both get a bit confusing, or do you go through the HTML changing size14 to size15 and define a new class for it? Both are bad options.

Basically, the class names you use should never describe what the class does (a few exeptions maybe for clearing/hiding/etc..). They should describe what the section of the HTML is so that you can style it more easily in your CSS.


Mick.

So we could call the text classes:

text-small
text-medium
text-large

Fixed?

Valid point though, maybe I have gone too far in my example.

 

[Izi]

Thats for the info folks, interesting points of view to which I agree.

Does google take the class names as part of SEO? IE using <div class="article"></div> does Google then realise what is within is indeed an article?

 

[Izi]

You can also force IE6 to recognise them with a bit of Javascript elements.

I didn't know that, just seen this on the link above:

<!--[if IE]><script src="http://d2o0t5hpnwv4c1.cloudfront.net/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
    <!-- This makes IE recognize and use the HTML5 elements -->

Cool. Now restructuring to use these elements - I didn't think I would be using them until 2015!

 

[Izi]

I'd say even that is too verbose in the html, you could slim that down a fair bit if you used .article h3 for example.

Agree, also putting classes on p tags is a big no in a CMS sense.

 

[Izi]

That violates the OO CSS rules of not using location specific selectors.

just watched the video above and this was something that was flagged.

 

[Izi]

.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

It would seem that apart from my margin / font stuff the YUI team do the same/similar to what I had done above.