10 Principles of the CSS Masters

[BabyJeffy]

I recently stumbled across this blog post, that whilst it appeared to be a little arrogant in it's introduction, I felt was really valuable information from "the CSS masters".

[link url=http://nettuts.com/html-css-techniques/10-principles-of-the-css-masters/]10 Principles of the CSS Masters[/url]

This blog post shows some useful tips and css "hacks" that are backed up by real examples (and inspired by real scenarios). Hopefully you, too, will benefit from some of the advice on the post.

Cheers,
Jeff


[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

For those having trouble with the link in the above post, it should be:

http://nettuts.com/html-css-techniques/10-principles-of-the-css-masters/

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

I so strongly disagree with Jonathan Snook's tenet of 'Keep CSS declarations in one line' that it makes my blood boil.

He claims that you should always write this:

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

instead of this:

h2 {
   font-size: 18px;
   border: 1px solid blue;
   color: #000;
   background-color: #FFF;
}

Apparently this makes it easier for him to find rules, and keeps your CSS file smaller by removing unneeded spaces and characters.

Well, it sure as hell doesn't make it easier to merge a 1000 line CSS file shared between 3 developers.

"Which line is the change on"?

"Line 1"

Bloomin' great.

It's not advice that I would ever, ever, give out to people - in fact, I would always say the opposite.

Perhaps he hasn't worked on projects with other CSS developers before, but I've worked on many high-profile ones, and the few that have done this have proved it to be a bad technique that always ends up causing more confusion that not.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[feherke]

Hi

I so strongly disagree with Jonathan Snook's tenet of 'Keep CSS declarations in one line' that it makes my blood boil.

Well, that is where I stopped reading the article. I feel better now knowing that writing rules in separate lines is not just my aberrant idea.


Feherke.

http://rootshell.be/~feherke/

 

[Vragabond]

I agree with both of you and this "principle" bothered me too. Although I think you're misunderstanding it at least a little bit making it sound even worse than it is. I think Jonathan wants us to keep all the declarations for one selector on one line. That does not sound as bad as Dan's description, since every selector has it's own line and it is easy to see where one begins and one ends (or define on which line the problem is on).

However, I still agree with Dan and Feherke that keeping it on separate lines is a better idea. I like it mostly because:

1. To me it does look neater that way.
2. It is much easier to comment out specific declarations.
3. It is easier to see which things have been declared and which hasn't (sometimes with a really long selector, you might end up declaring margins or padding twice, because of subsequent changes to the CSS).

Other than this weird idea of keeping CSS selectors on one line, I think other suggestions are pretty sound.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BigRed1212]

I have no idea why that guy thinks putting 5 declarations in one line is easier to read than putting them in 5 lines. 5 lines is way easier. The "space" issue is negligble and a red herring in my opinion. The commenting out point is huge as well.

I know! I'll write my HTML all on one line for ease of scanning!

 

[BabyJeffy]

This has been covered on quite a few blogs, actually

I also stumbled across a good example showing how this might work in a real site (the inline rules are indented to mimic the heirarchy of the markup):

http://corp.kaltura.com/css/corp.css

@Feherke: don't brush off the rest of the article just because of Mr Snook's suggestion... there are a lot of good ideas in that post that make it worth the effort!

PS: The "all on one line" thing made me a little uncomfortable as well, but (as Jonathon himself says), it's his preference (although it's being passed off as a recommendation... and that's the problem as I see it).

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Foamcow]

Personally I organise my CSS with each declaration on a different line AND indent them to represent the element hierarchy.

I will also group declarations based on the relationship between elements.

Normally I have all the raw tag declarations at the top, then my id based declarations then classes at the end.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

I think Snook's problem is with this

h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}

Where the declration AND the ruleset sit on the same margin.

So why not do this

h2 {
   font-size:18px;
   border:1px solid blue;
   color:#000;
   background-color:#FFF;
}

A simple tab before each line (as any decent editor will do automatically) solves the 'problem'.


OK, I've read a little more of it now....

The section on clearing floats is decent advice except for this.

Since the container has margin: 0 auto, we do not want to float it because it will move it to whichever side we float it. So another way to clear the float, is to insert a clearing element. In this case, I just use an empty div set to clear: both. Now, there are other ways to clear a float without markup, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty div.

For the love of *, don't set an empty div set!
Empty divs are invalid and all you need is a non-floated block level element so use a bloody <hr /> and set it be invisible!
It's valid, semantic and still isn't illogical with CSS off (i.e. you can see it).



--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

I think since the Nettuts thing is pulling from other articles it's probably not the best place to read these 'tips' since they are possibly slighlty out of context.

The thing with these 'CSS Masters', and I'm not detracting from their obvious abilities here, is that often they are good with CSS AND are great communicators. This, perhaps combined with 'right place, right time' means that they become heralded as 'masters'. Consequently this doesn't mean they are some god-like being that know better than us mortals - they just have louder voices and people willing to listen.

Anyone who has read Terry Pratchett's "Small Gods" will know what I mean.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.