Dezinerfolio

CSS Standards & Best Practices

Your rating: None Average: 4.5 (141 votes)

CSS is used to define the User Interface of a Website & to separate content from presentation.

CSS is something that is extensively used on almost every site. Lets take some time to ensure that our stylesheets are built with some good standards. The below tips will really help CSS beginners a lot in development.

.

Index

This definition helps you & others understand more about the Site as well as the CSS file rather than the content in the CSS. The Index is just a formatted paragraph of text as a CSS comment.

  • Gives Credit to the Author of the CSS
  • Defines the Layout of the site [columns, static/liquid]
  • Keep track of the file Version [really helps in case of multiple authors & future updates]

.

Anchors

Anchors are just like bookmarks within the same CSS. Anchors let you easily traverse your CSS with no confusion and also keeps everything organized.

The anchors are defined in the index of the CSS [above]. CSS has no native anchoring system so I use a simple technique to define anchors within the document.

The idea is to define comments with a unique character. To get to an anchor, you copy and find one of the anchor definitions from the index, you are taken right away to the section.

.

Classitis

Classitis is a term used to describe the over use of class definitions in HTML. Haven’t you seen a CSS with unwanted class names defined just to get that specific element styled!

One of the beauty in CSS is Contextual Selectors, lets us it:

.

Naming Convention

Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.

.

Shorthand

Shorthand in CSS is where you define several properties of the same kind as one single property.

CSS Shorthand makes development much easier and keeps your CSS clean, short & accessible. Here are a few examples:

Further Reading:

.

Sprites

Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites.

CSS Sprites reduces the number of HTTP requests, saves bandwidth and loads faster. Also avoids image flicker [eg: mouse-over a button which loads another background image causes a flicker in systems running on low internet speed].

The best and a popular example of a CSS Sprite would be the official Apple sites menu system:

Image: apple.com

Further Reading:

.

Specificity

Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup.

In simple words, every CSS selector has some kind of weight associated with it. The sum of all the weights in the selector determines its priority in the document. Specificity helps a lot when it comes to huge CSS documents.

Well, specificity is a big area in CSS which just cannot be explained in a few sentences. Here are a few examples:

Further Reading:

.

Resets

Global Reset ensures almost an identical presentation of a site across all the browsers. In every case different browsers applies its own set of defaults to the site which gives an inconsistent UI to the site in different browsers... A Global Reset Fixes this issue and lets you build a site from absolute base.

Using a CSS Frameworks is not always recommended but a CSS Reset is all you need. There are many different resets from simple to complex ones.

Further Reading:

.

Hacks

Even a perfect CSS will not generate an identical output in all the browsers. Its the browser that interprets your CSS in different ways. EOD, if you need a site to look the same on all the browsers, you have to use CSS Hacks.

I agree that using CSS Hacks will result to errors in CSS Validation. An alternate to this is to have a separate browser specific CSS and include it in the HTML using conditional tags. I usually create a "fuck-ie.css" in all of my projects :)

This way your master CSS is valid and the "fuck-ie.css" is also valid but overrides the master only in IE...

Further Reading:

.

Validation

Its always important to validate your CSS when you build it. This is to make sure that your CSS is error free and is interpreted in the right way in all the browsers.

The W3C Validator has been a very popular online tool that validates CSS.

If you have more tips to be added to this list, please share them below. We hope this helped you.

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/411

Comments

Anonymous's picture

Thumbs up, I have never seen the knowledge which you shown in the post absolutely very attractive post for everyone which is related to the job, recently my friend Neni told me about this but I did not consider it seriously.

polypropylene pipe (not verified)
Tue, 04/09/2013 - 11:03
Anonymous's picture

I found the perfect place for my needs. Contains wonderful and useful messages. I have read most of them and has a lot of them. Xbox 360 Emulator

Anonymous (not verified)
Sat, 01/19/2013 - 17:42
Anonymous's picture

After I originally left a comment I appear
to have clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I receive four emails with
the same comment. Perhaps there is a way you can remove me from that service?
Cheers!

Wed, 05/08/2013 - 16:20
Anonymous's picture

Hello it's me, I am also visiting this web site regularly, this web site is genuinely nice and the visitors are truly sharing nice thoughts.

life armor (not verified)
Thu, 03/14/2013 - 22:10
Anonymous's picture

Woah! I'm really digging the template/theme of this site. It's simple,
yet effective. A lot of times it's very hard to get that "perfect balance" between superb usability and visual appearance. I must say you have done a amazing job with this. In addition, the blog loads very quick for me on Chrome. Outstanding Blog!

wordpress info (not verified)
Mon, 02/25/2013 - 20:06
Anonymous's picture

Awaited multistory, project of Anantraj which is launched with best facilities and luxuries located at M-1A sector of Manesar which is being developed by HSIIDC
Anantraj projects
Bestech projects

Raheja (not verified)
Fri, 12/07/2012 - 17:53
Anonymous's picture

I like it! Your post is really good providing good information..Valet parking I liked it and enjoyed reading it. Keep sharing such important posts.I am very much pleased with the contents you have mentioned.I wanted to thank you for this great article.I enjoyed every little bit part of it and I will be waiting for the new updates.Heathrow parking I really appreciated this post.Just want to say thank you for the information you have shared. Just continue writing this kind of post. Thanks. Marvel Avengers Alliance Hack Avengers Alliance Hack Marvel Avengers Hack Marvel Alliance Hack Marvel Hack Alliance Hack Avengers Hack

Tue, 09/25/2012 - 12:22
Anonymous's picture

My brother recommended I might like this website.

He was entirely right. This post truly made my day. You can not imagine simply how much time I had spent for this info!
Thanks!

www.titantemplates.com (not verified)
Thu, 12/06/2012 - 07:36
Anonymous's picture

Undeniably believe that which you stated. Your favorite justification appeared to be on the internet the simplest thing to be aware of.
I say to you, I certainly get irked while people consider worries
that they plainly do not know about. You managed to hit the nail upon the top
and also defined out the whole thing without having side-effects
, people can take a signal. Will probably be back to
get more. Thanks

heathrowgatwick.com (not verified)
Wed, 11/14/2012 - 18:02
Anonymous's picture

Gemei G6 android 4.0 Tablet PC 8 inch XGA Screen Dual Core 1.5GHz Super Slim 16G in Computers/Tablets & Networking, iPads, Tablets & eBook Readers ...

rerwr (not verified)
Mon, 09/24/2012 - 09:08