Штембуляк Андрей.

-Секретный ингредиент моего секретного ингредиентного супа... не существует! Нет его! Никакого секретного ингредиента!
-Постой-постой, так мы готовим обычную лапшу, не добавляем ни специй,ни особенного соуса?
-Да не за чем, Чтобы сделать что-то особенное, нужно поверить, что это особенное! (Кунфу панда)


К написанию данной статьи меня ( жутко не люблю подобные предисловия сподвигла предстоящая командная работа над новыми шаблонами для MaxSite.
Структуру шаблонов в этой статье мы рассматривать не будем тем более, что написать об этом более внятно и доступно, чем отец основатель у меня вряд ли получится. Кому интересно информацию по этому вопросу можно посмотреть в разделе MaxSite CMS для чайников. Разумеется, что стратегию CSS можно использовать на любом проекте, а не только на движке MaxSite.
Итак, вперед к стандартизации CSS кода и взаимопониманию создателей сайтов!

Для начала договоримся, что весь CSS будет находится в одном файле. Это не совсем удобно для разработчика, но уменьшает количество обращений к серверу.

Пункт первый или убей их всех!

Сбрасываем стандартное поведение для элементов нашего макета. Это делается из-за того, что дефолтное отображение элементов DOM в разных браузерах - разное. Более подробно на этом останавливатся не будем - в сети об этом написано достаточно много. Существует несколько вариаций, но суть та же.

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    line-height: 100%;
    background: transparent; }

