Style Guide
Don't Hyphenate
All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.
Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.
Unit Consistency
CSS provides a broad selection of measurements for values. It's helpful toIt is helpful to keep unit definitions consistent across a single property definition, or unless you specifically need to override them. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.
CSS Legibility
Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.
Keep Things Ordered
Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.
An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.
No wrappers, no excess markup
UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accomodate extra styling.
If there is no other option than wrapping content in a containing HTML element, consider using a name that describes the content instead of the word wrapper or container.
Grammatical order
Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.
Use Border Box
Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly
Units and Measurements
Relatively Relative
EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.
Recursively Relative
Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.
Absolutely Relative
Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.
Techniques
Prevent Accidental Highlighting
Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.
Joining borders
Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.
Using transparency
RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.
Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba
Consider alternatives to floats
CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.
Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.
To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content
Onion Skinning
One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.