Внутренние стандарты. Верстка. 

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

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

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

Поддержка разных браузеров.

При верстке любого дизайна необходимо поэтапно проверять результат верстки в разных браузерах. Результат верстки должен соответствовать нарисованному дизайн-макету. Т.е. схема расположения элементов дизайна, цвета, шрифты, паддинги, маргины, другие стили должны быть максимально приближены к нарисованному дизайн-макету. Набор поддерживаемых браузеров определяется спецификацией конкретного проекта. По умолчанию нужно поддерживать следующие браузеры: Mozilla Firefox (1.5.0.7+), IE (6.0+).

Табличная верстка VS. верстка «на дивах».

Таблицы в HTML коде рекоммендуется использовать исключтельно для представления табличных данных. Табличные данные представляют собой набор полей (столбцы) и значений (строки) некоторого параметра.
Использование таблиц для форматирования элементов дизайна страницы не допускается.

Выравнивание элементов Check-box и Radio-button.

Элемент check-box должен быть выровнен по вертикали по центру относителньно label-а. Между самим check-box-ом и label-ом должен быть отступ. Тоже самое правило применяется и к Radio-button-ам.

Форматирование CSS классов.

Пример правильного форматирования CSS класса:

.message-success {
    background: #BFE894 url(../../images/success-bg.gif);

    color: #3F5A3F;
    font-size: 80%;

    padding: 4px 5px 4px 5px;
    margin: 0 0 20px 0;

    border: 1px solid #96d168;
}

Пояснения к вышеприведенному примеру правильного форматирования:

1. Название класса должно соответствовать смыслу элемента. Например, если это класс для таблицы кредиток в кратком виде, то надо так и назвать класс: «credit-cards-table-quick-view».
2. Название класса может содержать буквы латинского алфавита и знак «дэфис»(минус). Примечание: Символ «подчеркивание»(_), так же как и цифры в названии класса недопустимы.
3. После названия класса ставится «пробел» и «{»;
4. После имени параметра ставится двоеточие, а затем, перед его значением, ставится «пробел»;
5. После значение параметра ставится двоеточие и перевод строки;
6. Padding-и & Margin-ы указываются в одной строке (padding: 0 0 0 0), за исключением случаев перегрузки уже указанных padding и margin значений;
7. Отделяем переводами строки логические блоки класса. Обязательно отделяются Padding-и и Margin-ы, Border-ы, шрифтовые стили.

Оно надо? Или это все не работает?