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.
Many web designers and developers work in a very strategic and structured way in which they compartmentalize all of the different things that they do. And that is much the case with CSS as well. So chances are, if you are developing your own style, you're going to want to work in such a way that you separate certain things like your CSS Reset is separate from your global CSS or your typography CSS, or stuff like that, and you might even develop separate documents for this. The problem with this is that you wind up with a lot of different things in your mark-up when you link to several different style sheets in your HTML markup which just clutters it up, makes it a little bit harder for it to read, and it makes it a little bit slower as well.
And so, what I suggest you do is create something called a master CSS document that you import all of the other style sheets into, and then just simply link to that one single document in your HTML. Let me show you exactly what I mean here. I'm going to open up a couple of files, and I'm going to go out to my Assets folder and grab these. So, I've got an HTML file here, and I've got a CSS document here, and this CSS document is just basically importing several CSS documents into one CSS document. So, I've got a import for my reset, I've got an import for my global CSS, for my structure, and for my IE hacks.
So any hacks that we have to do that relate to Internet Explorer which chances are we're going to have a lot of them, that's where that stuff is going to go. And so, basically there's nothing in this CSS document, nothing besides these imports, there's no declarations, there's no properties, nothing being controlled from here. If I go into this HTML document, I am only linking to this one Master CSS file right here. If I go into my browser, and look at this, you can see that there is something here, there is a div being defined here with a black background and so forth. If I right-click on that and choose Inspect Element, I can see here that it's a div ID called box, and it is right here declared as a box, width 500, height 500, and background set to black.
This is actually in the structure.css document. And so what I've done here is I've reduced how many links I've got to style sheets in my HTML mark-up, and then in my Master CSS document, I'm actually pulling this structure.css file in here, and allowing it to become part of the Master CSS for this website that I'm creating. So, when you create yourself a Master CSS document, this just enables you to work in a very structured, and separate way in many different forms like your reset, your globals, your structures, your typography, all that kind of stuff, and then pull them all back together in one single Master CSS document.
It's a better way to work, it's a more structured way to work, and I think you're going to find that it saves you a ton of time and a ton of headaches down the road as well.
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.