• Главная  
• Вредные советы  
• Мои первые ошибки или «Как правильно верстать»

Мои первые ошибки или «Как правильно верстать»

Уже как два года занимаюсь версткой, и в основном только ей. И уже накопил громадный опыт по CSS/HTML. И хочу поделиться некоторыми секретами и важными вещами для любопытных. 

Каждый начинающий изучает CSS с помощью интернета. СТОП! Не стоит этого делать. Я рекомендую сначала купить книгу «CSS — Каскадные таблицы стилей». Чтобы понять, какие параметры существуют для селекторов. После трехкратного прочтения, уже можно искать дополнительную информацию по CSS в интернете.

Смысл этой статьи — указать на те ошибки, которые я делал по глупости в начале фриланса.

Селектор *

Никогда не используйте в качестве селектора «*». Это принесет большие проблемы по написанию стилей для всех элементов, так как данное определение устанавливает для всех селекторов размер шрифта в 11px. А как же заголовки, параграфы, ячейки и так далее? Это, конечно, можно исправить с использованием правила «!important»:

* {
    font-size : 11px
}
td {
    font-size : 12px !important
}

Это же относится и к цвету текста. Не использовать в при данном селекторе правило color, т.е.:

* {
  color : #000
}

Длинные описание стилей

.box {
    margin-right : 20px;
    margin-left  : 20px;
    margin-top   : 3px;
}

C этого начинает каждый студент, и я начинал с этого тоже. Эту запись можно упростить, если вы, конечно, прочли «CSS — Каскадные таблицы стилей»:

.box {
    margin : 3px 20px 0
}

Это был пример для отступов, это касается также полей и шрифтов.

Длинные HEX цвета

.color {
    color         : #000000;
    background    : #ffffff;
    border-bottom : #ff0000
}

Согласно W3C-стандартам, эту запись можно сократить. Правило простое: если в HEX три пары символов, удаляем каждый второй повторяющийся.

.color {
    color         : #000;
    background    : #fff;
    border-bottom : #f00
}

Удаляйте последнюю точку с запятой

.color {
    color         : #000;
    background    : #fff;
    border-bottom : #f00;
}

Последнее описание стиля работает и без последней точки с запятой.

.color {
    color         : #000;
    background    : #fff;
    border-bottom : #f00
}

Не используйте RESET CSS

Если, конечно, вы не сами это написали. Есть пример в Eric A. Meyer. Если вы все-таки решите использовать, то вы получите самый большой гемор для себя в плане верстки. Так как в перечне есть практически все селекторы. Грубо говоря, вы установите все значения по умолчанию.

И, соответственно, вы не сможете для определенной ячейки выставить выравнивание по правой стороне с отступом, так как первым будет обрабатываться reset, и у него будет приоритет перед уникальным правилом. И чтобы исправить эту ошибку вам придется использовать правило «!important», о котором я написал выше.

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

Господа, учитесь.