Jump to content
xisto Community
Sign in to follow this  
Lozbo

Css Syntaxes space between everything

Recommended Posts

I always write my css with no spaces between the rules, and everything inline, like this:

#content {padding-top:1em;background-color:black;}#left p    {margin-top:0;color:white;}

Just Im not sure if it affects the code, but all code i see in other pages is separated like this:

#content { padding-top: 1em; background-color: black; }#left p    {               margin-top:0;               color:white;}

Like a space after and before { and } and between the rule and the value (after the ':' ) and between rules (after the ';' ).

I dont see anything going weird in my final tests in some browsers but i dont know if this is a bad habit i should correct or something, its just im used to it and i recognize better my own code like this...

Does some one know something about it?

Notice from cmatcmextra:
When writing code, please put code tags around it.

Edited by cmatcmextra (see edit history)

Share this post


Link to post
Share on other sites

I usually (by habit to improve readability) leave a space like the second example. After the colon and the semi-colon. It also makes it easier to select or highlight the value if the space is there. In theory, html ignores the white space.

Once you begin using xhtml as the Document Type Definition (DTD) and start to add the closing slash to your single tag elements, IE won't like the lack of a space before the slash. It doesn't parse correctly in IE without a leading space, I am told, so I am also in the habit of including a space before the slash. Example:

<br/> is not good<br /> is good
There are other tags which require the closing slash. I am only showing this one example.

Hope this helps.
Notice from jlhaslip:
Edit for typo

Edited by jlhaslip (see edit history)

Share this post


Link to post
Share on other sites

I found something about that when i was learning xhtml, and i read that the problem was actually with netscape, but havent checked it at all.But i think xhtml and css is interpreted differently becouse they are different things right? So the white spaces of css should be parsed differently, well thats what i thinkAnd the white space between lines i think its ok but the white space between the brakets (i think these are called brakets right? { } ) and the whitespace between the colon and semi colon...I find it more readable like this, becouse its all shorter and avoids extra spaces, thats why i like to write it all down in a single line, so it doesnt bug me off, becouse i know what im doing, but im planning to make all this better and with line breaks where needed for some one who wants to see the code (after i have finised it), and learn from it...

Share this post


Link to post
Share on other sites

Tyssen's right, it's only for other people to view your coding better. It's ok to have no spaces as long as you start and end everything correctly, like you did. Same goes for HTML.

For Example:

<a href="http://http://www.somesite.com/;
No space inbetween the quote and the target attribute. But, it'll still work.

Share this post


Link to post
Share on other sites

As truefusion and tyssen said, it doesn't make a difference to the browser parsing the code, but you should have the spaces. For example,

	ul li a {  display: block;  text-decoration: none;  color: #aaaaaa;  background: #000000;  padding: 5px;  border: 1px solid #ffffff;  border-bottom: 0;}
is a ton easier to read for both yourself, and people who may be wondering how you got that effect on your webpage.
	ul li a {display: block;text-decoration: none;color: #aaaaaa;background: #000000;padding: 5px;border: 1px solid #ffffff;border-bottom: 0;}

is a ton more confusing. Writing 2 or 3 lines of that will confuse you pretty quickly.

The same goes for commenting out your code, it just makes it easier to understand. I know for me, when i open up a program I have done 2 or 3 months ago, and dont always remember why I did a certain thing, I always wish i had commented it out or left some kind of note.

Anyways, have fun with css.

Notice from BuffaloHELP:
Edited BBcode tags.

Edited by BuffaloHELP (see edit history)

Share this post


Link to post
Share on other sites

Having spaces in the CSS is, as everyone says, easier to read when you are developing your page. However, what I do when I am finished with the development, I actually go back and remove the spaces and carriage returns so everything is basically on 1 or 2 lines.Actually, I don't physically do this, there are programs that do it. If your style.css CSS sheet is large, it can increase your web page load time. Removing spaces and stuff can reduce the size. You don't gain much if your file is small but every bit helps.Even on your HTML pages, if you remove all the spaces, it can make a significant difference. I had one page that was like 60k and after removing the spaces, i was left with a 24k file. To the end user, the thing looked exactly the same.You can save an "uncompressed" version of your page for editing but upload the "compressed" version to the server. I cut my page load times from like 13 seconds (on 56k), down to around 6 seconds just using this technique.

Share this post


Link to post
Share on other sites

Alright, got it, and no9t9, there's no issue about this that you propose and standards? I know it helpsother people understand the code, but there's nothing official about this in parsers or validators or just standards?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.