- Making it easier to write efficient selectors actually starts with your HTML. By focusing on writing clean semantic and consistent HTML, you make it a lot easier to write efficient styles. HTML defines the structure of your page and without a logical consistent structure, writing efficient styles is impossible. Here are a few best practices that I recommend when authoring your HTML. First, focus on your semantics. Make sure that that the tag you're using is appropriate for the content inside of it and there isn't another element that expresses the content in a more meaningful way.
For example, if you're quoting an author in a book review, use the blockquote element, not a paragraph. By using the correct element, your content is gonna be easier for user agents to understand and you won't have to write multiple selectors for the same element. Second, make sure that your code is consistent. Now, let's say that you have sections of content that promotes specific products that are gonna appear on several pages within your site. Now, in this example, you can see that the content region is structured three different ways on each of the pages that it occurs on.
Now, this is gonna probably look the same in the browser, and you could certainly style each one of these to look the same. You're not gonna be able to style it as efficiently. Creating standards for how content should be structured and then sticking with them throughout the site creates content that can be better understood by user agents and can be styled with fewer selectors. Finally, simplify your code where you can. Now, I'm not above using non-semantic code for styling purposes from time-to-time, but avoid adding any unnecessary markup to your page, especially just for styling purposes.
Too often I've seen elements that have been wrapped in multiple div tags just to achieve a desired visual effect that really could've been achieved without all that added structure. I usually approach coding my sites with just the structure and content in mind. While I might give passing consideration to the visual design of the page, what it's gonna eventually look like, I'm really more concerned with properly structuring the code and representing the content than I am with how the content is going to look. Now, I've found that this allows me to create lean, standards-compliant pages without a lotta extraneous markup.
At first glance, it may seem that this approach limits what you can do visually, but I've actually found it to be just the opposite. When you have a lean page structure, it's a lot easier to write efficient styles that still style the page the way you want to. As I mentioned, you might occasionally need to tweak the code for your design, but the more I use this approach, the less tweaking I find that I need to do. Just be sure to keep in mind when coding your HTML, that there's a direct relationship between the structure of your page and the structure of your CSS. Without clean, consistent HTML, it's very hard to create efficient styles to control your site's presentation.
- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- String matching
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Matching patterns
- Writing efficient selectors