Organise stylesheets?

[chris_bcn]

How do people organise their stylesheets? I've been playing around with ideas from various blogs and trial and error. Wondered if people had any insight.

I mean specifically locating verious elements once you've finished. Some of my stylesheets are scary long and if I have to go in a cchange stuff it can takes ages to find the relevant bit.

This is mine. the _ efore the title makes it easier to do a find on the the title as I might mast in the Mast section and the Link section. If you see what I mean

Any thoughts?

/*
======================================
STYLESHEET INFORMATIO
======================================
Author: Chris Basey
Email: chris@comediadesign.com
Document Colours:
-
-
-
-


*/



/*
======================================
_CORE
======================================
*/
/* Remove padding and margin universally */
* {
margin: 0;
padding: 0;
}

/* Put margins back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
margin: 1em 0;
}

/*
======================================
_LAYOUT
======================================
*/

/*
======================================
_Mast
======================================
*/

/*
======================================
_Navigation
======================================
*/

/*
======================================
_LISTS - NAVIGATION
======================================
*/

/*
======================================
_LISTS - CONTENT
======================================
*/

/*
======================================
_TYPOGRAPHY
======================================
*/

/*
====================================
_HEADER TAGS
====================================
*/


/*
======================================
_LINKS
======================================
*/


/*
======================================
_BOXES -LAYOUT STYLES
======================================
*/


/*
======================================
_TABLES
======================================
*/

/*
======================================
_IMAGES
======================================
*/


/*
============================
_SEARCH RESULTS STYLES & FORMS
============================
*/

/*
======================================
_MISC
======================================
*/

[EC]

I have a bunch of different prototypes -- if I nail a good system for centering, I call it "centered prototype" or a great 3-column liquid, same same.

This is the gist of the prototype that I use after reading CSS Mastery. The idea of having a "shell" of a stylesheet was like "bonk" why didn't I ever think of that? Genius.

I have some code in here already just for suggested values.


/*
__________________________________________________ _________________________

Stylesheet created for Client Name

version:
author:
email:
website:
__________________________________________________ _________________________

*/

/* =Basics
__________________________________________________ _________________________*/

body {
font: small Verdana, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, sans-serif;
}

*html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}

/* Remove padding and margin universally */
* {
margin: 0;
padding: 0;
}

/* Put margins back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
margin: 1em 0;
}

/* Class for clearing floats */
.clear {
clear:both;
}


/* =Type Styles
__________________________________________________ _________________________*/

h1 {

}

h2, h3 {

}


h4, h5, h6 {

}

caption {

}

blockquote {

}

ul {

}

li {

}


/* =Link Styles
__________________________________________________ _________________________*/

a:link{ }
a:visited{}
a:hover{ }
a:active{}

/* =Image Styles
__________________________________________________ _________________________*/

/* Removes border around linked images */
img {
border: 0;
}


/* =Layout
__________________________________________________ _________________________*/

/* =Header or Logo */

/* =Main Nav */

/* =Sub Nav */

/* =Content */

/* =Secondary Content */

/* =Footer */



/* =Forms
__________________________________________________ _________________________*/

/* Removes fieldset borders. even on Opera 7 */
fieldset {
border: 1px solid transparent;
}

option, select, textarea, input {

}

/* =Tables
__________________________________________________ _________________________*/

table {
border-spacing: 0;
border-collapse: collapse;
}

td, tr {
padding: 3px;
}



/* =Misc 1
__________________________________________________ _________________________*/



/* =Misc 2
__________________________________________________ _________________________*/

[chris_bcn]

i must get a copy of that book - it sounds really good

[EC]

although I will say I've stoped putting the *html hack into my stylesheets and pull them out using IF IE in the header. http://www.thinkvitamin.com/features/css/stop-css-hacking

[EC]

i must get a copy of that book - it sounds really good

'tis. and all the downloads for the example are available online. http://www.friendsofed.com/download.html?isbn=1590596145

[reuber1]

The templates for ASPStoreFront that we get from them that integrates with our software are horrendously long, and nary a comment tag anywhere to be seen. If I ever get assigned back to those again (doubtful) I will look into doing that. I can't count how many times a store has called asking "what controls this" or "how do I change that?" What makes it harder though is that not everything is controlled in the css, but from the admin site of the store's webpage itself.

[EC]

Yeah that sucks. I am a huge fan of commenting the code really well and leaving it in. You never know when another designer/developer is going to come in after you, or even your client!

