CSS Coding Standards - Part 2

Question 2

[IanTurner]

Okay I need to put in place some CSS coding standards as people who do work for us come up with some real wierd and wonderful stuff.

Question 2:

As a basic standard which way would you go.

Would you layout your CSS file

#mydiv
#mydiv p
#mydiv h1

p
p.classa
p.classb
h1
h1.classa

.classc

Or would you layout your CSS file

#mydiv

p
p.classa
p.classb
#mydiv p

h1
h1.classa
h1.classb
#mydiv h1

.classc

and why?

[Hester]

@SuzyUK - can you edit limbo's post to remove the closing BB style for red? Otherwise people might copy it into their stylesheets. It's at the end of the fieldset declaration.

@limbo. You can condense this...

h2 {padding:0 0 10px 0; color:#000; font-weight:normal; font-size:1.2em; line-height:1.6em;}
h3 {padding:0 0 10px 0; color:#000; font-weight:normal; font-size:0.9em; line-height:1.5em;}
h4 {padding:0 0 10px 0; color:#000; font-weight:normal; font-size:0.8em; line-height:1.5em;}
p {padding:0 0 10px 0; color:#000; font-weight:normal; font-size:0.7em; line-height:1.4em;}

...to this:

h2,h3,h4,p {padding:0 0 10px 0; color:#000; font-weight:normal;}
h3 {font-size:0.9em; line-height:1.5em;}
h4 {font-size:0.8em; line-height:1.5em;}
p {font-size:0.7em; line-height:1.4em;}

That is if you are not planning to add specific padding or font weights or colours to each header and paragraphs separately later on.

[limbo]

Well spotted Hester - the reason we have not used shorthand for heading/para styling is just as you suspected, we'll be sure to add individual properties like colour, size and weight to the HTML elements as the design is shaped.

[SuzyUK]

yes appi, with the DOM, it makes the most sense to me

that's a good point about separate stylesheets for keeping larger sheets from getting wieldy.

If separating the sheets, I'd rather still separate them by ID or site/page section, rather than say colors, sizes like some prefer. If you're making certain people responsible for separate bits of the site/page rather then them having to dip into 2 or 3 different stylesheets in order to make changes to a particular element make sure their elements, and all their properties are together. again it makes it easier to avoid specificity issues too

Some people even indent their CSS to match the HTML structure or others alphabetize.. fwiw I've never been able to work an alphabetized structure.

(have edited the [/red] tag out)

[g1smd]

*** h1 { ... ; visibility:hidden; ... } ***

No. No. And No Again.

Hidden text is a big No No.

Hiding a heading element is a disaster waiting to happen!

[swa66]

*** h1 { ... ; visibility:hidden; ... } ***

No. No. And No Again.

Nothing to worry, they'll understand they shot themselves in the foot when they get a -30 SERPs result penalty.

And they'll have a long while to think of their wrongdoings before they get back in grace with the search engines they were tricking, before they get their adsense account back etc.

It's cheating, not helping the user to have headings only for SEO reasons. It will backfire.

[limbo]

point taken - I think we'll rethink that - luckily this is a work in progress.

The reason for this was image replacement, btw, not for SEO.

[swa66]

To do image replacement: just use the negative text-indent, you don't need all the rest, next size the block, put the image on the background in CSS, make sure the image says the same as the text itself ... and you should be cosher enough to pass a manual review.

But positioning a h1 outside the visible area, 1px tall, 1px wide, hidden sounds an awful lot of alarms.

[SuzyUK]

<ot>
many methods of IR but if concerned about SE "flags" why not copy the method Google uses [webmasterworld.com] themselves

and since when did this turn into an image replacement topic ;)
</ot>

@limbo, thanks for sharing that sheet, it shows that even if a concrete base can be agreed on, selector wise, the actual methods and techniques would be an ongoing development, which seeing as CSS is an ongoing development makes sense really.

I think if you can build a selector base, without using fancy selectors for now then the base could be pretty solid

[edited by: SuzyUK at 2:31 pm (utc) on May 30, 2008]

[DrDoc]

Personally, here's what I do:

---

/* Global and main elements */
* {}
html, body {}

/* Layout element, in hierarchial order, and with names that indicate this as well */
#Header {}
#Header-Logo {}
#Header-Topnav {}
#Page {}
#Page-SearchBox {}
#Page-Content {}
#Page-Content-Sidebar {}
#Footer {}
#Footer-Botnav {}
#Footer-Disclaimer {}

/* Generic element styling, in alphabetical order */
a {}
dl {}
em {}
fieldset {}
form {}
...
p {}
select {}
strong {}
textarea {}
ul {}

/* Classes */
.clearfix {}
.left {}
.right {}

---

I also alphabetically sort all properties within each rule. Any page specifc styling (which is rare) goes inside an on-page

<style>

element or directly using the

style

attribute.

Reasons? It makes it easy to change the layout of a page. All layout elements are sorted in a logical order and in one single location. All other elements are also logically grouped. So, even if I haven't touched the stylesheet for months, I can easily come back to it and get a quick grasp of the page layout (even from only looking at the CSS) and make adjustments as needed. It also makes finding a particular set of styles a no-brainer.

[edited by: DrDoc at 10:06 pm (utc) on May 30, 2008]

[SuzyUK]

CSS protocol needs to be rethought out and recreated from scratch. There are so many issues with it.

I agree with Ian, it does not need rethought at all! CSS is not a scripting language, it is a design suggestion only, or in words like Protocol, it adds to any/all the other scripting languages. That (imho) is what makes it difficult for most to understand.. just because they understand one "programming language" they think this one should work in tandem with it, or at least the same as it..

it does, some just don't understand how ;)

what most fail to get is that it is perfectly logical in its own right, as long as you let go your particular programming protocol.. CSS works with ANY HTML no matter how it's produced

those who wrestle with CSS are, in my experience, those who are looking for a way to control it. CSS can't be controlled, it is a suggestion.... but then again that's perhaps what "logical" programmers don't get?

(btw.. disclaimer = I'm a logic freak)