cssing Архив » 5 советов верстальщику

5 советов верстальщику

XHTML/CSS, Общие

Принимаю всеобщее увлечение рекомендациями по вёрстке. Мои 5 советов верстальщику. Не тайные манускрипты, а всего лишь простые советы :)
Я в этом блоге только тем и занимаюсь, что пытаюсь дать полезные советы, потому слегка повторюсь.

1. Правильная замена на картинки

Заменяйте текст на картинки хорошими CSS-техниками, например, для кликабельного логотипа сайта, нужен такой html:

1. <h1><a href="#">Вау! Я логотип!<span></span></a></h1>

CSS:

1. h1 a{
2. width:250px;height:50px;
3. overflow:hidden;
4. display:block;
5. position:relative;
6. }
7. h1 a span{
8. position:absolute;
9. width:250px;height:50px;
10. top:0;
11. left:0;
12. background:transparent url(../img/kartinka.png) no-repeat 0 0;
13. }

2. Использовать табуляцию в CSS

Суть в табулировании селекторов в зависимости от иерархии. Чем более “глубокий” элемент — тем большим кол-вом табов он будет отделен.
Это на любителя, но попробовать совершенно точно стоит. Живой пример этого видно чуть выше, а вот так это выглядит издалека и вживую:

Мне нравится.
Как видно, иногда я пишу правила в одну строку, особенно когда подряд идут несколько правил с указанием лишь background

3. Выделенный текст

Очень простой и маленький приём. Иногда полезен.
Вот такой код:

1. <h2><span>Ищу ту, особенную!</span></h2>

В дизайне дано такое:

Выделенный красным “маркером” текст

Если попробовать решать задачу “в лоб”, пишем такое:

1. h2 span{background:red;padding:4px;}

получаем это:

Вторая строка “прилипает” к краю.
Мелочь, а неприятно

Вариантов решения несколько, наиболее простой таков:

1. h2{border-left:4px solid red;}
2. h2 span{background:red;padding:4px 4px 4px 0;}

Результат:

Правильно выделенный текст

Я ранее решал этот вопрос повторением фонового рисунка и паддингом для H2. Подсказал genn.

4. Относитесь к вёрстке с чувством юмора

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

1. <div class=”i-was-born-in-1494″>

Или

1. <div class=”usually-i-dont-use-such-a-long-names-for-classes-but-today-is-a-special-day”>

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

Желательно конечно, чтобы такой класс или айди встречался в коде лишь один раз. Впрочем, возможны варианты. :) Еще можно шутить прямо в CSS.

5. Доводите вёрстку до конца

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

__END__

Адресую Виталию Харисову, Александру Шабуневичу, Вадиму Макишвили, Владимиру Агафонкину.

Все советы

• Александр RMcreative Макаров
• Павел Коноплицкий
• Владимир Mourner Агафонкин
• Виталий Харисов
• Никита Селецкий
• Александр Исаков
• Алекс Iline
• Александр Шабуневич
• Юрий Дроздов
• The Webmakers Lounge
• Engelside
• Марат Таналин
• Вадим Макеев
• Юрий Артюх
• Павел Корнилов
• kizu.ru

XHTML/CSS, Общие