Forum Moderators: not2easy
I have been assigned the task of refactoring a huge CSS file for a site. I know the basics of CSS but was hoping that there was a book you can recommend that would bring me up to the next level. Talking about the theory with examples on inheritance and how best to layout your selectors. Where best to place all the code for fonts so that each child element inherits these styles/rules. This would help me strip out unnecessary code/styling bloat currently in the file. Obviously it would be nice for the book to have some examples as it talks its way through. Any help on this matter is appreciated.
TIA
-Gs
- A later rule applied to the same element overrides a former.
- A more specific rule overrides a less specific rule, regardless of placement.
Remembering those two (and building the CSS file with that in mind) removes 99% of all the bloat. Don't ever specify another rule again, unless needed.
Also, remember that:
- Children inherit styling from their parents. They do not, however, inherit anything related to the "box" (border, width, padding, etc).
- If styling is important -- specify it. Do not rely on browser defaults -- ever.
Other than that -- organize things in a way that makes sense to you. Personally, I try to:
- Group selectors by type: IDs, general elements, classes (in that order, internally ordered by placement in markup [for IDs] or alphabetically [for elements and classes]).
- Alphabetically order the properties within each selector.
- Use shorthand in favor of longhand.
- Use separate lines for each property.
- Use ID and class names that "make sense". I tend to use class names like "center" or "left"; IDs like "Page" followed by children like "Page-Header" (perhaps with children "Page-Header-Logo" and "Page-Header-Navigation"), "Page-Sidebar", "Page-Content", "Page-Footer". Such names immediately hint about either their usage, or their placement within the document.
[edited by: DrDoc at 4:06 pm (utc) on Aug. 1, 2008]
