12 Tips for Writing Better CSS


CSS
has been always a marvelous language for creating web pages. It’s better to learn from other’s mistake than to commit your own. Some generous designers/developers have posted really good tips and techniques to save time and effort and to excel CSS. So have a look on following tips as each one will teach you a different thing.

Start With A CSS Reset

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers. The most used CSS Rests are Eric Meyer CSS Reset and YUI Reset. Some people have said that css reset stylesheets aren’t needed (Jonathan Snook being one of them), but once you get used to the reset and what items you’re coding, it becomes much easier to ensure that every browser is displaying items properly.

Alphabetize

By alphabetizing  properties, you are creating  consistency that will help you reduce the time you spend searching for a specific property.  Always try to organize your CSS classes, IDs and rules in an alphabetical order. It helps your work to manipulate easily.

.idname
{
background: url("tital.jpg") no repeat;
border: 1px solid #ffffff;
font-size: 10px;
line-height: 24px;
margin: 45px;
padding: 0;
position: relative;
z-index: 101;
}

Organization

You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. By using comments and grouping similar elements, it becomes much quicker to find what you are looking for.

body
{
background: #ffffff;
color: #222222;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}

Consistency

If a selector is going to have more than 3 properties,Break it to multiple lines. It works  3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent.

Indentation

When you’ve got 500 lines of css code to sift through, it can become straining on the eyes.

.classname
{
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

Commenting

comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code, save your time scanning but will be great for your clients when you pass along the code – they’ll be able to find items easier, fix items.

/* Here’s how you comment CSS */

Shorthand Code

Shorthand css code will allow you to speed up the writing process, cut down on clutter in your stylesheets and will allow you to find things much easier and cleaner.

element
{
.background-color: red;
back-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

all these properties can be combined into one single background property as follows:

element
{
background: red none repeat top left scroll;
}

Table of Content

Writing in a table of contents in the beginning of your stylesheet will allow you, as well as anyone else viewing your css file, to find where the specific items in your code are before they even have to scroll.

/*******************************************************
1.Header code
2.Navigation code
3.Content code
4.Sidebar code
5.Footer code
*******************************************************/

Class and Id name

It will be better for you if you keep the naming structure of your CSS classes and IDs simple as it will allow you later to edit your codes and make necessary amendments.

.Header-title{.......}
.main-navigation{......}
.content{......}
.footer{........}

Invalid CSS

This is another revealing mistake did you see the error on the code? padding:auto is invalid. That style may apply to width and height, but not to padding.

Combine element

This one’s a lot easier. Basically, to avoid having to rewrite the same style declarations for a number different selectors, you can just group all the selectors in a comma-separated list and use it in one rule set.

p {
font-family: tahoma;
font-size: 14px;
}

div {
font-family: tahoma;
font-size: 14px;
}

blockquote {
font-family: tahoma;
font-size: 14px;
}
you can write it as follow:
p,div,blockquote
{
font-family: tahoma;
font-size: 14px;
}

Whitespace

When it comes to trying to reduce your CSS file sizes for performance, every space counts. there is absolutely no reason not to take out excess characters.  when you actually push your project onto the web where the size of your files really counts.

No Fallback Fonts

Web designers are pretty much limited to the few so called web-safe fonts (e.g. Arial, Georgia, serif, etc.). There is a plus side, though. You can still use fonts like Helvetica that aren’t necessarily installed on every computer. The secret lies in font stacks. Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

Related Posts:

  • No Related Posts

2 thoughts on “12 Tips for Writing Better CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *