simplyWP provides a comprehensive Wordpress solution for any of your website. From a simple weblog to a e-Commerce, we have a solution for you using Wordpress, the most talk-about friendly CMS web engine.

Ask for a solution
Latest Portfolio

Cutting CSS short

Subscribe to our RSS feed to get a faster update via your favorite RSS reader or email

I’m sure a lot of people still using the same old CSS code that developed decade ago, where all the code are long as hell. I remember last time when I was coding the CSS together with table layout (Yeah, so?) Both files taking time to load due to the massive code in them. Here are my way on cutting short some code.

Normally padding and margin code would be a pain in the arse, for example:

#box {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

Unless Dreamweaver which give will automatic add in those code for you, or else, you’ll have to be a fast typist or time taking. Here are the trick on cutting short.

#box {
padding: 5px 10px 5px 10px;
}

#boxy {
padding: 5px 10px;
}

Ok, a little confusion here. For the first one, it happen like this top, right, bottom, left. Or if you happen to have both top,bottom and left, right same padding, you can use 2 only, where it will automatic adjust to to top,bottom and left-right. Just how much time and typing it can save. This kinda long list also happen in background image as well, Google them out, save your CSS loading time and file size ;)

Well, both of these CSS are most used in developing a site. So the rest, you can go and figure a way. Oh, link style also have some short cutting too. You might wanna look around before develop again. However, due to some reason, Internet Explorer has some problem rendering some of those short CSS though. It’s a big headache when it comes to Internet Explorer, always!

Blog Widget by LinkWithin

Share this entry

Digg it StumbleUpon del.icio.us Google Yahoo! reddit

Leave a reply