HTML and CSS Reference
In-Depth Information
When optimizing classes for reuse, it is important to consider their size. The goal is to
find the middle ground between classes that are not too broad or too narrow. Too-broad
classes lead to unnecessary repetition; too-narrow classes make it difficult to change
the design.
Global modifiers
There are certain style properties that are very commonly used. Instead of adding these
styles to every other class, it is sometimes better to create a general class with that single
style, which you can then apply to the elements that need it. For example, floating
elements to the left or right is such a common operation. These styles are well suited as
global modifiers.
.left { float: left; }
.right { float: right; }
When you want an element floated to the right or left, you can simply add one of
these classes to the element:
<div class="left">...</div>
Global modifiers such as these can be very useful when just a single style property
is needed. However, you should avoid combining several of them because it can become
difficult to adjust your design if all page items are composed of such small classes.
Style sheet structure
By organizing your style sheets, you can make it easier for yourself and other developers
to quickly understand the structure of your CSS. The larger a site becomes, and the more
developers are involved, the greater is the need to keep things well-organized. But it is
good practice to always keep your style sheets well-structured, regardless of the size of the
web site.
The top portion of a style sheet usually includes information about the file and its
author. This metadata should include the author's name and contact information. This
way, if any questions come up about the document, the developer currently working on
the site knows whom to ask. Other potentially useful metadata includes the file's creation
date, last modified date, version number, title, and description.
/*
* Title: My Theme
* Version: 1.2.3
* Author: My Name
*/
