Welcome to WebmasterWorld Guest from 54.145.166.96

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Coding Standards - Part 2

Question 2

   
4:43 pm on May 22, 2008 (gmt 0)

WebmasterWorld Administrator ianturner is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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?

3:44 pm on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@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.

5:35 pm on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
9:03 pm on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

11:58 pm on May 28, 2008 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



*** 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!

11:11 pm on May 29, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



*** 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.

10:57 am on May 30, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

2:11 pm on May 30, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

2:29 pm on May 30, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<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]

10:03 pm on May 30, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

7:00 pm on Jun 1, 2008 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

This 40 message thread spans 2 pages: 40
 

Featured Threads

Hot Threads This Week

Hot Threads This Month