CSS and SASS

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.

Selector	Examples	Name	Notes
>	a > b a > b > c	Child	Matches when element B is one level below (the child) of element A.

<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

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;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

img.responsive {
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
}