[CSS] What kind of syntax do you use? - Webmaster Forum - Web Design, Programming and SEO forums

10-31-2007, 12:16 AM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

[CSS] What kind of syntax do you use?

In the ChatWebDev IRC channel yesterday, we were talking about our different CSS syntaxes. I'm just curious what you all use.

I'm fond of the following:

Code:

.class {
	selector: value;
}

Though, also this can work for me (not what I use):

Code:

.class {
selector: value;
}

Code:

.class
{
	selector: value;
}

or any variation between those too.

What kinds do you like? I can't stand ones that make it nearly impossible to read, and very unorganized, like this one I've seen:

Code:

.class {
selector: value;}
.class {
selector: value;}

10-31-2007, 12:26 AM

Amross

Status: Member
Join date: Jan 2007
Location:
Expertise:
Software:

Posts: 311

iTrader: 4 / 100%

Amross is on a distinguished road

I use the first one aka the one you are fond of.

10-31-2007, 12:27 AM

Anthony

Status: Sin Binner
Join date: Jul 2004
Location: Yorkshire Coast - UK
Expertise:
Software:

Posts: 5,911

iTrader: 29 / 91%

Anthony is on a distinguished road

Code:

.class {
selector: value;
}

10-31-2007, 12:41 AM

daz

Status: I love this place
Join date: Jun 2005
Location: UK
Expertise:
Software:

Posts: 562

iTrader: 5 / 100%

daz is on a distinguished road

Code:

.class {
	selector: value;
}

10-31-2007, 01:07 AM

Lee_

Status: Member
Join date: Jun 2006
Location: UK
Expertise:
Software:

Posts: 184

iTrader: 2 / 100%

Lee_ is on a distinguished road

HTML Code:

.class
{
	selector: value;
}

FTW.

10-31-2007, 05:49 AM

CreativeLogic

Status: Request a custom title
Join date: Feb 2005
Location:
Expertise:
Software:

Posts: 1,078

iTrader: 6 / 100%

CreativeLogic is on a distinguished road

Originally Posted by LJR

HTML Code:

.class
{
	selector: value;
}

FTW.

Agreed. I code PHP in this way as well, it makes things much easier to read for me. Once you start using your decided 'coding standard' it's hard to move away from it.

If you have a huge block of code within curly braces (especially common in php ifs) then its much easier to distinguish between the start and end of the braces.

10-31-2007, 01:11 AM

alefort

Status: Junior Member
Join date: Oct 2007
Location: Canada
Expertise:
Software:

Posts: 50

iTrader: 0 / 0%

alefort is on a distinguished road

I use #1 when it involves only one or two lines, I use #3 when its a large chunk of CSS. I use the same formatting rules when I code.

10-31-2007, 01:24 AM

Salathe

Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP

Posts: 3,820

iTrader: 25 / 100%

Salathe will become famous soon enough

I use CSS, it's all the same syntax! As for laying out the styles, I'd have to say "none of the above".

10-31-2007, 04:17 AM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

Originally Posted by Salathe

I use CSS, it's all the same syntax! As for laying out the styles, I'd have to say "none of the above".

Psh, semantics.

10-31-2007, 02:28 PM

#10

Salathe

Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP

Posts: 3,820

iTrader: 25 / 100%

Salathe will become famous soon enough

Originally Posted by Andrew R

Psh, semantics.

Hehe, sorry Andrew.

As for laying out my CSS, I'm quite often very, very anal about everything being precise. It goes far beyond indentation! Everything has to be neat and tidy, well ordered and clear even at a glance. Commenting discrete groups of styles and applying a logical structure to the CSS stylesheet as a whole is important. I'll even make sure to keep the declarations in alphabetical order by property. (That means 'background' comes before 'font' which comes before 'margin')

To unr who posted font: verdana, 12px, bold;, please make sure to read up on the order of the values and indeed how to write those values for the font property.