Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability. In this course, author Justin Seeley covers best practices for writing CSS in an easy-to-read format, commenting code, developing a table of contents, and adopting other methods that help produce "cleaner" code. The course also contains tips for speeding up development with some online tools and simplification techniques.
In this movie we're going to be discussing Naming Conventions and how you should start to rethink the way that you name things in your CSS documents. This is one of the more common questions that I get from people who are just learning CSS. They always ask, now, what do you name these things? How do you learn how to name these things? It's really up to you how you name these things and why you name things what you do, but you do need to assume that this is going to be edited at some point in the future especially if you're doing client work. Chances are they're going to come back with suggestions for your work, and you want to name things in such a way that lends itself really well to future editing.
In this case I have to find two columns, and that's here in the main body styles of the CSS document. I've got column right and column left. What if next year I have to come back in to redesign this site, and I need to move that left column to the right or that right column to left? I shouldn't have to go in and rename the element in my HTML code and in my stylesheet as well just to change the position around. Instead of using column right and column left as my declarations here, what I should've done is do something like col-a and col-b for these.
That makes a little bit easier for me to see col-a versus col-b. It's not as absolute as right and left and then all I have to do is come back in and change the float right or the float left and then in my HTML document I would already have col-a and col-b. It wouldn't be as confusing if I had one that was left, but it actually floats right and one that's on the right that actually floats left. That can get really confusing. You also need to be cognizant of the fact that you need to be naming things based on what they are and not what they look like.
So for instance, if you had a class here that said something like comment-blue. That's a very absolute thing, because the comment is supposed to be blue in theory according to that declaration name. However, that's a lot less versatile than something like comment-footer or something like that. Changing the name to comment- footer is a little bit more broad. It tells me where the comment is as opposed to what it looks like and gives me the flexibility to change the color property anytime I want without any penalty.
The same holds true if I were do something like post-largefont. What if in the future I need to shrink the size of that font, and it's not so large anymore. A better title would be something like post-title or post-body or something like that. So name things according to what they are, not what they look like. I think this is a great technique to follow and a great way to help you plan out your CSS style names so that they are more functional for you and also for the people who might working on this document even after you've produced it and set it up on the web.
There are currently no FAQs about CSS: Visual Optimization.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.