Validate CSS Format

Question

On one project client is requesting to change css file code to some thing like this.

example:

div.fp_grid table td.col2 
{ text-align: center; } 
div.fp_grid table td.col2 .body_box 
{ margin: 0 auto; }

becomes:

div.fp_grid { td.col2 { text-align: center; .body_box { margin: 0 auto; } } }

But it seems invalid formate of CSS i little guidance will be appreciated what are your thoughts.

You're right; that is invalid CSS. There are CSS pre-processors such as Less and Sass that use syntax like this, but if they're using one of them, they should tell you. If they're not using one of then they're asking for invalid CSS. — Spudley
– Spudley, Commented Oct 18, 2013 at 11:59
@putvande the clients wants to make it easy for him to remove the extra unused css later , so i want to know how can this format be validated as it is not working for me the the page wont pick css form this formating. — haiderktk
– haiderktk, Commented Oct 18, 2013 at 12:00

David Randall · Accepted Answer · 2013-10-18 12:02:31Z

1

The CSS you have there is syntactically correct. The format they seem to be asking for is consistent with nesting in a CSS pre-processing language like SASS, see http://sass-lang.com/guide for example.

answered Oct 18, 2013 at 12:02

David Randall

7703 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SidOfc · Accepted Answer · 2013-10-18 12:01:01Z

1

This indeed faulty CSS.

CSS does not use nested selectors.

The markup you have above is correct, tho usually you would write css like this:

#selector {
    margin: 0 auto;
    padding: 0 auto;
}

this improves readability so that it will be easier to change in the future.

You could always remove excessive whitespace in CSS files using an online CSS compression tool.

CSS will not give any errors on invalid markup tho, it just skips it as it does not know what it means, therefore your box would be unstyles if nested.

answered Oct 18, 2013 at 12:01

SidOfc

4,6143 gold badges30 silver badges50 bronze badges

Comments

Tzu ng · Accepted Answer · 2013-10-18 12:01:16Z

1

It's invalid css, it's CSS-processor. You can try this service : http://css2sass.heroku.com/

Put your first code block, then click convert 2 SCSS, and you will get the second block.

answered Oct 18, 2013 at 12:01

Tzu ng

9,25414 gold badges69 silver badges106 bronze badges

Collectives™ on Stack Overflow

Validate CSS Format

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related