*:focus { outline: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

Пункт второй - фундамент.

Здесь мы работаем всего с двумя тэгами, зато какими! html Здесь мы добиваемся постоянного присутствия вертикального скрола. body Для удобства выставляем font-size: 62.5%, теперь 1.0em теперь равен 10px. Самоочевидные свойства типа color в рамках этой статьи мы рассматривать не будем, кому что непонятно, спрашивайте, пожалуйста, в комментах

html {
    height: 100%;
    margin-bottom: 1px; }

body {
    font-size: 62.5%;
    line-height: 62.5%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #363636;
    background-color: #fff; }

Третий и четвертый пункт, по сути, выполняют одну задачу. Если в первом пункте мы сбросили стандартное поведение элементов, то здесь мы вновь его прописываем, но уже точно зная, что после этого во всех браузерах элементы должны отображаться одинаково.
Небольшое, но принципиальное отличие заключается в том, что часть элементов прописывается относительно всего документа, а часть относительно контентного контейнера. Понятно, что в подавляющем большинстве случаев тэг strong должен быть жирным (font-weight: bold) вне зависимости находится он в контентной или в другой области сайта, но если взять списки ul к примеру, то здесь ситуация несколько иная. В контентной области список должен выглядеть как список, но учитывая, что его используют и в конструкции сайта (в меню), то стандартное отображение будет нам только мешать.
Разумеется, что грань здесь относительная и многое зависит от исходного дизайн макета, но основываясь на своем опыте я остановился именно на этой схеме.

Пункт третий - глобальная стандартизация.

/* LIST */
ol, ul {
    list-style: none;
    position: relative;
    display: block;
    clear: both; }

/* TEXT */
strong         { font-weight: bold; }
em             { font-style: italic; }

/* FORM */
input, textarea, select {
    border: 1px solid #8DD0D9;
    color: #555;
    font: normal 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
    background-color: #fff;
    margin-bottom: 5px; }

input.button { cursor: pointer; }

input.radio, input.checkbox {
    border: 0;
    padding: 0;
    background: transparent; }

textarea, input.text, input.password { padding: 0.13em 0.5em; }

option { padding: 0 0.4em; }

/* H */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1, h2, h3, h4, h5, h6 {
    padding: 1em 0;   
    font-weight: bold;
    text-decoration: none;
    font-family: Trebuchet, Tahoma, Arial, sans-serif; }

h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* LINKS */
a:link,
a:visited, a:focus, a:hover, a:active {
    color: #5E8C2F;   
    text-decoration: underline;
    cursor: pointer; }
 
a:hover     { text-decoration: none; }
a:visited { color: #1A4701; }

/* HR */
hr, .hr {
    display: block;
    clear: both;
    background: #ccc;
    color: #ccc;
    width: 100%;
    height: 1px;
    border: none; }

Пункт четвертый - стандартизация контента.

/* LIST */
.page_content ul {
    margin-left: 2.35em;
    list-style-position: outside;
    list-style-type: disc; }

    .page_content ul ul, .page_content ul ol {
        margin-left: 2.35em;
        list-style-position: outside;
        list-style-type: circle; }

    .page_content ul ul ul, .page_content ul ol ol, .page_content ul ul ol, ul ol ul {
        margin-left: 2.35em;
        list-style-position: outside;
        list-style-type: square; }

.page_content ol {
    margin-left: 2.35em;
    list-style-position: outside;
    list-style-type: decimal; }

    .page_content ol ol, .page_content ol ul {
        margin-left: 2.35em;
        list-style-position: outside;
        list-style-type: lower-alpha; }

    .page_content ol ol ol, .page_content ol ul ul {
        margin-left: 2.35em;
        list-style-position: outside;
        list-style-type: lower-roman; }

.page_content ul li, .page_content ol li { line-height: 1.4em; }

/* TABLE */
.page_content table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%; }

.page_content th, td {
    text-align: left;
    font-weight: normal; }

.page_content caption {
    text-align: left;   
    font-weight: 900; }

.page_content th, td { padding: 0.8em;  }

.page_content th, thead td { font-weight: bold; }

/* ELEMENT */
.page_content hr, .page_content ul, .page_content ol, .page_content dl, 
.page_content pre, .page_content table { margin-bottom: 1.3em; }

.page_content dt {
    margin-bottom: 0.4em;
    margin-top: 0.8em;
    font-weight: bold; }

.page_content dd { margin-left: 1.2em; }

.page_content q {
    quotes: " 0ab" " 0bb";
    font-style: italic; }

    .page_content q:before { content: open-quote; }

    .page_content q:after { content: close-quote; }

.page_content blockquote { padding-left: 2em; }

    .page_content blockquote *:first-child:before { content: "201C"; }

    .page_content blockquote *:first-child:after { content: "201D"; }

.page_content del {
    text-decoration: line-through;
    color: #667; }

.page_content ins { border-bottom: 1px solid #ccc; }

.page_content address, .page_content dfn, .page_content var { font-style: italic; }

.page_content acronym {
    text-transform: uppercase;
    border-bottom: 1px dotted #667; }

.page_content abbr {
    text-transform: uppercase;
    border-bottom: 1px dotted #A9A9A9;
    cursor: help; }

.page_content a abbr, .page_content a acronym { border: none; }

.page_content sup { vertical-align: super; }

.page_content sub { vertical-align: sub; }

.page_content small, .page_content sup, .page_content sub { font-size: 95%; }

.page_content big { font-size: 110%; }

.page_content tt, .page_content samp, .page_content code, .page_content kbd, 
.page_content pre { font-family: Courier, "Courier New", monospace; }

.page_content code, .page_content samp, .page_content pre { font-size: 95%; }

.page_content p {
    margin: 0 0 1em 0;
    text-align: left;
    line-height: 1.3em; }

Пятый пункт - хелперы.

Здесь собраны классы, которые используются практически в любом проекте. Список можно значительно расширить, но в определенный момент я понял, что надо остановится и оставил только самое необходимое.

/* HELPERS */
.clear,
.clear-left,
.clear-right {
    clear: both;
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0; }

.clear-left     { clear: left; }
.clear-right     { clear: right; }
.debug {
    color: #c30000;
    padding: 10px 20px;
    border: 2px solid red; }

.b1r                 { border: 1px solid red; }
.float-right     { float: right; }
.float-left     { float: left; }
.no-border         { border: 0 none!important; }
.no-background { background: transparent none; }
.hidden             { display: none; }

Еще можно добавить пару строк для уменьшения вероятности Clickjacking Attacks.

iframe { filter: alpha(opacity=100) !important; 
            opacity: 1 !important; }

Дальше идет верстка проекта согласно дизайн макету.
Вот собственно говоря и все. Ничего секретного здесь нет, CSS код может посмотреть каждый. Ничего нового я не изобретал, просто систематизировал имеющиеся знания на свое усмотрение, буду только рад если кому нибудь это поможет

Скачать CSS архив с примером.

Отдельное спасибо BrutS´у и Sp1r1t´у за содействие в создании представленной структуры CSS.