Styling Guidelines
The more of these “best-practices” you follow, the easier your job will be.
- Style the smallest view first. Work outward, pulling the view wider until something gets ugly, create a media query, and fix it.
- The design dictates the breakpoints, NOT the device size. Popular device sizes change constantly, better to make the design expand to fit everything.
- Work from the outside of the page and work your way-in so you can inherit as much as possible and add only what’s needed.
- Define the default font-style as a % value and assign it to the body tag so users can scale. All measurements in the document should be defined with “EM” values (accept line widths, use “px”).
- Media Queries should always be defined with EM values.
CSS Rule Anatomy
CSS Selectors
Selector | Examples | Name | Notes |
---|---|---|---|
> |
a > b a > b > c
|
Child | Matches when element B is one level below (the child) of element A. |
CSS Tags
<style>/* CSS code here */</style>
<link rel="stylesheet" name="myStyles" href="myStyles.css">
The name attribute is optional and for humans only.
W3: HTML5 link
MDN: link
CSS Reset
The best way to gain complete control over CSS styles in a project is by resetting or zeroing-out all default browser styles. This removes any variance which different browsers apply, and allows for a consistent cross-browser base on which you can begin building.
There are a few theories on the best way to do this. I prefer to zero-out everything and add only what I need back-in, and my tool of choice is Eric Meyer’s reset code.
I have customized Eric’s script in the example below to suite my needs but you can find the original version here.
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,
em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, main, mark,
menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span,
strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,
tt, u, ul, var, video {
background:transparent;
border: 0;
box-sizing: border-box;
font-size: 100%;
font: inherit;
margin: 0;
outline:0;
padding: 0;
text-rendering: optimizeLegibility;
vertical-align: baseline;
}
body {
line-height: 1; /* No unit defined (this is done on purpose). */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
main, menu, nav, section {
display: block;
}
/* One of the good use cases of !important. */
[hidden] {
display: none !important;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Clear Fix
.group:after {
content: "";
display: table;
clear: both;
}
Responsive Images
img.responsive {
max-width: 100%;
-ms-interpolation-mode: bicubic;
}