Forum Moderators: not2easy
Order of Properties
selector { /* determine how the box will get drawn and positioned */
display:
float:
position:
/* now follow the box model */
margin:
border:
padding:
width:
height:
color:
background:
/* followed by alignment, font, text, etc properties */
}
By putting the display and position properties first, I can tell instantly if the selected elements are going to be moved out of their normal positions in the document flow.
By listing the margin, border, padding, then width and/or height in that order, I can quickly guestimate the computed width and height of the element. width and height come last because they apply to the content box, which is inside the padding edge.
The color and background properties come next, because they apply inside the border of the element.
The alignment, font, and text bring up the rear, in no particular order, because they apply to how the text behaves inside the content box.
Grouping of Selectors
I like to group my selectors into individual stylesheets that I <link> or @import into the document. (Remember that @import must go above any style rules). If I have a set of rules that apply to only one chunk of the document (say two different types of navigation), then I break that off into its own stylesheet. Even though this may cost an extra TCP round-trip to the server, it'll be cached from then on, and it keeps away the headaches of hunting through a giant file for the rule I want.
Order of Selectors
Where I don't have to worry about the order of selectors, I try to arrange them along with how you would encounter them while reading through the document source. Again, this is just to help me out when trying to find the rule I need burried in a long style sheet.
This is just the way I like to do things. Remember that the key to keeping maintainable code is to have a system that is simple enough for you to remember, but uncluttered enough to be clear and easy to read.
The closest I get to organizing stylesheets is grouping by function like
Will be interesting to hear how/what othes do...
Nick
The trouble with that approach is that you can end up with bloated stylesheets.
A different method is to group together common attributes. This can be a little more difficult to manage, but it usually leads to smaller file sizes.
e.g.
drbrain might write..
#header {
position: absolute;
top: 5px;
left: 0;
border: 1px solid #000;
color: #005;
background: #ddf;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #000;
color: #000;
background: #ddf;
}
..but grouping together common attributes it would be..
#header, #footer {
position: absolute;
left: 0;
border: 1px solid #000;
color: #005;
background: #ddf;
}
#header {
top: 5px;
}
#footer {
bottom: 0;
color: #000;
}
The stylings are identical but the second stylesheet is 175 bytes long compared to 226 bytes for the first one - a saving of about 23%.
Note: I'm not saying that this is always the best way to go as it can be difficult to maintain. Both methods have their merits.
p,body,td,h1,h2,h3,h5,
h6,input,select,textarea{font:12px arial,verdana,sans-serif;color:#000}
<quick pause...>
.mh,.h,.hc,.hr{background:#afb6d1}
.ml a:hover{color:#000}
.url li{margin:0px;list-style-image:url(images/arrow.gif)}
That's straight off our server
DaveN
[edited by: Nick_W at 12:30 pm (utc) on May 20, 2003]
[edit reason] yep, that WAS bad! ;-) [/edit]
Elements and styles first.
Body
Headers
Link Styles
Paragraphs
List item styles
[other element styles, if any, are listed alphabetical]
===
Contextual items, if used, alphabetically here.
Class Items, alphabetically
===
ID Items, alphabetically
===
For the style...
color, background-color
background image if any, is next.
font properties [listed separately or not in shorthand notation: family, weight, size ... ]
Text alignment, if used.
Letter spacing, if used.
border [if any, I do list this shorthand style]
padding, margin
width of block items, if used.
===
I have been thinking of making my own template for styles, or code snippets for my editor. [never get around to this]
I do write my sheets in the same way, and it would save time to have the skeleton of commonly used items ready, remove what I am not using, and fill in the blanks on others. Poke new or other items in between.
holly
Just realised I've got too reliant on software. Standard naming conventions and errr good ole Bradbury Topstyle, job done woops :)
Rich
Okay, just to offer an alternative veiw:The trouble with that approach is that you can end up with bloated stylesheets.
A different method is to group together common attributes. This can be a little more difficult to manage, but it usually leads to smaller file sizes.
Doh! forgot completely about this. Where appropriate, I do group rules to cut down on the size. Must be because I'm trying to clean up one of the messiest style sheets I've ever seen. It started out at 16K, I've gotten it down to 12K, hopefully I can get it cut down a bunch more.
When your all done and your going to upload, do you take out all of the whitespace and line breaks?
I ask as I was wondering just today if css can be 'squished' just as well as html
Generally the order of elements in my style sheet(s) follows the same order as how they would be used in the html.
The first part of my style sheet usually ends up being the main "template" which is just positioning rules. After that everything follows in the same way as the html... so Header section, Main content, Left Navigation, Footer. I also prefix all my classes and id's with the section that they belong to, so for example every class or id in the header section starts with an 'H'(.Htitle). This makes it much easier to tell where an id or class belongs when you havent looked at your style sheet for a few months :).
Ive also started to keep all my color information in a completely seperate style sheet. This takes away a lot of clutter in the main css file, and it makes changing color schemes much easier.
Anyway thats my general method, but I think im going to start trying to have a set order for my properties.
I do mine alphabetically. Yup, I find it much easier to list everything alphabetically as I know exactly where to go in the style sheet.
Normally I have all of my div classes at the very top. Those classes are what control the positioning of my graphic elements. And then I start the alpha ordering.
I wonder, is there any documentation that shows how to properly classify a stylesheet? Or, is it user preference? Also, does the order of the elements in the style sheet have any effect on rendering?
When your all done and your going to upload, do you take out all of the whitespace and line breaks?
Always! I can't stand all the vertical scrolling, I'm more comfortable with the horizontal scrolling when it comes to managing my style sheets.
Always! I can't stand all the vertical scrolling, I'm more comfortable with the horizontal scrolling when it comes to managing my style sheets.
I know that I should probably just try it, but I mean turning this:
#left {
z-index: 2;
left: 25px;
width: 170px;
position: absolute;
top: 0px;
color: white;
height: 100%;
font-size: 90%;
/*background-color: #360;*/
}#left h1 {
margin-top: 24px;
padding: 5px;
}#left ul {
list-style: none;
border: none;
margin: 7px 0 0 6px;
padding: 0 0 0 0;
}
#left ul ul {
width: 176px;
margin-top: 0px;
margin-left: 3px;
}
Into this:
#left{z-index:2;left:25px;width:170px; position:absolute;top:0px;color:white;height:100%;font-size:90%;/*background-color:#360;*/}#left h1{margin-top:24px;padding:5px;}#left ul{list-style:none;border:none;margin:7px 0 0 6px;padding: 0 0 0 0;}#left ul ul{width:176px;margin-top:0px;margin-left:3px;}
People do this with css? I do it with my html and js, but never tried with css, having only recently gotten so fanatical about size-optimizing.
People do this with css? I do it with my html and js, but never tried with css, having only recently gotten so fanatical about size-optimizing.
It makes sense - and its not too bad when you have an editor which highlights the individual elements for you. I can veryfi that it hurts like hell when you have to come back to one of these after a year...
Other than that - I've been brought up to keep the "layout" stylesheet seperate from the "style" stylesheet.
<link rel="stylesheet" href="layout_general.css" type="text/css">
<link rel="stylesheet" href="style_general.css" type="text/css">
So it ends up with two links in the top of the doc. In the actual css documents everything's just thrown together (quite badly!) and people end up getting angry because I removed all the whitespace...
It makes sense - and its not too bad when you have an editor which highlights the individual elements for you. I can veryfi that it hurts like hell when you have to come back to one of these after a year...
Easy fix for this is have two folders, one with optimized files which is done just before upload, another with the nice easy readin' stuff.
I refuse to remove whitespace because it defies logic. Condensing a language to make it explicitly difficult to read goes against the whole point of it.
The point here isn't
to make it explicitly difficult to read
#left ul {
list-style: none;
border: none;
margin: 7px 0 0 6px;
padding: 0 0 0 0;
}
...and do this...
#left ul{
list-style:none;border:none;margin:7px 0 0 6px;padding:0 0 0 0;}
Note that I've stripped all spaces between attributes but I still keep order to the rules. I am now putting the rule on one line and then the declarations on the line right below the rule.
Your only ever going to save a couple of hundred bytes doing this. And it makes no real difference to the actual download speed experienced by the user (especially after you take into account the modem compression).
If you are that worried about it then you'd be a lot better off using mod_gzip [schroepl.net] instead.
As far as organization, does it matter? The stylesheet is one of the first things to load and if it's small the organization shouldn't matter too much.
As for white space I strip out EVERYTHING except line breaks. My stylesheets can be hard to read but it's worth saving that extra second in my opinion. As for my HTML it's formatted nicely so it's easy to read and edit. I also use PHP's GZIP on EVERY page. One line of code and you're saving bandwidth left and right.
The stylesheet is one of the first things to load and if it's small the organization shouldn't matter too much.
A picky but important point: The stylesheet is loaded after all of your HTML is read, so if there are images etc. in your html, that stuff is heading down the pipe before your css.
You may see a page render before it's background image shows up: it's in their external css stylesheet, in fact one of the last things to load.
Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.
I stand corrected to what I posted above...
