CSS Tips and Tricks, Please Add More !

[equatorlounge]

CSS tips and tricks
As integrators pave their way along their regular tasks of integrating what designers build, there are some regular things that they have to bear in mind, some of which are explicit but oh well, I thought it would be a good thing to write about the basics. And So I Say:
No Empty Divs
Use text-indents in hyperlinks for images and images background so that the div does not remain empty

Even if you have a division marker that contains a backgrounds and is embedding another inner-container (or any other reason), use a text-indent:-9999px so that it does not appear empty. This misuse has led to many misinterpretations by search engines

Validate your codes on W3C
Even if there is a warning, there’s always this possibility to wipe it out and write the right piece of code for it.

No Ids! Classes & inheritance
We’re in 2010 now ladies, things have changed and now it’s the new era. Like for me, it was quite a bite that day I got those slaps (uhh… let’s call that e-slaps for the sake of this article) from my boss, who clearly mentioned the important generic methodologies of using inheritance techniques in everything we do… And that included CSS my oh my..

Besides, even if you are using ids, make sure that they are unique and that they are not being duplicated elsewhere on your page. That’s the good thing with the W3C validator: it doesn’t miss those

Comment your lines of codes
There are many advantages for this, the major one I’m considering is to help situate the programmer in line who will be taking your codes elsewhere. It’s a form of diplomacy, hence good practice.

No Styling in your html pages: out!
It’s better to transfer all the related style, with comments alongside on your generic style sheet

Insert Images on web pages only if necessary
Whenever there is an opportunity not to insert an image as an <img src>, do it; the best practice is to load it as a background image and if possible use write any text that’s ever found on the image instead of importing the image from photoshop or any app you’re using down to tyou

Anti-aliasing of gif images for better image quality
I have this luck of having a chief who knows quite a sleek stuffs in photoshop and image rendering techniques and that includes gif images.

Integrators love gifs: light, minimal use of colors.. when they’res no curves in any way, but what about transparency ?
There are possibilities to avoid the use of pngs, which are usually heavier and take quite some time to load. Sometimes when gifs are being exported, codes or designers forget the background image on which the gif will be laid onto. That is why anti-aliasing techniques are very important for keeping the design intact.

use overflow: hidden instead of clear:both
More information can be found on this link:

http://www.quirksmode.org/css/clearing.html

To brief a bit, using clear is like ol’ school teaching stuff which was the fast-driven solution while the overflow:hidden seems to satisfy the major browsers like MSIE, FFx , Chrome, etc…

Minimise the use of style sheets
Avoid using different style sheets for different browsers. Use one generic style sheet, unless you have different themes for different pages, but that depends. All this creates confusion and that might also mean you are not be using the right html codes and the right css styles

To minimise the use of multiple style sheets, use:
i.e. <!–[if IE 6]><div id=”IE6″><![endif]–>

Validate your css codes on http://jigsaw.w3.org
Jigsaw is the CSS passport for integrators. I never knew it, but now O I know !

It’s the haven. The hide in our line of business. It’s what keeps our ego hmmm strong and heavily proud, the reason why integrators are so needed in the web business.
* Squeak *

Always have this final habit to validate your css in the following link
http://jigsaw.w3.org/ to make sure that you are in line with your css standards. Even if there are warnings, that would mean you are wrongly interpreting your css codes or that some styles have been duplicated here and there.

Conclusion
That’s all for now folks. I think , whenever I’ll have some more time, I’d probably create a CSS tips and tricks Part 2, cos amending what’s already there would sound so cheap and it’s not like facebook, uhh Sheran changed that article, etc..

It’s good to have some feedbacks and all, well, that’s probably interesting to know what’s out in the CSS jungle, so jot in some lines, criticise, be blunt and bold and don’t hesitate to contact me (except ma okes at work, you know who you are, ladies) for any info ya need

À La Prochaine !

[Borzoi]

Consistent code and layout

Everyone lays out their code differently. There is technically no right or wrong way to lay it out as long as the syntax is correct but you should be consistent along the whole document. Here are a few ways I've seen people coding:

.class
{
  color: #03fcfd;
  position: absolute;
  top; 10px;
}

.class {
  color: red;
  position: absolute;
  top; 10px;
}

.class {color: rgb(88,43,127); position: absolute; top; 10px;}

Those are only a few examples. See how the colour is written differently in each along with how the code is laid out? While each one is correct, you should use the same way throughout.

[equatorlounge]

to let you know that you must validate your codes through the jigsaw.validator.org and you'll see that the color codes you've mentioned are not accepted by normal standards..

oO

now ...
if you want to f..'em all, well :D it's all good !

[Borzoi]

I just put my codes in and all of them are validating (except where I've accidentally put a semicolon instead of a colon after "top" which I am editing now). The colour has no error.