Alphabetical CSS
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 started doing to better organize my 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 made it difficult 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! It makes easy for me to now review my CSS.
So, how do you organize your CSS?