Оценка первой верстки (+ вопрос)

Рейтинг: 0Ответов: 1Опубликовано: 01.10.2014

Оцените верстку и написание кода. Возможно имеются ошибки, какие именно? Основной задачей для меня являлось сделать как можно точно по PSD макету. Нужно было расширение фона блоков по ширине на 100% экрана, а контент в них по центру.

  1. Валидацию прошел.
  2. По кроссбраузерности, вроде все нормально, только в IE 8 не поддерживается background: cover; и фоновая заставка второго блока не расширяется. Пока ищу варианты для IE8. Вот ссылка на страницу.
  3. Также сделали замечание, что во многих случаях было использовано позиционирование, убрал и поправил.

Вопрос: Как лучше использовать свои шрифты? Подгружать через файл стилей либо загружать в коде HTML через Google fonts, если такой шрифт есть в базе. Хотя не вижу разницы, оба варианта отлично отображаются при правильном использовании.

css html html5 css3 вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

Про шрифты

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

По верстке

  1. Я бы рекомендовал отказаться от наследования/каскадирования. К чему такие селекторы: #clients .comment p? Вы через две недели уже будете боятся перемещать .comment. Попробуйте с ходу разобраться, из каких учатков стилей собирается кнопка "Plans & Pricing". Гораздо лучше создать один класс .button и убрать все стили в него.
  2. #clients h3 аналогично, создайте вы просто класс .title и проставляйте заголовкам.
  3. НИКОГДА не следует матчится на теги. Используйте классы. Исключением может быть файл сброса дефолтовых стилей и какой-нибудь вырожденный блок, например, .wysiwyg, в контекст которого попадает текст, вбиваемый через WYSIWYG редактор.
  4. Опять же, зачем такой селектор #header, .your-domain, .wleft-row img, .com, .finner, .icon-1, .icon-2, .icon-3, .icon-4, #clients, .plans_inner { margin: 0 auto; }? Уберите в отдельный класс это свойство или группу свойств.
  5. Не вижу смысла использовать айдишники в верстке.
  6. Почитайте про БЕМ / верстку независимыми блоками / контекстно независимую верстку. Хотя, судя по коду, вы уже читали. Это точно ваш первый сайт или вы так рекламитесь?
  7. Завязывайте с обтеканием. Обтекания надо сбрасывать, обтекаемые элементы создают свой поток кода. Ну и вообще в целом не самое прозрачное поведение. Попробуйте inline-block.