Cutting CSS short
Hi! Thanks for visiting. Here you can find blogging tips and free Wordpress themes. You may want to subscribe to RSS feed.
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!
About the author
See all posts by Andrew
Share This Article
