Digg

Discover the best of the web!
Learn more about Digg by taking the tour.

CSS tips and tricks!

blogherald.com — I ’ve been writing CSS for about 2 years now and I still feel like every time I open up a blank file and begin writing CSS for a new design I learn something new. For those of you that are new to CSS or experts always looking for a new trick, here are some of things I do on a regular basis to keep my code organized (kind of).

Bury

briangoins 1 year 250 days ago, made popular 1 year 249 days ago

2259 diggs
digg it

firefox15, on 10/12/2007, -0/+8Not just basic tips. Very good.
- nullmind, on 10/12/2007, -1/+15The site isn't responding for me, so I read a mirror (http://www.duggmirror.com/programming/CSS_tips_and_tricks/)
  
  I liked the tip about giving everything some attributes:
  
  * {
  margin: 0px;
  padding: 0px;
  }
- zeeneo, on 10/12/2007, -0/+11Setting everything to margin:0 and padding:0 is useful because you can get loads of weird problems with p tags in floating and aligned divs BUT it can be an annoyance because you have to set ul, p, etc.. tags back to their original margins.
  
  Also camel case your css, e.g. leftMenu - i find hypens and underscores ugly. Stop using so many divs - Yes, remember you can style an image tag, and other tags just like a div tag.
- MikeSD34, on 10/12/2007, -0/+5Zeeneo:
  
  Camel Caps is a developer style, of which there are many, some people prefer underscores, some camel caps, try to use what works best for you. That may mean trying both for a while, and seeing what you like best, rather than just going on what someone else said. A lot about learning to write code ( or CSS/HTML ) is trial and error, maybe not as much later in life when you've become adapted to it, but when you start it's good to get a taste of everything.
- apersaud, on 10/12/2007, -0/+1True, #2 I think is the most important one for me (indenting by grouping by tags).
  
  I wish applications such as Macromedia Dreamweaver would do this automatically so when you actually look at the code, you can find your CSS tags much easier (and structured better). I've seen a lot of nasty CSS..
- synthrabbit, on 10/12/2007, -0/+2I prefer using Tantek's undohtml.css over the YUI reset.css. http://tantek.com/log/2004/09.html#d06t2354
anewname, on 10/12/2007, -51/+3Once again... front page with 20~ diggs?
- nullmind, on 10/12/2007, -3/+23Nobody cares, quit giving us reports about the digg algorithm. If you like the article, digg it, if not... don't digg it?
- anewname, on 10/12/2007, -21/+3I've never mentioned it before. Honestly, I've never paid it much mind. But after weeks of hearing about these top 20 or so diggers - then to see yet another CSS tips page hit the front with a mere 20 diggs? It's just a bit discouraging.
  
  I'm prepared to get dugg down again. See ya.
- Chongo, on 10/12/2007, -1/+1I'm so sick of people complaining about this *****. I read the article about what would digg be like without the 'gamers' of the system. It would be the ***** same!
  
  besides, whoever is 'gaming' the system isn't too bad at picking stories and wasting my days away
igotdugout, on 10/12/2007, -3/+1Great site, nice and simple.
aristoworks, on 10/12/2007, -24/+6Nothing new. If this guy's been coding for 2 years and these are the best tricks in his toolbox :/
- tizz66, on 10/12/2007, -4/+17Do tell us your tips then :)
- carguy84, on 10/12/2007, -7/+4Ya, where's your article?
- Bdog2g2, on 10/12/2007, -1/+13A great CSS artist never devulges his tips.....
  
  *hint* he lets frontpage 2000 set his CSS
- LKBM, on 10/12/2007, -7/+1"Do tell us your tips then :)"
  
  I really don't think there's much to CSS to give tips about. These were decent tips, but nothing particularly new unless you're a semi-beginner. #1 actually seemed kind of dumb. I always figured you should be sizing text using pt or possibly em, not px. Okay, not always. When I first went from pure HTML to HTML+CSS, I was using px, but I quickly learned better.
  
  I did kind of like #2 and #3. I think that's the sort of thing you really can give tips about in CSS. Organising/formatting the code, not obscure features/hacks. The language is a bit simple for many of those.
  
  Though one that could go on the list would be negative margins. They're relatively non-obvious and often quite useful.
  
  A decent article, though, I though.
