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?

Categories
Web Design

22 CSS Layout Tutorials and Tricks

CSS is the style guide for all websites, it tells the browser what the page should look like. Today I share with you 22 resources to help you with your CSS layouts. These tutorials and tricks range from liquid columns to adaptable view design concepts. Enjoy and if you have a link to share feel free!