CSS organization questions

[TechBoyJK]

I have two questions..

1. How do you list your CSS attributes? Alphabetical order? Is there any specific order that needs to be followed? I'm just trying to make things consistent so I'm thinking about having everything alphabetically.

For instance, instead of this:

.details_right
	{ 
	display: block; 
	width: 28%; 
	float: left;
	padding:0 1.5em 1em 1em;
	}

this

.details_right
	{ 
	display: block; 
	float: left;
	padding:0 1.5em 1em 1em;
	width: 28%; 
	}

2. I was reading a CSS expert's blog and he preferred to setup a class for common attributes, and declare multiple classes in the tags.

For instance, instead of this

----------------------------
.details
	{ 
	display: block; 
	float: left;
	padding:0 1.5em 1em 1em;
	width: 28%; 
	}

----------------------------
<div class="details">

Do this

----------------------------
.block {display: block;}

.float_left {	float: left;}

.details
	{ 
	padding:0 1.5em 1em 1em;
	width: 28%; 
	}

----------------------------
<div class="details block float_left">

Thoughts?

 

[Woosta]

1. Don't have presentational class names. They should be semantic. Soo, dont use "block" or "float_left".

2. display block on a floated element is useless, it's already block from being a float.

3. If you need something special, use "details-" whatever:

div.details { float: left; padding:1em; width:whatever; }
div.details-alternative { float: right; }

It makes absolutely no sense giving an element a "block" class because a div is block by nature, and the float:left makes it blocky anyway so the block serves absolutely no purpose. Using this "logic" means that you should give EVERY element a class to define its display value, which would be redundant and retarded.

4. "Is there any specific order that needs to be followed?"

No, but I try to keep it alphabetic. You can also use a script that redefines your css file post save and alphabeticizes it.

I also recommend using http://sass-lang.com/

5. I was reading a CSS expert's blog and he preferred to setup a class for common attributes, and declare multiple classes in the tags.

There are a lot of self proclaimed experts, but this style only provides you with classitus. You should just have 'details' class with generic 'details' div styling. If you need something specific for special 'details' divs, then create a secondary ruleset that overrides the former.

 

[PhatoseAlpha]

Personally, I just add to the end of the file. If I recall correctly though, selectors of equal specificity lower in the file will override ones above it, so order can matter for function - but it's rare.


That particular experts setup seems problematic at best, and missing the purpose of having stylesheets separate from the html markup to begin with. The idea was to separate out presentation from markup. Using the miniclasses he's got though, you cannot realistically alter presentation without going into the html. At which point, why even bother with classes and separate style sheets? Might as well just use inline styles if you're set on mixing up your presentation and html like that.

 

[TechBoyJK]

Thanks guys.

So.. Does a display attribute of 'inline' get canceled out because an object is floated? Or does it affect the float in anyway?

 

[TechBoyJK]

anybody?

Does a display attribute of 'inline' get canceled out because an object is floated? Or does it affect the float in anyway?

 

[PhatoseAlpha]

As far as I can tell, display: inline simply get ignored. Doesn't seem to make any sense on floated elements anyway,

 

[Woosta]

display:inline on a floated element is only useful in the case of the double margin bug in IE. I tack it on because I've been dealing with IE6 for years. If you don't care about IE6 don't bother, as 'inline' won't affect it per the spec.

 

[the182guy]

display:inline will not affect a floated element. Have a look at the newer display:inline-block usage which can be useful.