Requirements

Требования к CSS

Применение twitter bootstrap

Все стили базируются на twitter bootstrap.

Уникальный дизайн обеспечивается расширением классов имеющихся в bootstrap путем наследования.

Например, применяется класс .thumbnail (стандартный класс bootstrap) и его необходимо расширить и/или переопределить, то применяется следующее решение

/*custom.css*/

.thumbnail.custom-list{
/*новые стили*/
/*переопределение имеющихся стилей*/
}

Расширение и переопределение исходных классов запрещено.

Пространство имен

Элементам DOM присваиваются классы с названиями, соответствующими их назначению.

Например, логичными являются следующие названия:

Необходимо исключать случаи назначения классов, одноименных с названием классов внешних библиотек, например bootstrap, если нет цели присвоить элементу стили соответствующей библиотеки.

Применение id для стилей запрещено. Все стили должны присваиваться атрибуту class.

Простые названия классов (.box, .item, .name) можно использовать только в связке с вышестоящими классами, которые определяют назначение объекта (<div class="product-list-block" ...). Определять стили односложным названиям классов (.box, .item, .name) без привязки к вышестоящим классам запрещено.

/*Нельзя*/
.box{
}

/*Можно*/
.product-list-block .box{
}

Определять стили тэгов без привзяки к вышестоящим классам запрещено.

/*Нельзя*/
a{
}

/*Можно*/
.product-list-block a{
}

Иерархия и наследование

Тема сайта

Для определения “темы” сайта тэгу body назначается класс. Например <body class="theme-1"...

Размеры и оформления заголовков h1, h2 ..., списков ul, ol, ..., ссылок a, типовых элементов, в т.ч. связанных с библиотеками, определяются в файле common.css, который доступен для всего сайта. Данные теги и классы определяются как дочерние от класса темы:

/*Theme 1*/
.theme-1 h1{

}
.theme-1 h2{

}
.theme-1 a{

}
.theme-1 .btn{

}
/*и т.д.*/

Стилизация компонентов

Для уникальной стилизации элементов внутри конкретного блока (например, списка товаров, элементы которого должны выглядеть особым образом), назначается класс самому верхнему элементу такого блока. Кастомизация стилей дочерних элементов описывается с помощью дочерних классов. Например

<!-- .html -->
<body>
    <!-- ... -->
    <div class="product-list-block">
        <ul class="product-list">
            <li>
                <div class="product-item">
                    <img class="product-image"/>
                    <a class="product-name"></a>
                </div>
            </li>
        </ul>
    </div>
    <!-- ... -->
</body>

/*.css*/
/*Product list*/
.product-list-block ul.product-list{

}
.product-list-block ul.product-list>li{

}
.product-list-block .product-item{

}
.product-list-block .product-item img.product-image{

}
/*и т.д.*/

Структура файлов