Join James Williamson for an in-depth discussion in this video Structuring style sheets, part of Managing CSS in Dreamweaver.
In this chapter, we will talk about best practices for structuring your styles and how Dreamweaver can assist you in making sure your styles are organized properly and are well-commented. Having a strategy for structuring the styles in your site is crucial to ensuring that your styles work properly, and are easy to maintain and update. In this movie, we're going to examine the Explore California style sheet and discuss the theory behind its organizational structure. So I have the main.css file open. This is our finished style sheet, all organized and structured, and I just wanted to take a moment before we start working on the style sheet and structuring it to explain this strategy behind the structure that we've got here.
At the very top of the style sheet, we have a header, where basically we explain what this style sheet is. We explain the copyright data, if you want to put that in there, that sort of thing. If you're working in a team environment, you know, within this header, you might put a version number, when it was last modified, things like that. Now the thing I like doing in all my style sheets, just below that, we have a Color Guide. This Color Guide is telling myself and other people what colors are used and what those colors are typically used for. So now when I want to write that, if I forget exactly the hexadecimal value for that, I can come up and copy and paste it, and I can also say, okay I'm doing a heading. What colors should I use? And I can read through this to help me with that.
Just below, that we have a table of contents and in the table of contents, it gives me an overview of how my styles have been structured. I have some constants which are global to the entire site. I have a CSS Reset, which sort of is in the middle of those. I have Global Classes that work throughout the entire site. And then from there, I have some styles that are specific to the Index Page or Home page. I have a Top Level Layout Styles which are sort of Global Layout Styles, and then I get into the individual regions themselves: Headers, Navigation, Main Content. all the way through.
Now, that's the way that I like to organize a style sheet. That doesn't mean that it's the way that you're going to organize it. I know a lot of people that will organize the layout in one section, typography in another, color in another. It's really what works for you. The thing is you want to be consistent with it, and you want to make sure you're following that structure so that if you write new navigation selectors, for example, they go in the proper section. Now you'll notice I've done something here to the table of contents. I have sort of these special characters, sort of the ^4, ^5. Well, that actually helps me jump to that section. You'll notice that I've even added a little comment here that says, hey if you want to jump to that section, you can highlight it, hit a specific keyboard combination or do a Find/Replace, and you'll jump right down to that section.
Now if we scroll down into the styles themselves, we can see that I have a nice little comment here, identifying the section. There is that ^ again that will allow me to jump down to that, and then the selectors themselves are written in a very human, readable way. Each selector is on its separate line, even when they are grouped together. Each property is on a separate line, and then I have a space between each selector. So very open. Very readable. Its not necessarily the most efficient way to deploy this particular style sheet, and we'll talk about that in the last chapter in our movie about maybe optimizing this code a little bit more.
Now I want you to notice something about these properties, too. Notice that every time I go to a selector, the properties are in alphabetical order. So color, font-size, margin-top, every time we go to one they are in nice alphabetical order. The reason behind that is if you go some place and you know, I need to adjust wrapper, for example, and I want to adjust the width, I don't have to worry about where to find it. Its really easy to find because it starts with the W, so it's the very last property. Now that could be a little overkill for lot of people, and you might not want to go to that little bit in detail, but you can add that amount of organization to your style sheets if you want to.
It's not hurting anything, and it might help you find and replace values a little bit quicker if you're going to be doing a lot of hand-coding. Notice that the selectors themselves are grouped by content. So, for example, if I go down to the mainContent section, and we're still on our layout right now. Let's go into our actual selectors. So here's the Headers section, notice they're all grouped together. All those selectors inside the header and the same thing with our navigation; they're all grouped together. And I get more and more specific as I go through. When I get to the top of the section, let me find mainContent area, I have some pretty global styles, but as I get deeper into it, it gets more and more specific and I go from one element to the next.
So if I'm working on images, I'll work on images for a while. If I'm working on headings, I'll work on headings for a while, that sort of thing. And so as I need to get more specific with selectors, I do that as I go through this section. So that's a quick overview of the structure and organization of the style sheet for the Explore California Web site. Now every project is unique, and as a designer, you're sure to have your own personal preferences for how you want to organize your site CSS. I'm not saying your style sheet has to be organized like this one. The most important things is to have a strategy for your organization that's going to serve your site over its entire lifespan.
You want to be sure to plan for how the site might grow, or change and evolve over time and whether or not a team will be involved in the site's development. That's really important. All these factors play a huge role in how your styles can be organized and how they're going to be structured.
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues