Unnecessary CSS Bloat
Because everyone steals their CSS from everyone else there are a whole lotta sites out there that have very similar stylesheets (which makes me wonder why there aren’t more allegations of theft out there, but that’s for another topic) and most of the same problems.
1. You do not need to repeat styles throughout the stylesheet. Once will usually suffice. body {font:11px tahoma} p {font:11px tahoma} is wrong, wrong, wrong. You can specify the fonts in the body and not have to specify it, if it’s the same, in DIV’s, tables and yes, even DIV Tables!
Of course, this isn’t too big of a problem when it’s just a few lines. However, when someone continually specifies the colour, font-family, font-size, background colour and even non-existent borders in every single property, that’s when it becomes unnecessary bloat.
2. To hide a border all you need to do is specify border:none;. It really is just that simple, I shit you not. And the only time you should need to use this is if you are mirroring a property with different styles (for example: a {color:#ff0; border-bottom:1px solid #333} > #secondary a {color:#000; border:none})
3. Shortening your values and grouping properties together is in your advantage. Why? Because it cuts down on size, and loading time, and it makes everything look prettier. If you’re unsure as to where you should start then try out CSS Tidy, CSS Shorthand Guide, Introduction to CSS Shorthand, Shortening CSS Codes and Efficient CSS With Shorthand Properties.
In short, if you’re going to lift your styles from someone else, try to make sure that someone else knows what they are doing. Run it through a validator and then through CSSTidy. Or, you know, just learn how to do it yourself.
You know I’ve always thought it should be that if you specify the font elements in the body tag you don’t need a p tag specifying the same things. But for some reason it never worked out for me because if I don’t specify font-size in p for some reason specifying it in the body tag just coughs up the default font size. What’s up with that? Most likely coding error on my part though. =/
Speaking of this, I’ve been having some problems with the h tags.
So, I tried specifying the following:
h1 h2 h3 {color: #color;
border: 1px dotted #color;}
but both FF and IE displayed the h tags according to the default stylesheet. Now when I specified the above individually for each h tag, then it worked. So… I’m not really sure what to believe…
Comments are closed on this post (and most other older posts). If you'd still like to discuss this then please feel free to drop me a line using the contact form below.
Hi I'm Becky, often referred to as The Knitting Hillbilly and Pussybear, owner of this site and general nuisance. I'm a knitter, serial complainer, known whistle blower and I run the ever popular
DIV TABLES XD
#1 Jem Nov 21, 04:11 Permalink