5 tips to write better css

We can not deny the important role of css in controlling the look of any web application or software. Nowadays it does not matter whether you are a web designer or web developer , everybody should have the knowledge of css. Here are few tips for writing better css.

1.Use of  a Proper CSS Reset

If properly declared it can solve lots of cross browser problems. This should be declared at the very beginning of the css like

body, html{padding:0, margin:0;}

but this is not a full reset. There are many CSS reset codebases on the web that you can incorporate into your work like Eric Meyer reset

2.Using Shorthand Properties

Properly used shorthand propertis can solve lots of time and editing problem.

See this

#content {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}

Now see this

#content {
margin: 50px 0;
}

you can see how much time you can save if you write css like this.

Another example

background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;

Shorter one

background: url(background.png) repeat-y center top;

3.Using Color Names Instead of Hexadecimal

color: red

technically it is not wrong but you’re essentially saying that the browser should display what it thinks red is. This can create cross browsing problem in future. It is always safe to declare it like this

color: #ff0000;

You can use a color cheatsheet that provides a preview and the hex value of a color.

4. Combining the common attributes

See this

#wrapper-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.wrapper {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

Now see this

#wrapper-1, .wrapper-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}

see how much space and time we have saved.

5.Always Provide Fallback Fonts

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.

For example:

#selector {
font-family: Helvetica;
}

Can be expanded with fallback fonts as such:

#selector {
font-family: Helvetica, Arial, sans-serif;
}

Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.
By defining fallback fonts, you gain more control as to how your web pages are rendered.

Hopefully you have found these tips useful. En

Advertisements