Also, having the different sections organized really helps as you're writing it, i.e. CNTR-F =Type brings my type section right up, boom.

[Eraser Nubbin]

Can I ask a really dense question about style sheets?
I have always used them for text formatting, bg colours, etc.

But now I hear of this spandangled way of actually laying pages out with CSS... this is way over my head, just curious about how/why CSS has replaced tables?

Yes I do know I am probably five years behind...

[EC]

Can I ask a really dense question about style sheets?
I have always used them for text formatting, bg colours, etc.

But now I hear of this spandangled way of actually laying pages out with CSS... this is way over my head, just curious about how/why CSS has replaced tables?

Yes I do know I am probably five years behind...

You're not behind Eraser, we're all unlearning and relearning. It's a transitional stage right now. Used to be that browsers would choke on CSS-P (Css for positioning or layout). But now, technology has improved -- the birth of firefox, safari and other compliant browsers taking a bite out of market share and whatnot. The browser wars are over and they're trying to comply with w3 standars, etc. So -- time is now to start moving into CSS-P.

The reason why is very simple -- it separates style from content. The advantages are huge and many: you can update the entire design by editing just one file, the client can deal with content and not have to wade through code, etc.

[chris_bcn]

It's the future baby!

Come, come join us. Soon we will rule the world!!!

Plus what EC said. Much lighter pages, save a fortune on bandwidth costs for larger sites with lots of traffic. Seperation of content and style couple with Semantic markup make for accessible and usable web sites. same markup can be given a complete new look just by updating the style sheet

check this out - explains things very well

http://www.hotdesign.com/seybold/

[reuber1]

Nice link chris. I need to get a CSS book and start hitting that sometime. When my portfolio site gets up and running (quality portfolio work pending), I would like a Flash one and a CSS driven HTML one.

[Eraser Nubbin]

Thanks muchly!
I will try and wrap my head around that... I should have know something new would come along, just as soon as you get a good grasp on something it becomes obsolete.

[reuber1]

It's like design alzheimer's.

[chris_bcn]

Gets worse the more you learn as well with CSS.

I'm now getting to grips with attribute selectors and the like. Only web standard compliant browsers accept them, but with IE7 on its way, it's time to start reading those blogs in earnest again.

My favourite so far

h2+p{font-weight:bold} this will bold the first paragraph after an h2 element, but the rest of the paragraphs will be normal (assuming you haven't set all p tags to be bold already. Which would be abit odd).

It never stops, but that's the fun thing.

I've also started learning XAML for windows vista. Seems to be a bastard hybrid of XHTML, XML and CSS so far

[flutterby nut]

very enlightening thread...thanks guys!

[EC]

very enlightening thread...thanks guys!

awww, group hug http://img126.imageshack.us/img126/2761/slidergrouphugg4eg.gif

[EC]

Hey flutterby_nut, have you ever read these? http://simplebits.com/publications/

If not, get those before CSS Mastery. So worth the investment.

[chris_bcn]

bulletproof webdesign is a fantastic book. I use the bulletproof boxes all the time. Simple concept, simple execution, lovely clean timy code. Very nice indeed

[chris_bcn]

Anyone thinking of starting in web design absolutely has to read these 2 books at least 3 times. imho, tbh, idst

http://www.amazon.com/gp/product/0735712018/ref=cm_lm_fullview_prod_1/104-9342172-9863139?%5Fencoding=UTF8&v=glance&n=283155
http://www.amazon.com/gp/product/0789723107/ref=cm_lm_fullview_prod_1/104-9342172-9863139?%5Fencoding=UTF8&v=glance&n=283155

[EC]

^ also on the shelf. yup. 'cept I might be sending the krug book to g-man since losing the american idol bet. lol

[flutterby nut]

hehe!...lots of reading to do...lol...appreciate all the recommendations!

[EC]

hehe!...lots of reading to do...lol...appreciate all the recommendations!

Sometimes feels like all I read are web dev books. http://endeavorcreative.net/team/images/smiles/120.gif

[chris_bcn]

If you need a new one I have one on XAML. If you could read it and then help me on my next project that would be great!! :D

[EC]

If you need a new one I have one on XAML. If you could read it and then help me on my next project that would be great!! :D

haha ok http://endeavorcreative.net/team/images/smiles/120.gif

[flutterby nut]

If you need a new one I have one on XAML. If you could read it and then help me on my next project that would be great!! :D

sure, no prob!...just don't ask me to understand it! :D