Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Another great way to avoid redundancy, and also to save yourself a lot of time in writing CSS is to use something called a Selector Group. I've got open here the meyer_reset.css document that's available to you in your Assets folder. If you don't have access to that, that's okay just take a look at what's on screen. And so basically, what we have here, as you can see is a bunch of different tags all grouped together separated by a comma, and then a declaration after that of all of these different properties that all of these things share. Now, I could have just written it out where HTML would be its own tag, and it would have all these properties, body be its own tag, have all these properties.
But instead of writing all that out multiple times and having redundant CSS in my document, what I've done is created something called a Selector Group, so all of these are selectors, and this selector group now shares all of these properties. And since I've spelled them out, separated them by a comma, and then I put the curly brace up in front of them and a curly brace after there, that just means that all of these adopt all of these different properties all together. I don't have to separate them. They all just take on this one set of properties which is really, really handy.
So, let me show you a real world example of this. So, I'm just going to go ahead and close this document up for now, and I'll create a brand new blank CSS document. Let's assume that we are going to be styling some headers for our blog, let's say. And so, normally, what people do is they come in and they say, okay, H1, we're going to do the color, it's going to be black. And after we type out the color, we're going to say font-family, and we're going to call this arial,helvetica,sans-serif, something like that.
We're going to say font-size, and we'll make this 48 pixels, and there's a bunch of different properties go into this. So margin, let's put this at 0, and let's do 0, 5 pixels on the bottom, 0, something like that. And so, all of these different properties for the H1 tag, and then they would come down and they would type out H2, and they would do color:black, font-family:arial,helvetica,sans-serif.
You sort of get the idea here. I'm just being redundant as I go through here, creating a bunch of unnecessary lines in my CSS document. Whereas, if I were to come up here and just do this, where I eliminate anything that's specific to just the h1, so like the font-size, does not need to be in this declaration. I'll just do this, h1, h2, h3, h4. So all of these different tags are going to be black, they're going to inherit the font-family of Arial Helvetica or Sans-Serif, they are going to have this margin applied.
And then after that, I could type out h1, font-size:48. Then I could go down, and I could say h2, font-size:36. Then go down h3, font-size:24, and then h4, font size:, and let's do this at something like 18. There we go.
And so now, all of these different things are being inherited up here, and then I'm just defining the sizes one at a time right there. So, this Selector Group includes all four of my headers. They all are now black, they all have this font-family, they all have this margin, and then I have all their individual sizes declared down here. And so, what I've done is saved myself a lot of time, I've saved myself a lot of writing by typing out all this up here, and just adding the selector group instead of actually adding those individual properties to each one of these different header declarations. So, as you develop your CSS documents and you find similarities between certain tags, my recommendation is to create yourself some selector groups.
And it's not just these default tags like h1 and body, and things like that, you could add divs into this, you could add classes into this, you could add all different types of things into this as long as it's separated by a comma, and as long as they all share those specific properties that you define, everything should be cool. So just as you move forward, try using these Selector Groups to kind of compress your CSS, and to have certain things share certain properties so that it makes it easier on you, and easier on the person who comes in and edit it later on to find exactly what they're looking for.
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.