Categories
Web Design

Organize Your CSS Properties Alphabetically

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?

4 replies on “Organize Your CSS Properties Alphabetically”

I write my styling based on attributes.

If I have 30 lines of styling for an element I either break it up into more OOCSS. Or group the attributes by type of style. I rarely use the short hands for margin, or padding since its easier to manipulate content when you have distinct values.

I use to code alphabetically but the more I practice OOCSS the more I group by attr.

Until recently I used the alphabetized approach and love it. Embracing OOCSS has really forced me to look at my approaches closer. Now I generally have things grouped by similar styles. Thanks for sharing this, I’m a bit late reading it but it’s making me reevaluate the code I wrote today.

Another thought, do you have a framework you regularly use? And do you adapt it to your alphabetical structure or leave it stock?

I’m playing with the new bootstrap right now for some new church wordpress themes. I debated changing things around before and am glad I didn’t as I will be migrating some old themes to the new release. Definitely pros and cons both ways. Thanks for sharing!

Leave a Reply