Free and Easy CSS Standards & Best Practices
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:
- Exactly How to Use CSS Sprites
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- CSS Sprites: Image Slicing’s Kiss of Death
.
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.
A Light weight, small framework for beautiful forms: Ideal Forms 
How to Start a Functioning Website Under Thirty Dollars 2021? 
The HTML5 Time Element Is Back and Better Than Ever 
Mozilla Introduce Firefox 9, with Speed and less memory improvements 
Periodeic table of HTML5 Elements, arrange by type.