Everyone who writes code does it a little differently. Sometimes we get lazy, or we don’t know any better, or there isn’t a clear standard. I have worked with a lot of different freelance coders and everyone has their own coding style. Today I wanted to share a little tip that I have recently had my team doing to better organize our CSS properties.

For years I was ordering my CSS properties by type, but every time I had to go back (months later) to make a change, or edit someone else’s code, I found that it really made it hard for others to edit.

Here is a sample of what my code looked like:

.class {
   border: 1px solid #FFF;
   width: 100px;
   padding: 20px;
   height: 100px;
   position: relative;
   z-index: 1;
   border-radius: 20px;
}

So, I switched to ordering my properties alphabetically, which makes sense in my head, but I think as coders we could all save each other a lot of time if we did the same thing!

Here is what the code looks like now:

.class {
   border: 1px solid #FFF;
   border-radius: 20px;
   height: 100px;
   padding: 20px;
   position: relative;
   width: 100px;
   z-index: 1;
}

If you have OCD about your code, this is a great way to organize your code! At Bearded all of my developers are now coding their CSS in this fashion so it is quicker for another coder to step in and edit.

So, how do you organize your CSS?