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.
One of the easiest ways to let people know exactly what's going on inside of your CSS documents is to use something called a Comment. And you might not know exactly what a Comment is or how to write one, and so that's what we're going to talk about in this movie. What exactly is a Comment? So, I'm going to start off with a black CSS document, so let's go to File, New CSS, and you can create a new CSS document in whatever code editing application you happen to be using, it doesn't have to be this exact one. And so I'm just going to start off by typing out the body tag here and then on the second line I'm just going to define something like the font-size and then after that we're going to do something like 62.5%.
And so, after I type out 62.5%, some people might not understand exactly what that means. 62.5% of what exactly are we defining here? And so I need to put something in here that explains to the layperson exactly what this means. And so in order to that I need to insert something called a Comment, this is code that is not going to be interpreted by the browser, it's actually ignored by the browser, and it's only visible to people who view the CSS document itself. And so, in this case, to start a comment you just do a slash, and you do a little asterisk like this, and you would do something like 1em is equal to 10px and then we'll close that with an asterisk and a slash like this.
And so basically, in this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow free using ems to set the font size later in the CSS in a more intuitive base 10 type of way. And so, hopefully somebody will understand that and will read into that from that comment that I produced right there. You can also do this for something like colors as well, so if you wanted to define a color for this text like #333, and if somebody doesn't understand what color that is that's okay, you can just do a slash, and you could do something like dark grey just to let them know what the color is and so if they chose to change it, they would know, oh okay, I'm changing the color from dark grey to something else.
So these little comments are actually very useful for determining things like this. And so, in essence, when you work on comments, this is a great way to sort of road map where you're going and also a great way to add in little bits of information regarding the code that you've inserted into your CSS documents and let people understand exactly what you were going for in this markup.
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.