xXShadowstormXx, on 10/12/2007, -3/+2Wow, these are useful. Very handy tips. Simple, even. Dugg.
tizz66, on 10/12/2007, -2/+11It's kinda covered here, but not explicitly. I find indenting sub-definitions has really helped make my CSS more readable. Kinda like this:

.class1 {
...
}

.class1 .class2 {
....
}

.class1 .class3 {
...
}

.another_class {
...
}

(edit) Damnnit, digg doesn't preserve spacing... OK, well just imagine ".class1 .class2" and ".class1 .class3" are indented.
- Yibn, on 10/12/2007, -0/+6Basic scripting programming/scripting technique. But yes very nice and useful, most people over look it, but it allows for much easier clean up of old code
- tizz66, on 10/12/2007, -0/+7Yeah definitely a basic programming practice, but for some reason it's very rarely done with CSS. I guess people just don't think about it since CSS doesn't have logic and loops going on. Obviously the contents of the braces is usually indented, but not many people indent the whole sub-definition.
- tizz66, on 10/12/2007, -0/+1Well I prefer the closing bracket to be level with the start of the selector, but yeah, other than it's exactly what I meant :)
dotdan, on 10/12/2007, -0/+6They're good suggestions, but they're very hard to implement without a solid understanding of CSS.

For instance, * { } can get you into trouble if you properly experiment with it. If you do

* { font: 10pt Verdana; }, tags will not work, unless you define strong { font-weight: bold; } in your stylesheet.

However, if you do * { font-family: Verdana; font-size: 10pt; }, it will work fine.

I also disagree with organizing ids/classes by type. All of my stylesheets are alphabetical, so if you're reading through the HTML and see id="various-element", you don't have to guess what heading it's under. This also eliminates the needs for excess code (as seen in #2), since if you are wondering how the h2 under id="main" is styled, you can just scroll down to "m" and quickly find it.

