Join Carrie Dils for an in-depth discussion in this video Organizing CSS, part of Introduction to CSS.
- It's entirely possible to write valid, working CSS but have the actual code be a hot mess of confusion and inconsistency. In this movie, I'd like to share some tips for keeping your CSS clean and well organized. My first piece of advice is to use comments liberally. Comments help other people understand your code, and frankly they help you understand your code if you've been away for a while and come back to look at it, it helps you see what exactly is going on. As an example, here's normalize.css and if we look at the source code, we can see that indeed the author has used comments liberally.
So we have it broken up into sections, and then within sections we have got descriptions of exactly what's happening below. Various developers have their own systems for commenting CSS, so you'll see some different styles as you look at other peoples code. But the bottom line is whatever way you choose, do definitely use comments. The next thing I want to mention is to use consistent naming conventions. And when I'm talking about naming conventions, I'm talking about maybe how you name your CSS classes, if you're prefixing them, that sort of thing.
For instance, here's just a quick sample of some CSS classes that I wrote, and you see that I've prefixed all of them with CD dash, in this case CD being my initials. You don't necessarily always need to prefix your classes, but the important thing is to have a naming convention that you're using consistently throughout a project. If you wanna read more about this, here's a really interesting article on class naming methodologies. The next thing I wanna mention is to use consistent formatting.
What do I mean by that? Well, here in this example, we've got some CSS written and it's all over the place. Now all of this is valid legitimately written CSS, but for instance here, we've got no spaces, we've got our selector and our declaration block all on one line. Here we've got the exact same thing, except you can see that we're inserting spaces. Then, with this H1, you can see that I'm using multiple lines that I've got an indent here for this color and no indent on font size, it's completely inconsistent.
And these sorts of inconsistencies in formatting make CSS very difficult to read. So, again, different developers are gonna have different preferences for whether they wanna do tabs, two tabs, four tabs, spacing, one-line, multi-line, it doesn't matter ultimately which one you choose, the thing is to be consistent throughout your CSS document. I also wanted to mention that you should group like styles whenever possible. For instance, if my navigation is in my header area then I probably wouldn't wanna put my navigation styles in the middle of say my page content styles.
So in this example that I've got here, I've got my H1, and further down the page I've got my H2, and it would be better if I grouped those styles together. That way all my heading styles are in one place. Really the idea here is that your CSS follows a logical flow where like items are grouped together, and ideally where you're dealing with a document kind of from head to foot. So you might have your header styles or typography styles further up the style sheet and then down towards the bottom maybe your footer.
Now that's just a general rule of thumb that I prefer to follow when writing my CSS. My last tip is to consider splitting up your files. Now this isn't always necessary, it just depends how much CSS you write. By splitting up your CSS files into smaller chunks of CSS, that can make it easier to maintain cause you can jump really quickly into say, the typography style sheet and adjust something rather than having to look through a really long style sheet to find maybe your typography settings.
The bottom line here, is that by keeping your CSS organized, you'll ensure that your code is easier to read and maintain over time.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS