Post
5 Tips for Organizing Your CSS
Working with CSS on my own site’s redesign, freelance work, and my job made me start thinking about the best way to standardize and organize the way I write my CSS. So, I proposed the question to my 9rules friends to collect the best tips from the best designers.
1) This tip is perhaps the most useful because it can apply to both formats of CSS organization that I will describe later. I first saw this on Mike Rundle’s latest redesign of 9rules where he indents descendant and related rules.
For example:
#main_side { width: 392px; padding: 0; float: right; } #main_side #featured_articles { background: #fff; } #main_side #frontpageads { background: #fff; margin: 8px 0; }
This structure makes it easier to define page areas and how they relate to each other.
Also, the technique can be used when styling specific areas even if the base requires no rules. This can best be seen in the headlines:
h2 { } #snapshot_box h2 { padding: 0 0 6px 0; font: bold 14px/14px “Verdana”, sans-serif; } #main_side h2 { color: #444; font: bold 14px/14px “Verdana”, sans-serif; } .sidetagselection h2 { color: #fff; font: bold 14px/14px “Verdana”, sans-serif; }
2) The second tip is to use shorthand properties to keep all parts of a style type on a single line.
For example:
margin:5px 0 4px 10px;
Is much more efficient than:
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;
Combining properties onto a single line using shorthand properties means that your CSS will be easier to understand and edit.
#test {
margin-top: 2px;
margin-right: 3px;
margin-bottom: 5px;
margin-left: 9px;
font-weight:bold;
font-size:12px;
line-height:14px;
font-family:Arial, Verdana, sans-serif;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-position:0 15px;
}
That is almost impossible to edit, but using a few shorthand properties, the chunk above can be reduced to a much more manageable four lines.
#test {
margin: 2px 3px 5px 9px;
font: bold 12px/14px Arial, Verdana, sans-serif;
border: 1px solid #000;
background: #fff url(bg.gif) 0 15px no-repeat;
}
3) The third tip is to clearly divide your stylesheet into specific sections. Also, by using a flag, you can get to the area you are looking for faster. Before you divide up your styles, it is important to define an outline you are comfortable with as will as a separator format you can notice easily.
A sample format I try to stick to is this:
- Global Styles – (body, paragraphs, lists, etc)
- Header
- Page Structure
- Headings
- Text Styles
- Navigation
- Forms
- Comments
- Extras
And a sample separator that is most easily noticeable for me is:
/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
4) The fourth tip is difficult to get used to, but can be invaluable once perfected. It is important that you define the basic rules for each area only once so that the same default value is not being rewritten in every rule. If you know that all of the h2’s will not have a margin or padding, define that on the top level and let its effect cascade as it is supposed to. This helps a great deal if the design requires frequent color changes or other non-structural modifications.
5) The fifth tip is more of a comparison between to major options of organizing your CSS, each with it’s own merits and flaws.
On one hand, you can throw your CSS into a compressor to get a very polished and clean view of your entire CSS structure – each rule on a single line. The advantage of this method is that you can get an easy view of your entire stylesheet without much scrolling. The disadvantage is that it is difficult to edit because many rules will require you to scroll horizontally.
Using the more prevalent tabbing method for organization simply reverses the advantages and disadvantages.
The easiest method is to combine all of the tips above to move the base styles for all elements into a separate section of the stylesheet or a separate stylesheet altogether. This leaves less rule-setting for the more specific elements and allows you to have a shorter stylesheet for your main design.
Archive
-
260.
The Ethics of Practicing Procedures on the Nearly Dead
The report from the field was not promising by any stretch, extensive trauma, and perhaps most importantly unknown “downtime” (referencing the period where the patient received no basic care like...
-
260.
The Ethics of Teaching Hospitals
I can’t imagine what the patient was thinking. Seeing my trembling hands approaching the lacerations on his face with a sharp needle. I tried to reassure him that I knew what I was doing, but the...
-
260.
Conscious Conversation: Behavioral Science
Dr. Eran Zaidel is a professor of Behavioral Neuroscience and faculty member at the Brain Research Institute at UCLA. His work focuses on hemispheric specialization and interhemispheric interaction...
-
260.
Progress Report
Two years down, I’m still going. The next two years are my clinical rotations, the actual hands-on training. It’s a scary prospect, responsibilities and such; but it’s equally exciting, after...
-
260.
Why Medical School Should Be Free
There’s a lot of really great doctors out there, but unfortunately, there’s also some bad ones. That’s a problem we don’t need to have, and I think it’s caused by some problems with the...
-
260.
The Cerebellum: a model for learning in the brain
I know, it’s been a while. Busy is no excuse though, as it is becoming clear that writing for erraticwisdom was an important part of exercising certain parts of my brain that I have neglected...
-
260.
Conscious Conversation: Philosophy
Daniel Black, author of Erectlocution, was kind enough to chat with me one day and we had a great discussion – have a listen.
-
260.
The Stuff in Between
I’m actually almost normal when not agonizing over robot production details, and quite a bit has happened since I last wrote an update. First, I’ve finally graduated. I had a bit of a...
Comments
Matthew Ulm
Jan 18, 05:38 PM #
That having been said, I have to say that, at least for me personally, I find CSS written using all the shorthand to actually be harder to read. I think condensing your CSS to shorthand s a good idea for bandwidth reasons, but I actually prefer to work with and edit the longer versions. I usually wait until I’m basically done to condense things to shorthand.
I might be alone on this, but that’s my feeling. :)
Jeff Croft
Jan 18, 05:42 PM #
Nathan Smith
Jan 18, 05:52 PM #
Jeff: I agree with you that a prototype version differs greatly from the finished version. I usually begin with the basic CSS within the HTML page itself to set up the markup and CSS together, then move it to an external stylesheet.
Usually I keep my font styles expanded and only use shorthand for backgrounds, margins and paddings because it’s easier for me.
Nathan: Yup, I do the same.
Thame
Jan 18, 06:13 PM #
Interesting how your required fields fill themselves too – I assume that’s a bug?
Band of the Soulstripper
Jan 18, 10:27 PM #
Regarding shorthand, I’m a bit of a mixed bag. I always put all of my margin and padding dimensions on one line, but I usually define font styles with separate lines for family, size, and line height. One thing that I found recently (and was rather annoying until I figured it out) was that there are situations where if a background-color isn’t defined in shorthand with the background-image, it won’t render. I don’t know exactly what caused it as I didn’t test it after getting it working, but I believe it was a floated div with a background image positioned with coordinates (no repeat, so the color was supposed to fill in behind it).
Justin
Jan 18, 10:48 PM #
I like the indentation for child styles, dunno why I never did it, but now I’m going to.
Truth be told, there is no right or wrong way to format your code. As long as I can read it, it’s good enough for me. At some point, you have to realize that the majority of the people looking at your code are other coders, you can leave some of the thought to them. They’re smart too! ;)
Andrew
Jan 18, 11:00 PM #
Paul Stamatiou
Jan 18, 11:08 PM #
The first rule I always apply is;
* { margin:0; padding:0; border:0; }
Then I add borders, margins and padding when I need and not keep writing margin:0 over and over.
Chris R
Jan 19, 12:46 AM #
Vesa Virlander
Jan 19, 12:58 AM #
Bramus!
Jan 19, 01:12 AM #
Anonymous Coward
Jan 19, 01:18 AM #
markku
Jan 19, 01:32 AM #
I did try to split my CSS into positioning and typography sections – and my advice is don’t! It’s too easy to get lost when there are multiple instances of classes!
Alex
Jan 19, 01:33 AM #
And there are some idiots here writing a “I know that , duh” comments. Please….
swape
Jan 19, 01:39 AM #
One thing I’ve tried on a few occasions is to seperate styling from positioning. So that one stylesheet takes care of styling while another takes care of positioning. It’s overhead in that classes gets defined twice but it makes it easier to know where to look for things and you can delegate issues easier. “You take care of the positioning issues and you correct the styling issues”
Carsten Rose Lundberg
Jan 19, 01:39 AM #
It has to go straight after otherwise it may get missed when debugging or altering at a later date. This combines the best of both worlds.
Richard Kendall
Jan 19, 01:44 AM #
Here
I do use all the above, but also separate my CSS into four/five stylesheets (initial / layout / typography / navigation/ Content Styles and then for forms and tables as well (when needed).
Check out content with style for tips on this
BTW, any chance you can increase the text size in this form, and/or increase it’s size? It’s a little on the small size for writing comments. Cheers!
Andy Beeching
Jan 19, 01:52 AM #
Sorry, my brain is full. I’ll take explicit coding practices over implicit any day.
Point #2 is not so happy.
Dave
Jan 19, 02:39 AM #
Dan Bailey
Jan 19, 02:43 AM #
Frequently I parse user’s stylesheets (on my sites) to make interactive changes.
Let compare strings
1) border: 1px solid #808080;
2) border-width: 1px;
border-style: solid;
border-color: #808080;
In second case strings parsed more fast then in the first case.
I think, this article usefull, but in specific chance we can use these suggestions.
Sergey Koksharov
Jan 19, 03:07 AM #
Marko Mihelcic
Jan 19, 03:14 AM #
Brian Heumann
Jan 19, 03:40 AM #
margin: 0; /* no margins at all */
margin-left: 2em;
margin-right: 2em;
...as I forget the order in which the margins are applied in the one-line case (I could just remember “clockwise”, but I don’t). Same applies for background positioning:
background: url(...) no-repeat 45px 72px;
I almost always have to figure out which pixel value is x and which is y by trial and error.
Jon Dowland
Jan 19, 04:03 AM #
h3 {
position:relative; left:-.6em;
width:100%; height:1%;
margin-bottom:.3em; padding:.2em 0 .3em 1em;
text-transform:capitalize; font-size:120%;
}
like:
classification
dimension
whitespace
other
text
background
border
sparsely
Jan 19, 05:23 AM #
michiel
Jan 19, 05:32 AM #
Easier to maintain? Yes. Easier to understand? No.
Veracon
Jan 19, 06:37 AM #
Lee
Jan 19, 06:46 AM #
james McClelland
Jan 19, 07:44 AM #
Not at all. I find single line attributes much easier to undestand and maintain (does left come before right, does top come before bottom?) I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them. If you are going to maintain stylesheets in group setting – being verbose tends to introduce fewer errors and can be easier to track errors down. Of course there are exceptions to every rule…..
ChronoFish
Jan 19, 08:08 AM #
Loomy
Jan 19, 08:19 AM #
1) Break your CSS up into different style sheets. For example, one for layout, one for text, one for forms, one for tables, etc.
2) Organize your properties alphabetically within each rule. This makes your code easier to read and debug as you always know where to look for a property.
I wrote about this in a little more detail on my blog – Suggestions for Organizing Complex CSS.
Christian Watson
Jan 19, 08:38 AM #
James Mitchell
Jan 19, 09:11 AM #
I agree with some of the comments made about coding with standard version and compressing the finished version before deployment.
nuffGigs
Jan 19, 09:56 AM #
Jay Ramos
Jan 19, 10:18 AM #
Trams Studio
Jan 19, 11:55 AM #
Rob
Jan 19, 12:06 PM #
Dennis Bullock
Jan 19, 12:32 PM #
Stop Design had an article on the organization aspect last year.
The rest is just common sense for anyone that knows CSS at all.
Good tips for newbs.
Brad
Jan 19, 01:23 PM #
Feaverish
Jan 19, 01:25 PM #
miscblogger
Jan 19, 03:34 PM #
Ian Williamson
Jan 19, 03:40 PM #
Tip #1 is the only semi-creative tip and I’ve seen it suggested in other, similar articles. Like the community bicycle, it’s been around.
Tip #2 technically doesn’t make your CSS more organized. It just makes it shorter and, hopefully, more readable. Plus, it’s a basic feature of CSS. Who doesn’t know about short-hand properties?
If you told a room full of people to organize a group of objects in any way that they desire, I bet that 99% of them would put them into categories. So, if 99% of people, who know nothing of CSS, could come up with the idea of categorization, it’s probably safe to assume that no one needs to include it in a list of ways to organize CSS.
Tip #4 is a basic tenant of CSS design. If you’ve read anything about CSS, you should know about this.
A better solution to tip #5 would be to use a CSS editor that can collapse your styles into a single line and expand them when you want to edit. Why run it through a “compressor?”
Cully
Jan 19, 06:22 PM #
Some time ago I tried to put together some ideas, suggesting more predictable CSS. There I tend to be on the opposite opinion on the use of shorthands, but it really is a qustion of preference.
To me, the most important thing is consistency. I think whatever organization policy a team chooses, everyone should just stick to it. This way when the moment comes to change something, you know where to find it.
Again, very good article, I particlulary liked tip #1. Thanks for sharing!
Stoyan
Jan 20, 06:19 AM #
I personally have problems with OpenSource backend software like Gallery, that contain CSS defined layouts and the programmer has written his sheet, repeating the same rule over and over for different attributes. It takes me about 5 hours just to get it all together again.
Thanks for spreading the knowledge.
John Bilotta Jr
Jan 20, 10:36 AM #
Thame
Jan 20, 08:34 PM #
Can I translate this in german and use it on my site?
I would like to show this my classmates.
Sven
Jan 21, 03:49 AM #
One extra tip might be to use classes more. You can apply multiple classes to say a div. So if you define
.right {float:right;}
and
.italic {font-style:italic;}
then just using
< div class = " right italic " > (spaces added to show here)
gives you a right floating div where the text is in italic. The advantage is that you combine whichever of these basic classes you want. I’ve found this also helps me to keep my div structure clearer.
Barry Welford
Jan 21, 09:54 AM #
Refik
Jan 21, 03:34 PM #
Barry: Yes, multiple classes can be very helpful and I’ve seen a technique at my job that uses this. When replacing text with images using the text-indent method, it can be helpful to create a “replaced” class that includes only the text-indent and a different class for the background image. This way, it is easier to see which headline is actually being replaced and which is simply being styled otherwise.
Thame
Jan 21, 08:50 PM #
Cheyne
Jan 22, 03:28 AM #
Nina
Jan 22, 06:31 PM #
Thame
Jan 23, 08:02 PM #
too much indenting will definetely increase the file size. not a very good idea.
Rizky
Jan 23, 11:59 PM #
Bottom line is that one should use whatever they have a comfort with and works for them. By having ANY system in place, modification becomes much easier.
Good article.
George L Smyth
Jan 24, 01:45 PM #
Sorry, I don’t agree. Having each element defined spells it out, therefore easier to understand. Also what happens if I write this:
border :1px solid #000066;
then want to make the bottom margin black? I think that if you want more flexibility then write it out in full, it’s good practice and also makes it easier to understand for people learning the art.
Mark C
Jan 26, 07:21 AM #
Ivan Minic
Jan 28, 07:26 AM #
Vincent J. Murphy
Feb 17, 08:56 AM #
Vincent J. Murphy
Feb 17, 08:58 AM #
Also, I had a visitor contact me because they could not see the text because of their high-contrast scheme and my forced background color.
Can you tell me what part is hard to read for you and what you’re running so that I can fix it?
Thame
Feb 17, 10:49 AM #
http://www.developer.com/java/other/article.php/600581
etc
sandijs aploks
Apr 6, 02:26 AM #
Marius Akerbæk
Jun 2, 04:52 PM #
Hopefully I’ll be posting some more CSS/design related stuff soon so stay tuned.
Thame
Jun 3, 08:19 PM #
david foster
Jul 26, 02:10 AM #
Dassnagar Infosystems
Jul 27, 01:49 PM #
Dassnagar: Really? I find that most of my CSS problems come with IE. Firefox is almost always fine.
Thame
Jul 29, 04:27 PM #
Website Design India
Jul 31, 05:40 AM #
I was lookin for some quality information….and this website is an ultimate source for designers needs
.........
Web design| web site design company | SEO services in India
Aug 5, 12:21 AM #
Praca
Aug 12, 05:33 AM #
Thame
Aug 12, 11:52 AM #
peter
Sep 7, 04:21 PM #
I am getting nailed with Spam in my guestbook for our catalog website. Is there anyway to stop this?
If not, there really isn’t any point in leaving it up and active. Any help will be greatly
appreciated.
Thanks
katalog
Sep 27, 04:05 AM #
Thanks!
Volker
Oct 5, 03:24 PM #
regards, Jonas
Webkatalog
Oct 26, 06:25 AM #
Andy
Nov 15, 03:36 PM #
Thank you!
Robert
Nov 20, 02:48 PM #
greets thomas
Heizung Energie solar
Nov 26, 05:43 AM #
thank you for sharing with us.
John
Nov 29, 05:00 AM #
BUses
Dec 4, 05:51 PM #
Logodesign
Dec 4, 08:20 PM #
Skateboard
Dec 5, 06:52 PM #
Mark
Dec 9, 07:33 PM #
Onlineshops
Dec 10, 06:47 AM #
kemi
Dec 12, 01:54 PM #
Kevin
Kevin
Dec 14, 12:21 AM #
ranking
Dec 15, 10:17 AM #
BUses
Dec 15, 04:58 PM #
Supreme concept of a personalized web portal.
I look forward to using this as my browsers’ start page.
Keep up the good work!
Onlineshops
Dec 15, 06:31 PM #
Thanks!
Motorrad
Dec 19, 05:47 PM #
TXL!
Julie
Dec 20, 05:42 AM #
Ersatzbezug, Sitzbezug
Dec 21, 04:18 PM #
Onlineshops
Dec 22, 10:15 AM #
Gartenfackel
Dec 22, 10:29 PM #
Księgowy
Dec 24, 07:17 AM #
Zoffix Znet
Dec 26, 12:24 AM #
Dan
Dec 26, 05:42 AM #
thank you very much for sharing this.
Andreas
Dec 27, 04:48 AM #
Jessi
Jan 1, 07:15 AM #
Brautmode
Jan 1, 02:56 PM #
great tipps thank you for sharing it. please more of it!
Brigitte
Jan 2, 05:14 AM #
Angel
Jan 2, 04:08 PM #
John
Jan 2, 05:23 PM #
Alice Buses
Jan 4, 06:43 PM #
Is much more efficient than:
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;
i be used to the back usage,
try it .margin:5px 0 4px 10px;
程控交换机
Jan 10, 01:09 AM #
It´s very interesting
Rezepte
Jan 18, 02:54 PM #
k if we`r at shorten CSS-Code than lets use
border: 1px solid #000000;
instead of:
border-width: 1px;
border-style: solid;
border-color: #000000;
but … its great, well done!
Michael
Jan 20, 11:09 AM #
Very good tips!
Stern Wintergarten
Jan 22, 07:42 AM #
Fantastic article covering some points I really needed some good usability info for.
Best regards from Poland
Tanie linie lotnicze
Jan 25, 04:58 AM #
Wow thats amazing the CSS-thing.
i think i will make my next projects just with html and css.
thank u very much for sharing your tips
handy billig kaufen
Jan 26, 07:16 AM #
Its all right
Tworzenie Stron
Jan 28, 12:58 PM #
nice article, thank you!
Webkatalog
Jan 28, 03:26 PM #
Enjoyed browsing through the site. Keep up the good work. Greetings nad thanks from Poland
Meble
Feb 2, 12:54 AM #
Great and excellent article t’s realy helpful. Thanks again. I will visit it again
Luxus Haengematten
Feb 2, 10:50 PM #
yes its my opinion too, really excellent articles here. keep on the good work.
newsartikel
Feb 4, 07:38 AM #
Very great article!
Japan Tuning Spoiler
Feb 6, 09:43 AM #
Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings
Aukcje
Feb 7, 08:57 AM #
Very interesting article
Kosmetik
Feb 13, 01:07 PM #
i`m impressed, u defenitly know what u write about. good work.
Kredit Darlehen
Feb 21, 02:04 AM #
very great site!
Suchmaschinenoptimierung
Feb 21, 09:09 AM #
I really like this website.
Verzeichnis
Feb 22, 04:58 AM #
Nice blog, visit my site
Luxus
Feb 22, 01:29 PM #
great written, i like your style. many many usefull informations about css and thats what we really must have. thank you!
Nachrichten
Feb 23, 02:25 AM #
yeah! great article, just bookmarked under a delicious css-tag
Vorwahlen
Mar 2, 06:50 AM #
Great and interesting website!
dvd kochschule
Mar 10, 07:35 AM #
perfect page and stuff. i like it really.
LR
Mar 10, 09:45 AM #
really good intentions and informations that helped me out, thank u 4 that!
Dan de Mon
Mar 11, 04:24 AM #
Fantastic article covering some points I really needed some good usability info for.
bannery reklamowe flash
Mar 11, 03:10 PM #
Nice work. Please keep them coming.
Pink
Mar 31, 02:01 PM #
I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them.
Sztuka
Apr 15, 11:02 AM #
Absolutely great information – thanks for posting!
Schmuck
Apr 19, 02:46 PM #
thanks good job
ogrod
May 3, 01:46 PM #
Great and excellent article t’s realy helpful. Thanks again.
Regenbekleidung
May 3, 04:32 PM #
Nice find! It’s amazing that I didn’t stumble on this little post until over a year later, though. How on earth did this escape me? Anyhow, keep ‘em comin’! :)
Biurka
May 4, 09:11 AM #
Very Cool. I’ve listened to the radio show before but wasn’t aware of the history. Deborah sounds like a cool chick
Katalog
May 5, 01:33 AM #
great .. Nice tips and informative.. Thanks
software engineering
May 5, 01:57 AM #
Since I use strictly css style, my rankings are pretty good… thanks for the tip!
Afro Clubs
May 7, 02:07 PM #
Thanks ;)
i find link for this blog in smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding ;)
Redirect
May 10, 08:10 AM #
Theme very interesting.
Bielizna
May 10, 09:17 AM #
Wery good idea.
Thanks!
Best regards.
George
George
May 10, 12:11 PM #
Good article – thanks for all the hard facts and putting all together! M7
ChrisM7
May 10, 12:36 PM #
i dont understand:
“
margin:5px 0 4px 10px;
Is much more efficient than:
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;” whats difrents?
its this same, mayby short nothing else?
proxy
May 18, 07:27 AM #
Optimise or organise? perhaps the best of both worlds..Your website is a great learning tool and certainly an excellent reference to have on hand thank’s.
Skrypty CSS
May 20, 04:06 PM #
Great and excellent article t’s realy helpful. Thanks again.
Wow. Very impressive.
Tapeten
May 21, 04:13 PM #
Very good tips, but hard to understand. Good luck
Wnętrz
May 22, 02:14 PM #
1000 thx for this helpful post
Freiberufler
May 27, 02:32 PM #
Thanks for the Tip, your website is a very good learning tool.
Piercing
May 29, 06:47 AM #
Very great and excellent article. It’s realy helpful. Thanks again.
Wettforum Wettpoint Sport Wetten
May 29, 08:53 AM #
Theme very interesting.
Ryan Willimasson
May 29, 10:37 AM #
Enjoyed browsing through the site. Keep up the good work. Thanks and Greetings
Das Telefonsex Portal
May 31, 12:41 PM #
I love it! Nice tips.
thx
Blumen
Jun 1, 02:47 PM #
Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.
Partnersuche
Jun 5, 07:36 PM #
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings
Euro 2012
Jun 6, 06:02 AM #
Nice article!
It’s a shame I only ran into it today.
Dugg it…
Johan
Jun 28, 11:31 AM #
I suppose if you live in CSS land then short-cuts are fine. Or if you are Perl lover then you can’t get enough of them. Thanks for article
Maid
Jul 15, 03:00 PM #
Why would you write an article about CSS if you don’t know about it? #1 – H2 default is bold so it’s pointless to put it in your declaration, #2 – the idea behin CSS is to minimize redundancy… not to repeat an identical font declaration for each H2 #3 – the name of your id/class should represent what it is and not where it is located in the design like: “main_side.” And if you want to be nit picky, font should not be declared with px since it won’t resize in IE… A better code with identical result would be:
h2 { font: .7em/1.5em verdana, sans-serif; }
#snapshot_box h2 { padding-bottom: 6px; }
#main_side h2 { color: #444; }
.sidetagselection h2 { color: #fff; }
As a side note, I think indenting CSS the way it’s done in that example is a bad suggestion since the H2 in the HTML will be inside the element with id=“snapshot_box” so in HTML you have this hierarchy
-snapshot_box
——H2
and in CSS you have the oposite
-H2
——snapshot_box
Yann
Aug 2, 08:43 PM #
hey! your article is great. thanks
kalendarze
Sep 11, 12:02 AM #
Nice article!
Dugg it…
旅遊包車
Sep 11, 01:15 AM #
Thanks for this article. I like your posts
meble biurowe
Sep 11, 02:57 AM #
But how do you indent the children of a selector that shares a rule with another selector?
For instance:
#nav, #sidebar{font-family:arial, “lucida console”, sans-serif; color:#777;}
I suppose you could put both the #nav and the #sidebar children indented underneath it…in alphabetical order.
Jeremy
Sep 13, 08:14 AM #
Thanks for the good article (and the follow-ups)! This gave many good ideas for better structuring CSS.
Ville
Sep 24, 08:05 PM #
I also have a list of the CSS standards always use. Complicated but it is cross-browser descriptions. And some CMS don´t accept any description as background images such as “background-position: 0 2 0 5”, as an example.
Daniel
Feb 17, 08:34 AM #
Very interesting article.
LR
Mar 15, 01:00 PM #
Thanks for this very good article. I use this to my home work to school. Can I translate this with all comments and insert on my site? Thanks
Opony
Mar 18, 05:09 AM #
Great article. In fact, I liked it so much that it inspired me to change my dreamweaver 8 configuration. I added it to the starter css files located here: C:\Program Files\Macromedia\Dreamweaver 8\Configuration\BuiltIn\css This starter css file will actually be useful! Thanks for the inspiration.
jhewitt
Mar 28, 07:43 AM #
Very interesing article. Thanks for the article! As a full time developer, this information is exceedingly useful to me.
As a full time developer, this information is exceedingly useful to me.
Przepisy kulinarne
Jun 6, 10:22 AM #
I agree with all points but on a side note be careful with short hand for fonts.
font: bolder 75%/1.2 arial, sans-serif;
can render differently in some browsers.
Otherwise I use shorthand.
cooper.semantics
Aug 18, 06:13 PM #
It´s a pity, I try to learn how to handel CSS, it seems to be easy. But I still my problems with that coding language…
Colostrum
Sep 8, 12:30 AM #
Thanks man,
I’ve been putting websites together for almost ten years now and knew about SOME shorthand. But that you can cut background IMAGE definition short into a one-liner was completely new to me.
Wait, let me bookmark this…
Thanks
tommy
Feb 24, 09:52 PM #
Found this tool on reddit that tabifies the selectors for you automatically – styleneat.com. Works nice, but it reshuffles all my selectors which isn’t too good idea, but it still doesn’t break anything though. I’ve emailed them, hope they improve it soon.
Prakash Mehra
Mar 22, 11:50 PM #
I agree and use all the tips here.
I would like to add that another important thing regrading css stylesheets is to use the most meaningful elements to describe your content and use semantic class and ID attribute values in order to create the strongest DOM possible and to help with maintenance and redesigns.web design mures
Apr 11, 10:30 AM #
Nice Article over css styles. I will think about it in my next design works. I´also like the yaml framework on css.
Best Greetings
LR Colostrum
May 7, 05:55 AM #
I organize my CSS similarly but there are always a few exceptions that can’t be groupsed. :) Anyway, that’s a great post! Thank you!
Paul
Oct 8, 06:33 AM #
I organize my CSS similarly but there are always a few exceptions that can’t be groupsed. :) Anyway, that’s a great post! Thank you!
Medyum
May 24, 02:31 AM #
You have spelling errors;
“as will as a separator format you can notice easily.”
should be “as well as…”
Isaiah Scruggs
Mar 24, 04:28 PM #
I find organizing my code in that way repetitive and difficult to navigate. For example, having a section for text styles usually means that you will be repeating an element at least twice in the document, once for structure and again for text styles. I prefer to break my sections out according to the structure of my site – with all general/common elements defined at the top (header, type, footer, layout), then sections like Homepage, Blog, Single Post, etc. with each of those sections containing only elements that are exclusive to those site areas. This means that I’ll generally only have an element defined once in the document, and I won’t have to scroll elsewhere to find other rules associated with it.
John Natoli
Nov 14, 11:47 AM #
Thanks Thame for this helpful stuff, I will use it for optimizing my web project (Blumenversand).
Actually your entire blog is quite cool – some posts are far to complex but I like your way of writing.
Keep on writing ;-)
Daniel
Aug 30, 03:47 PM #
I needed to thank you for this wonderful read!! I certainly loved every bit of it. I have you bookmarked to check out new stuff you post.
Amandeep
Feb 14, 01:41 AM #
Add a Comment
Phrase modifiers:
_emphasis_
*strong*
__italic__
**bold**
??citation??
-
deleted text-@code@Block modifiers:
bq. Blockquote
p. Paragraph
Links:
"linktext":http://example.com