Советов по созданию таблиц стилей много, постараюсь их структуризировать.
1. Меньше эффектов, больше логики
При верстке макета дизайна старайтесь уходить от излишних эффектов (ховеры, скрипты и пр.), задумайтесь об их нужности, возможно, супер-пупер-аякс-поиск не упростит, а наоборот усложнит работу с сайтом для пользователя.
Перед началом работы над макетом подробно планируйте для себя структуру кода, что и как вы будете размещать, используйте wrap-контейнеры для упрощения создания таблицы стилей.
Старайтесь писать css логично, группируйте элементы, тогда вам будет легче разобраться в css-файле через некоторое время, если вам нужно будет с ним снова работать.
2. Не используйте хаки без надобности
Не нужно, при каждом удобном случае, писать хак для отдельного браузера (читаем - IE6), поищите в сети, 99%, что этот баг известен и для него есть решение, причем самое удобное и простое.
3. Следите за отступами
Браузеры, к сожалению, временами используют разные отступы (margin, padding) для разных элементов, поэтому большинство трудностей при верстке создют именно они.
Так что советую вам обнулять отступы для всех тегов:
| Код: |
| * {margin: 0; padding: 0;} |
Или, если нет такой возможности, при появлении ошибки в первую очередь обратить внимание на отступы
4. Не увлекайтесь абсолютным позиционированием
Да, position: absolute; дает возможность повесить блок именно туда, куда хочешь, причем попиксельно, однако этот метод имеет много недостатков.
Абсолютно спозиционированый блок висит именно абсолютно и расчитан он на фиксированую ширину и высоту. Если в процесе работы с макетом вы выйдете за эти рамки, вам придется крепко призадуматься об исправлении макета.
Так что для тех блоков, о которых вы точно не знаете, что они будут фиксироваными, лучше использовать float’ы.
5. Не “дивная” верстка
Пишите код семантически верно, не нужно тыкать div’ы куда не попадя. Расчитывайте на то, что макет ваш встретит поисковый бот, и подумайте какой код для него будет понятнее и ближе.
этот:
| Код: |
<div id="header">
<div class="bold">Heading</div>
</div>
<div id="subheader">
<div class="bold">Sub Heading</div>
</div>
<div>This is the content</div> |
или этот:
| Код: |
<h1>Heading</h1>
<h2>Sub Heading</h2>
<p>This is the content</p> |
И какому сайту он даст предпочтение при прочих равных.
6. Каскад
Почему CSS - это каскадные таблицы стилей, и почему это так удобно? Смотрите.
1. У нас есть вот такой код
CSS:
| Код: |
| a.link{color:red;text-decoration:none} |
HTML:
| Код: |
<ul>
<li><a class="link" href="#">Link1</a></l>
<li><a class="link" href="#">Link2</a></li>
<li><a class="link" href="#">Link3</a></li>
<li><a class="link" href="#">Link4</a></li>
<li><a class="link" href="#">Link5</a></li>
<li><a class="link" href="#">Link6</a></li>
</ul> |
2. А теперь применим каскад для него
CSS:
| Код: |
| #nav a {color:red;text-decoration:none} |
HTML:
| Код: |
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul> |
Как видите, мы получили такой же эффект, но все стало меньше и проще.
7. Используйте валидатор
Старайтесь на каждой стадии разработки проверять ваш код
валидатором, таким способом можно отлавливать возможные ошибки значительно быстрее. Ну и вобще, сделаем веб лучше.
8. Упрощайте код
Каждый раз когда вы хотите добавить еще один “рапорочный” блок, задумайтесь, может он не нужен, может вам хватит того кода, который есть. Не лепите излишеств.
Данный пункт не нужно читать верстальщикам, которые не учавствуют в интеграции макета в сайт. Все предусмотреть невозможно, поэтому лучше больше избыточности, чем до-о-олгий дебаг и недовольный заказчик.
9. Гибкость
Учитывайте, что ваши пользователи могут использовать zoom для вашего макета, поэтому не делайте все с фиксированой шириной/высотой, это может создать неудобства.
10. Поддержка браузеров
И не надейтсь, что ваши пользователи используют только тот браузер, который установлен у вас. Проверяйте макет во всех современных браузерах и их предпоследних версиях, как минимум. Если лень ставить кучу программ можете использовать
этот замечательный сервис.
http://www.igorr.name/2007/03/28/uproschaem-zhizn-verstalschika-10-sovetov-po-css/
