Template for structure, comments etc re CSS

[Lulu]

Hi

 

I would like to put together a template for a stylesheet that I can use as a starting point again and again to ensure that I cover everyting. I'm thinking of headings, structure/order etc., along with what type of comments are helpful, where people place the comments.

 

If anyone has any thoughts on this, or perhaps a stylesheet that wouldn't mind sharing which illustrates the kind of things I need to think about, I would really appreciate it.

 

Thank you.

[Wickham]

It's often recommended to start with reset styles like all those shown in Meyer's reset:-

http://meyerweb.com/eric/tools/css/reset/

Copy those to the top of your stylesheet and it will make all browsers work the same way, getting rid of their different default margins, padding, etc.

 

Themn you will have to code the styles for your page. As you have made all margins and padding 0 using the reset, you will have to add back margins and padding where you want them. I normally start with the body, then all the h1 to h6 and p tags, then the divs, ul tags and other main elements including working from the top of the page with header, navbar, content and footer, then link styles and special menu styles, perhaps for a dropdown menu.

[Lulu]

It's often recommended to start with reset styles like all those shown in Meyer's reset:-

http://meyerweb.com/eric/tools/css/reset/

Copy those to the top of your stylesheet and it will make all browsers work the same way, getting rid of their different default margins, padding, etc.

 

Themn you will have to code the styles for your page. As you have made all margins and padding 0 using the reset, you will have to add back margins and padding where you want them. I normally start with the body, then all the h1 to h6 and p tags, then the divs, ul tags and other main elements including working from the top of the page with header, navbar, content and footer, then link styles and special menu styles, perhaps for a dropdown menu.

 

Thanks for your post Wickham. I've got the reset in there, and have made a note of the various 'sections' you've mentioned.

 

I would be really interested to see what a few completed stylesheets look like in terms of the comments people have made on the sheet to help them in future, whether they've used /*Headings*/ etc for the different sections and wotnot. I've looked online for templates and such like, but don't come up with a great deal.

[Wickham]

People layout stylesheets differently, but there should be some logic and neatness to them.

Here's one using Meyer's Reset:-

http://www.broadchalke.info/broadchalkehtml5.css

This one dates from 2005 before I knew about reset styles, but it shows the order that I used:-

http://www.wickham43.net/tutorial.css

This one

http://www.broadchalke.info/history/css/history.css

has a shorter version of Meyer's reset, based on what shelfimage posted on the old Killersites forum

http://www.killersites.com/mvnforum/mvnforum/viewthread_thread,10970

 

The Meyer reset is OK but it has more than I usually need, so I sometimes cut bits out of it.

Edited January 19, 2012 by Wickham

[Lulu]

Thanks again, Wickham. Seeing how you've handled the comments is particularly useful.