Join Justin Seeley for an in-depth discussion in this video Developing a CSS table of contents, part of CSS: Visual Optimization.
- View Offline
One of the first things I do when developing my own CSS documents is I automatically create something known as a table of contents, and this is going to help me organize my code and keep my thoughts structured as I start to create the CSS. It also helps me separate different areas of my website so that I can work on it in a very systematic approach. In this movie I'm going to show my basic system for building a table of contents which you can use in your own projects and just add in your own different parts and pieces as you see fit. I'm going to create a brand-new CSS document here. When I first get the CSS document open, the first thing I'm going to do is I'm going to start typing out a comment, and I'm going to do that just by typing out a slash and then I'm going to add some asterisks to this.
You can add as many or as few asterisks as you want, but in this case I'm going to make it go almost all the way across. Then after that I'm just going to hit Enter, and I'm going to start typing out some information. So now the first thing that I'm going to work in here is going to be universal styles. I'm going to do: number 1, Universal styles, and I'll do things here like typography et cetera. Number 2, header and nav styles. Number 3, this is going to be main body content.
Number 4, this is going to be for sidebar content. Number 5, let's say we're working with a CMS, I'll do widget content here. 6 would be my footer content. Then finally 7, we would do comments and forms. To wrap up my table of contents, I'm simply going to write out some more asterisks here and then once I get all the way over to the edge, I'll just type out a closing slash.
This is the basic structure for my document, and as I continue to build upon this, I'll use this table of contents to map out each area as I start to style it. So I'll start of with number 1, the Universal styles. This is where I define stuff like the typography for the entire site. This is where I define things like the body style, all that kind of stuff. Number 2, the header and navigation. That's where I do things like the menu structure, the lists, and the unordered and ordered lists and things like that. Main body content. That's for body paragraphs, image styling, and all that good stuff. Sidebar contents, stuff that goes on the right hard side, adds, search bar, that kinds of thing.
Widget content much the same thing as sidebar content, but this could be placed anywhere. So I need to style those if I was working with a CMS like WordPress for instance. This is a very important section to style. Footer content that's going to be things at the bottom whether it be links, images, forms, Twitter, and Facebook icons. Then finally comments if I'm working on a blog or something like that or if this is just a regular website, maybe there's a contact form that I need to style up. Maybe I just want to style all the form elements or table elements for pricing tables. In any case, developing a nice solid table of contents that you can use each and every time you start to develop CSS is a great way to insure order and structure in your CSS documents going forward.
- Exploring good versus bad style sheets
- Creating section headings
- Indenting code for enhanced readability
- Creating single- and multi-line comments
- Avoiding unnecessary tags and classes
- Creating master color and typography guides
- Simplifying comments