Kornea Bauble


It's important not to overuse global resets since they can get in the way and it's hard to refactor them because they have far-reaching effects, but some global resets are legitimate. In the days before IE8, image links got assigned a border automatically, and the entire world has always been global-resetting that behavior. Nowadays, we don't need both color and underline to distinguish links, so I global-reset links to show underlines only on hover. Font family and size are another, but should not be micromanaged for individual elements globally. Err on the side of not having global resets. Many examples on the web offer terrible examples of CSS use, such as class="red". Elements and their classes need to be named semantically for what they are, not for their style. For example class="error-message". CSS is not just a more sophisticated syntax than font color="red", and it's not just a way of separating style from structure; it is also a layer of abstraction, but in order to be used as such, its elements and classes must be named with semantic clarity. Unfortunately, it is only a single layer of abstractions, since you cannot create abstractions from abstractions (cannot have one class include another). There are tools to work around this, but it's more trouble than it's worth. Therefore, while class="red" is terrible, there are a couple of global classes that are named for their style rather than for what they are. One is .structural, which removes margins, borders, padding, border-spacing, and list bullets, and is often useful. Another example is .form-table, which is very convenient for forms with tabular layouts (which is most of them). /* .structural */ .structural ,table.structural > * > tr > * ,table.structural > tr > * {margin:0; padding:0; border-style:none; vertical-align:top;} table.structural {border-spacing:0;} ul.structural {list-style-type:none;} I often find it useful to have 3 CSS files per page: global.css, standard.css or admin.css, and a page-specific CSS file. So for the page /account, we'd include /css/global.css /css/standard.css and /pages/account/account.css So for page /admin/users, we'd include /css/global.css, /css/admin.css, and /pages/admin/users/users.css
Copyright Val Kornea