One point that could use more explanation (not his fault--I'm still trying to decide the best way to handle it) is relative font-sizes. Personally, I've found that setting a base size, say, 10pt, then using percentages to make it larger or smaller works best. It also makes it a breeze when you want to change the font size of the site (you only need to change one size). I do remember reading quite a few different opinions, though, and I could very well be wrong.

[Note to anyone who replies: I didn't proofread this or anything, so feel free to reply, but you're wasting your time if you plan to nitpick through this.]
- akh1, on 10/12/2007, -0/+2Resting margin and padding with the star selector can also give you more problems than wanted. For instance it can mess up form elements in gecko-browsers.
  Anyway this use of the star selector is overkill and might slow down the browser as it has to apply that style to every single element.
  Faruk Ateş has a more in-depth article about this:
  http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
- Chongo, on 10/12/2007, -0/+3one way I like to organize my CSS is in the flow of the site... Almost identical to the HTML.
  
  for example:
  
  #body{}
  #container{}
  #header{}
  #header (subtag, etc)
  #content{}
  #content (subtag, etc)
  #footer
  
  and all the formatting of text, etc goes underneath the proper ID/CLASS.
- dotdan, on 10/12/2007, -0/+2Chongo, the problem with that is, whenever part of your HTML changes, you have to move or update your CSS. By listing it alphanumerically, you can modify your HTML without ever needing to touch the CSS.
EXreaction, on 10/12/2007, -8/+1Site is down...

Error establishing a database connection

:-(

Dugg Mirror works though...

Not bad! :-)
HMMaster, on 10/12/2007, -3/+4http://www.duggmirror.com/programming/CSS_tips_and_tricks/
samste, on 10/12/2007, -5/+3sites gone down.
blogmedia, on 10/12/2007, -2/+2I have the site backup, but I imagine we're going to have some issues keeping it up. Try the mirror if it fails..

Matt
- blogmedia, on 10/12/2007, -1/+2Moved to Wordpress Caching, I think we'll be able to keep the site up at this point..
  
  Matt
  BlogMedia, Inc.
tempusrob, on 10/12/2007, -0/+3FTFA: "There is a trick that was written about a while ago (maybe on ALA) that resets the font sizes for the entire site so that 1.0em is the same as 10px. body { font-size: 62.5% }"
-- This simply not true ... it's dependant on the default body text size being 16px, but that's changeable in your browser settings.

FTFA: "When I was looking at some of the CSS coded by Rundle I noticed that he separated his heading tags nicely."
-- Why not just use comments? /** H1 **/ Just as readable, and the client doesn't have to deal with parsing an empty style block.

FTFA: "* { margin: 0; padding: 0; }"
-- This I do like. Different browsers have different default margins/padding (like Opera's ULs vs. Firefox's ULs) and it can be occasionally frustrating to deal with.
- Chongo, on 10/12/2007, -0/+1Yours points are more subjective then objective except for the last one.
  
  Commenting either the way you mentioned, or what the article mentioned would be a pretty wise way to organize and find your code.
  
  the last one though I agree with... Although, it really is not fun to plug into an already designed site.
- capiCrimm, on 10/12/2007, -0/+1how is the first one not objective?
gaibangpai, on 10/12/2007, -10/+0test
jsusanka, on 10/12/2007, -11/+4Here is one trick - tell your clients to install firefox and remove internet explorer - that is the best advise you can give anybody.
- canon66, on 10/12/2007, -0/+1While we would all love to do that, when you're doing this stuff for a living, it's just not an option. This is, however, one of the reasons I really enjoyed my internship work. I was developing stuff that was intended only for internal use by one department and a few managers, the company IT guys had standardized everyone on Firefox. So I had exactly one browser that I needed to worry about. I made sure it was at least usable, if not pretty, in IE as well but they weren't concerned with that. Now, as a freelancer it'd be nice to have a project where I didn't have to worry about browser testing but if you want the money, you've gotta cater to the client and their clients.
simon360, on 10/12/2007, -2/+2Nice read, thanks!
Dotnetsky, on 10/12/2007, -6/+1nice article, although therre really isn't much in it. I'd like to see a lot more.
Oh, and you Firefart folks? Go take a long walk, will ya? I'm using IE 7 RC1 and I like it just fine. I use Firefox too, BTW.
SakuyasLove, on 10/12/2007, -4/+1www.coderwiki.com
inkswamp, on 10/12/2007, -0/+7Most of this advice seems like common sense to me, but this one irked me a bit...

> Stop using so many divs!

Why? Man, I hate this purist attitude toward the Web. If you want rules that are cast in stone, go into paper and ink publishing which has been around long enough for the rules to have solidified. If you can't handle a little anarchy in your life, stay away from Web coding. I know coding efficiency and standards are important but fercrissake, the Web isn't done evolving yet. It's been around for a while, but do we want it to freeze where it is or accept a little uncertainty in exchange for some progress?

And besides, a div is just an empty container. If you need it, use it. What's the problem?
- andrewthrice, on 10/12/2007, -0/+4Nice rant. He was mostly referring to using the div element for, say, a heading when heading elements, h1-h6, already exist. Use existing, semantic elements rather than rolling your own.
- DNABeast, on 10/12/2007, -0/+2The reason is that if you use the tags the way they were intended your code becomes more robust with new technologies. Audio readers have the option to read out tags slightly louder, Google knows what your article is titled. It just makes it easier for everyone to have a standard rather than having to figure out what means.
  
  Plus it's totally faster to type.
liberoj, on 10/12/2007, -4/+0LOL.. another site suffers a diggnial of service attack :)
Cidixat, on 10/12/2007, -0/+1pretty good read... i am fairly new to the CSS thing, so I'm exactly the target audience. I really liked the organizational tips in 2 and 3, I've been using ctrl-f entirely too much.
kasted, on 10/12/2007, -0/+1i like the not so many div's too.. headers and p tags is where its at..
7thCommander, on 10/12/2007, -0/+2The use of the star/asterisk was news to me, will make use of it for padding and margin in future.
xeal, on 10/12/2007, -3/+0More "Tips for organizing your CSS": http://www.c82.net/article.php?ID=26
SilverRocket, on 10/12/2007, -0/+1Sorry to be daft here, I actually code CSS all the time. I don't understand why using the * attribute is any more useful then setting those parameters (ie: padding: 0px; margin: 0px;) in a redefined definition?
SilverRocket, on 10/12/2007, -0/+1Sorry, that should say "... in a redefined BODY definition". That's where I usually set all my page-wide settings?
AdamSee, on 10/12/2007, -0/+0Because it saves coding space. If you collapse all the margins and paddings to 0 for all elements, you don't have to keep doing it elsewhere.
loxi, on 10/12/2007, -0/+0http://www.design-sites.net
pekea, on 10/11/2007, -0/+0Thanks for tips

Best regards
http://www.icestormcity.com/services/
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

CSS tips and tricks!

Login or register to add a comment