Где взять примеры хорошей верстки?

Часто я стал тут вопросы задавать :) Извините уж :) Вопрос вот в чем. Где взять примеры качественной верстки? Как верстать, чтобы было грамотно и современно? Читаем любимый гугл, там с каждого угла по разному кричат) Подскажите, пожалуйста.
С уважением, Андрей.
  • Вопрос задан
  • 14892 просмотра
Решения вопроса 2
linoleum
@linoleum
Тут скорее нужно ориентироваться не на примеры, а на критерии.
Их, вообще, бесконечно много, но вот стоит обратить внимание:
1. Глубина вложенности элементов. Она должна быть минимальной. Перед созданием каждой обертки подумайте, а дейстивтельно ли она нужна? Или можно обойтись без нее?
2. Как более общий варант первого пункта - элементов должно быть как можно меньше. Максимально используйте before и after, не плодтие лишние сущности в коде. Все, что можно сделать через CSS - делайте через CSS (например, text-transform: uppercase вместо капса в html)
3. Правильные имена классов. Имя класса должно описывать, чем является элемент, а не как он выглядит, и быть понятными - .read-more-link вместо .krasnaja-ssilochka
4. Код должен быть семантичным. Для меню используйте списки, для текста - параграфы и т.п.
Не нужно верстать все div'ами.
5. Все, что может быть сверстано - должно быть сверстано, а не вставленно картинкой. (разумеется, с учетом кроссбраузерности)
6. Элементы (а также css селекторы) должны быть максимально независимыми.
Это что касается html.
Про css особо нечего сказать, разве что отдельные части лучше разделять комментариями вроде того /***** HEADER *****/, /***** CONTENT *****/. В общем, чтобы было понятно, где что. Также стоит везде где можно использовать сокращенную запись правил - padding: 1px 0 3px;
и, да - все селекторы должны быть максимально короткими. Как правило, это либо просто имя класса, либо имя класса плюс элемент и ещё возможно с каким-то состоянием:
.header, .logo h1, .menu a:hover. Всегда старайтесь сокращать.
Это по коду. По внешнему виду - тут уже сами смотрите. Советую только обратить внимание на следующие вещи:
1. Сылки должны выделяться подчеркиванием. Если оно было - убирать, и наоборот.
Очевидная вещь, он ей часто пренебрегают.
2. Прибивайте футер к полу.
3. Используйте свойство letter-spacing для придания тексту большей читаемости.
4. Если текст расположен поверх картинки или вообще фон под текстом может как-то изменяться, то добавляйте небольшой text-shadow - тогда текст точно будет контрастировать и его можно будет прочитать.

Это то, на что я обращаю внимание в своей работе. А вообще - сколько людей - столько и мнений. Я вот, например, в верстке почти не использую float. Только по прямому назначению - обтекание картинки текстом. А верстаю всё inline-block'ами, чего и вам желаю:)
Ответ написан
aen
@aen
Keep calm and 'use strict';
А потому что нет какого то единого критерия хорошей верстки. Есть только валидаторы + некоторый набор базовых принципов, которые стоит придерживаться. (Например, верстать не таблицами, а div'ами).

Сейчас даже методологий несколько: БЭМ, SMACSS, MCSS, OOCSS.
Почитайте про них, выберите то, что больше по душе, а может быть какую то субъективно-золотую середину.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
benderskiy
@benderskiy
Выберите некоторую логику, придерживайтесь её, старайтесь сделать всё легко воспринимаемым и однообразным, не меняйте подход в середине проекта, смотрите, как делают в бутстрапе или еще где-нибудь, где все интуитивно и просто, не плодите сущности без необходимости, перенимайте то, что считаете «good practice». Бесполезный ответ, но лучшего я не знаю )
Ответ написан
dmko
@dmko
откройте любой сайт где продают шаблоны и посмотрите как там сделано :)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы