Question about good practices for writing style sheets
newbie
Posted: Fri, 2008-05-16 22:06
I've been looking at tons of sites' css lately & notice some people write them inline & some use an indented form. I prefer reading the indented form & recently read it was a good practice to indent styles.
Also, I've learned there's an order write the anchor psuedo classes too(link, visited, hover, active). One thing I haven't notice with any consistency is if there's an order for the properties to be written.
I understand the syntax is:
selector {property: value}
I do notice most styles will have margin & padding first. Is there a good practice for following that? For example, after margin & padding, maybe height, width, background, border, then font?
Using the order exampled above, I might write:
#header {
margin:...;
padding:...;
height:...;
width:...;
background:...;
border:...;
font:...;Also, what are good practices for commenting in the styles sheets & in the markup?
I hope my questions makes sense & thanks for any feedback!
Aaron
Enthusiast
Posts: 201
Joined: 2008-03-16
I don't believe there is good or bad practice
Posted: Sat, 2008-05-17 00:14
Who should I use a standard for? The people that might look at your CSS when they enter your site? You can care less about them, because you are the one who has to navigate blindly through your CSS to find errors or quickly change something. The best practice is what serves you best. I came across different styles and orders, I learnt, and I developed the style that serves me best. Of course, if you work with someone I am sure the best practice has to be determined.
Moderator
Posts: 11958
Joined: 2004-06-06
Location: London
Unless there is a specific
Posted: Sat, 2008-05-17 08:30
Unless there is a specific reason you link to stylesheets, this provides global caching, global styles; writing styles as 'embedded' within style tags in the 'head' are specific only to that page, use them only if really necessary; as for 'inline' styles avoid them they should seldom be used as they have drawbacks they cannot be easily countermanded.
Your element property order is close to what most of probably specify, personally, running top to bottom, I state position or float followed by dimensions then margins, padding and on down to fonts/backgrounds/borders etc .
Avoid commenting stylesheets too heavily all it does is very rapidly add weight to the file, consider the end user and your bandwidth, arrange your rulesets into a logical order comment those sections so it's clear what one is looking at e.g global text defaults or main layout styles, comment sections which maybe overwrite already set general styles, form elements perhaps specific to one particular page.
Do comment html tags especially closing div groups so that it's clear where you are in the tag flow, it makes for easier editing and debugging.
Other than that it's as been stated to a large extent it's what you feel works; but one thing to always try to keep to is the element flow try and match the flow of rulesets to the document elements, it helps to keep things easier to follow and find.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
newbie
Posts: 6
Joined: 2008-04-30
Thanks both of you. I
Posted: Mon, 2008-05-19 02:11
Thanks both of you. I suppose I'm on the right track then. What you've said is what I hoped was the case.
I was mistaken to say "inline" though. By 'inline' I meant how some people write the styles left to right rather than the horizontal/indented way. That I used the term 'inline' was me begin forgetful that it referred to styling in the markup.
Some people write like: #header{padding:...;margin...;} and it can go on pretty far horizontally. Describing it as 'inline' was a mistake, but it still produce useful information. Go figure eh?
Thanks again!
Moderator
Posts: 11958
Joined: 2004-06-06
Location: London
Writting the ruleset
Posted: Mon, 2008-05-19 04:52
Writting the ruleset properties 'inline' is not the preferred method for most it makes it hard to read, the general approach is to newline each property and indent it, but this does mean slightly larger files.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Enthusiast
Posts: 201
Joined: 2008-03-16
Hugo wrote:Writting the
Posted: Mon, 2008-05-19 13:07
I understood your "inline". I actually considered it a fact and not point of the discussion that the CSS is within the html document. I also find it hard to read and I can live with slightly larger files when I save time and nerves by writing each property indented in a new line. I also avoid grouping several elements with the same properties.