0

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

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

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

2
  • 1
    Если используете <!DOCTYPE HTML>, тогда почему не используете теги - header, section, article, nav, footer и др.
    – soledar10
    1 окт 2014 в 16:41
  • Да, Вы правы. Пока только учусь, теперь буду применять html5 элементы.
    – alikitto
    1 окт 2014 в 17:45

2 ответа 2

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.
7
  • Спасибо за столь подробный ответ! Про шрифты теперь понятно :) 1. А что делать тогда, когда у всех блоков разные стили p? Создавать для каждого параграфа свой личный класс со стилем?<br> 3. Вместо такого кода: ul li{}, лучше сделать так .list{}? 4. То есть лучше создать отдельный класс типо: .center { margin: 0 auto; } И применять так: <div class="header center"></div> 5. Насчет этого сейчас почитаю :) 6. Куда мне рекламироваться, когда у меня куча проблем в вёрстке :) 7. До этого я использовал в большинстве случаев позиционирование, потом перешел на float. Но всегда знал, что-то не то делаю.
    – alikitto
    2 окт 2014 в 6:07
  • И как насчет bootstrap?
    – alikitto
    2 окт 2014 в 10:53
  • 1. У параграфа, по идее, только отступ должен быть из стилей. Так что все настройки текста должны прийти от родителя. Есть вот у вас, например, есть блок для статьи .article, то в нем прописаны стили текста. Внутри параграфы получают стили от статьи. Есть у вас, напрмиер, блок для превью ленты новостей .feed, то в нем прописаны другие стили, а параграфы внутри их так же получают стили.
    – Cypher
    10 окт 2014 в 14:24
  • 2.Да, только тогда .list {} и .list__item {} Повторюсь, что если это кусок контента, вбиваемый, например, через wysiwyg редактор, то конечно же никто не будет проставлять эти классы, набивая статью в админке. В этом случае уже можно заматчиться на ul или li, но только в контексте того блока, в котором у вас контент. Я вычленяю такие куски блоком .wysiwyg в контексте которого тегам уже проставлены стили - буллеты списков, отступы и т.д.
    – Cypher
    10 окт 2014 в 14:25
  • 3. Конкретно для этой задачи можно создать блок .region / .column / .wrapper, в него прописать width: 960px; padding: 0 20px; margin: 0 auto; будет у вас такой независимый ни от чего блок задающий колонну сайта. В него уже пихать шапки, тела страницы, подвалы.
    – Cypher
    10 окт 2014 в 14:26
0

Лучше добавлять через файл стилей. Не очень хорошо, когда подтягиваются файлы из сторонних ресурсов.

2
  • 1
    согласен, по возможности, нужно делать проект изолированным от сторонних ресурсов.
    – user12902
    1 окт 2014 в 14:43
  • Эм, практика CDN c вами категорически не согласна.
    – etki
    2 окт 2014 в 0:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.