CSS Gurus - what are your thoughts on this

  • Thread starter Thread starter Izi
  • Start date Start date

Izi

Izi

Izi

Soldato
Joined
9 Dec 2007
Posts
2,718
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:

PHP: 
.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;

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

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

PHP: 
<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?
 
What you're doing is shifting the balance of 'dirt' from the CSS to the HTML - sure, the CSS is cleaner/more organised, but as a consequence the markup is less pure.

The problem with this - and it's only a slight one in my opinion - is that search engines provides results based primarily on the HTML, not the CSS. In Google's eyes, the HTML is more important. So, where should you put your 'dirt': in the important HTML or the less-important CSS?

Having said that, this is something I've been doing for a while. I've found it a great aid to rapid prototyping, especially with grid-based layouts.

EDIT: The thing to be mindful of is that the more precise you become with these classes, the closer you get to an inline-style level of 'dirt'.
 
Last edited:
I tend to do use a mixture of both styles.

I'll design a layout using position-specific classes (eg. .leftcol-header, .main-content) and for any elements which share a single condition I'll put that into a class by itself (eg. .display-none, .line-height-14).
 
Thanks for the replies.

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

Code: 
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:

Code: 
 $('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.
 
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.
 
Mickey said:
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.
Click to expand...
 
Mickey said:
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.
Click to expand...

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 said:
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.
Click to expand...
It'd be a start at fixing it, you're still going to endup with loads of extra detail in your HTML that could (should) be moved into your CSS documents.
 
If you've only got one element on the page, use an ID attribute. If you have more, use classes.

The name(s) of these IDs and Classes should be describing what they are, not what they should look like. So #container is a good name, .text-align-middle is not.

A typical blog markup that, in my eyes, is "good" would be something like:
Code: 
<div id="mainContainer">
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
</div>
As Mickey pointed out, there should be nothing in your markup to hint at style - everything about style should be in the stylesheet.
 
HTML5 provides some nicer tags for us to use..

<header>
<article>
<section>
<footer>
<aside>

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

Coupled with CSS3 selectors, you can create some pretty beautiful CSS/HTML.

It's also worth noting you should indent your CSS for nesting/clarity. See examples on my above post link.
 
Last edited:
Considering the HTML5 spec provides new elements with semantic mark-up, I think the indication is to make the HTML more meaningful, not litter it with classes that give no indication of purpose.

It's definitely useful, and I do use a combination, but I think if you take it too far it leads to bad practice.
 
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?
 
FabienO said:
You can also force IE6 to recognise them with a bit of Javascript elements.
Click to expand...

I didn't know that, just seen this on the link above:
PHP: 
<!--[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! :)
 
Dj_Jestar said:
If you've only got one element on the page, use an ID attribute. If you have more, use classes.

The name(s) of these IDs and Classes should be describing what they are, not what they should look like. So #container is a good name, .text-align-middle is not.

A typical blog markup that, in my eyes, is "good" would be something like:
Code: 
<div id="mainContainer">
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
  <div class="article">
    <h3 class="articleHeading">Lorem Ipsum</h3>
    <p class="articleContent">Lorem Ipsum Dolomet Badara</p>
  </div>
</div>
As Mickey pointed out, there should be nothing in your markup to hint at style - everything about style should be in the stylesheet.
Click to expand...

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.
 
Should avoid overuse of all classes.

Code: 
.article 
   { width: 200px; }
   .article h3 
      { color: red; }
   .article p 
      { color: blue; }

though it's better to separate styling from positional. So text.css would contain the info for p and h1,h2,h3, and so on.

Should be more like



Code: 
HTML

<section> 
   <article>
      <header><h3>Title</h3></header>
      <section><p>Content</p></section>
      <footer><p>Footer</p></footer>
   </article>

   <article>
      <header><h3>Title</h3></header>
      <section><p>Content</p></section>
      <footer><p>Footer</p></footer>
   </article>
</section>  


CSS Default

.article 
   { width: 200px; border: 1px solid #fff; }
   .article > header 
      { margin: 0px; padding: 0px; }
   .article > content 
      { padding: 20px; }
   .article > footer
      { font-weight:bold; } 


CSS text

h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
p, h1, h2, h3 {	margin-bottom: 20px; }
article, footer, header, section { display: block; }
 
Last edited:
PHP: 
.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.
 
You must log in or register to reply here.
Back
Top Bottom