2. Сброс стандартных стилей браузеров

Один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

3. CSS3 градиенты

Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);

4. CSS3 Transform

Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.

-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);

5. Свой @font-face

Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.

@font-face{ 
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#webfont') format('svg');
}

h1 { font-family: 'MyFont', sans-serif; }

6.  Мета-теги адаптивной верстки

Важные мета-теги для корректной работы адаптивного макета

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

7. HTML5-медиа Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 
  <s_ource src="media/video.mp4" type="video/mp4"></s_ource> 
  <s_ource src="media/video.webm" type="video/webm"></s_ource> 
  <s_ource src="media/video.ogg" type="video/ogg"></s_ource>
</video>
<audio controls="controls" preload="none">
  <s_ource src="music.ogg" type="audio/ogg"></s_ource>
  <s_ource src="music.mp3" type="audio/mpeg"></s_ource>
</audio>

8.  Классы для упрощения верстки

Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:

.float-left /* Or whatever name you like */ {
    float: left;
}

.float-right /* Or whatever name you like */ {
    float: right;
}

Или отображением элементов:

.hide {
    display: none;
}

.show {
    display: block;
}

9. Сниппеты дизайна

Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.

.content {
    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.title {
    font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}

10. Сниппеты разработки

Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* IE6/7 support */
.clearfix {
    *zoom: 1;
}

Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:

.break {
    -ms-word-break: break-all;
    word-break: break-all;

    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}

Переносы текста в теге pre:

pre {
    white-space: pre-wrap;       /* Chrome amp; Safari */
    white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

11. Подготовка страницы для печати

Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:

@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;

        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }

    a {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")"; 
    }

    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}

<!-- SVG version of grayscale filter: desaturate.svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0  0  0  1 0"/>
    </filter>
</svg>

Использованные материалы:

• 8 Code Snippets for New Website Projects
• Kick-Start Your Project: A Collection of Handy CSS Snippets
• Сайт CSS-Tricks

Взято с Хабра