Components
To reduce complexity in your CSS, rely on utility classes whenever possible. For elements that necessitate additional custom styling, use component classes. For these components, you may wish to use a CSS methodology such as OOCSS or BEM.
Below are some common examples of components.
<button>
button, .btn {
display: inline-block;
background: #9fc74d;
display: inline;
color: #fff;
padding: 4px 6px;
border-radius: 4px;
transition: all .15s ease-in-out;
border: none;
outline: none;
text-decoration: none;
margin-bottom: 4px;
}
button:hover, .btn:hover {
background: #5bb12f;
}<form>
Use the grid to create the structure of your forms, and take advantage of its responsive breakpoint prefixing for control of its structure across all screen sizes.
Example Contact Form
Form Components
Use a library for tooltips and validation errors, such as bootstrap or hint.css, or do your own thing.
.modal
.box-gradient-overlay
When you want to add a soft dark overlay on an image so the text is more readable.
Other Components
Some components are truly one-offs. When you truly will not ever need to use that style anywhere else, such as in a graphic with absolutely positioned interior elements, use a very specifically named component class (.e.g. .animated-flying-tomato).