7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. HTML & CSS

5 Ways to Instantly Write Better CSS

Scroll to top
Read Time: 5 mins

Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

1. Reset

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something.

It can be as simple as removing the margin and padding from all elements:

The Eric Meyer and YUI Resets are awesome, but to me, they just go too far. I feel like you end up resetting everything, and then redefining a lot of properties on the elements. This is why Eric Meyer recommends that you should not just take his reset stylesheet and drop it in your projects if there is a more effective way of using it. Tweak it. Build on it. Make it your own.

Oh and please, stop this:

It takes more time to process, and what do you think should happen to a radio button when you remove the padding? Form elements can sometimes do some funky things, so it may be best to just leave some of them alone.

2. Alphabetize

A Little Quiz

Which example would you think is faster to find the margin-right property?

Example 1

Example 2

You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.

I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.

3. Organization

You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. For example, this is how I structure my stylesheets:

By using comments and grouping similar elements, it becomes much quicker to find what you are looking for.

4. Consistency

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet.

Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines:

It works for me because 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.

5. Start in the right place

Don’t you dare touch your stylesheet until you have written your markup!

When I am preparing to slice a site, I go through and mark-up the entire document from the opening body tag to the closing body tag before even creating a CSS file. I don’t add any superfluous divs, ids, or classes. I will add some generic divs like header, content, footer because I know these things are going to exist.

By marking up the document first, you won’t run into such diseases as divitis and classitis, which can sometimes be fatal! You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.

Utilize CSS’s descendant selectors to target children elements; don’t just automatically add a class or id to the element. Just remember, CSS is worthless without a well formatted document.

*Editor's Note: I can't stress this point enough. As Trevor said, don't even touch your CSS file until the markup is 100% complete.


These are just some of the tips that help me to write better code. This is by no means the end of the list. As I come up with others, I’ll share.

What tips do you have for writing better CSS?

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.