Formatting and Organization

I know, I know, you want to get to styling your website, and being neat and organized is the last thing on your mind. However, just trust me, and take a moment to think about how you’re going to stay organized in your child theme’s style.css.

As you start to fill up your child theme’s stylesheet, you’re going to quickly see what a mess it becomes if you don’t format and organize neatly. When everything breaks in your 5,000-line stylesheet, and you’re able to actually find that one bracket that was out of place, you’ll thank me.

How you organize and format your CSS isn’t all that important. What’s important is that you do have a way of staying organized with your CSS. This way, when something breaks or you need to adjust something later, you can do that quickly.

So, if you’re already experienced at writing your custom CSS, and you have your own way of organizing things, by all means, stick to that. But if you’re new to making these kinds of changes and managing a stylesheet, consider following my advice in this article.

Use Proper Formatting

One of the worst things to look at is a stylesheet that doesn’t have basic CSS formatting and spacing. I think this happens because a lot of beginners simply copy and paste from different sources, without really understanding what they’re pasting.

A basic CSS rule should be formatted something like the following.

.foo {
    color: #000;
    font-size: 16px;
}

And a single rule, with multiple selectors, should be formatted like this, with each selector on its own line.

.site-header .foo,
.site-content .foo,
.site-footer .foo {
    color: #000;
    font-size: 16px;
}

And as you start to accumulate more CSS, it’ll start stacking up like this.

#cool-thing {
    background: #000;
    padding: 20px;
}
.foo {
    color: #000;
    font-size: 16px;
}
.bar {
    color: #fff;
    font-size: 18px;
}

As shown in the examples above, it’s important to make sure your property/value pairs are tabbed once, inward. This becomes really more important for your sanity, as you begin to work with @media queries.

So when a block of CSS is wrapped within a media query, the entire thing should be then tabbed once more inward.

#cool-thing {
    background: #000;
    padding: 20px;
}
@media (max-width: 767px) {
    .foo {
        color: #000;
        font-size: 16px;
    }
    .bar {
        color: #fff;
        font-size: 18px;
    }
}

If you don’t do this, your stylesheet will become a huge mess to deal with, and it’ll be really difficult to tell what CSS rules are inside what media queries.

Comment Weird Stuff

In CSS, you can write comments, which don’t actually affect the styling of your website. These comments are simply there, to help you with your organization. So, if you’ve done something weird, or non-obvious, write a comment next to it, that’ll remind you what you did.

A comment starts with /* and ends with */. So, for example, you might do something like the following.

.foo {
    color: #000;
    font-size: 16px;
    padding: 28px; /* Match 30px width/height minus 2px, for the border */
}

Group Your CSS

As your stylesheet grows, you’ll want to start grouping your CSS into logical sections. And then, you’ll want to comment those sections. There are a lot of fancy ways people do this. There’s no right or wrong way. Just do this in whatever way is going to allow you to navigate through your stylesheet easily.

So, as an example, below is how I personally do it.

/* =Header
----------------------------------------------- */

.site-header {
    background: #000;
    padding: 20px;
}

/* Menu */
.site-header .menu {
    padding: 10px;
}
.site-header .menu > li > a {
    color: #fff;
    font-size: 18px;
}

/* Social Icons */
.site-header .tb-social-icons {
    color: #000;
    font-size: 16px;
}
.site-header .tb-social-icons li {
    padding: 5px;
}

/* =Footer
----------------------------------------------- */

.site-footer {
    background: #000;
    padding: 20px;
}

/* Copyright Text */
.copyright-text {
    color: #fff;
    font-size: 16px;
}
.copyright-text p {
    margin-bottom: 10px;
}

Conclusion

I’ve written this article because I’ve seen a lot of messy stylesheets, leaving customers utterly confused when something goes wrong. If you’re learning, this is just going to make things harder for you. In web development, and programming in general, neatness and organization equals efficiency.