Оцените верстку?

Question

[oleg-s]

Сделал для себя учебную верстку по бесплатному макету. Вопросы на которые, возможно, мне смогут дать ответы более опытные верстальщики:
- Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?
- К сожалению, не удалось сделать, чтобы макет абсолютно соответсвовал PixelPerfect, особенно это заметно в тексте. Тестировал в Chrome 55.0.2883.87 (Windows 10). Подскажите на примере какого-нибудь блока в чем я делаю ошибки
- Так же хотелось бы прочесть любую конструктивную критику

Небольшое отступление, добавлю обязательно еще мобильный вариант и слайдеры, это в процессе. Хотелось бы узнать ошибки на том этапе, что выполнен.

Исходники https://github.com/oleg-tgn/html-template-beautifu...
Демо https://oleg-tgn.github.io/html-template-beautiful...

Comments

[oleg-s]

Огромное спасибо всем прокомменировавшим! Для меня это очень важно. Честно говоря, даже не ожидал такой оперативной реакции. Буду работать над замечаниями:)

[oleg-s]

Ознакомился со всеми ответами. Спасибо за ваше внимание! Однако, очень хотелось бы увидеть от комментирующих ответы, предложения и замечания по первым двум пунктам.
А так же не вижу смысла останавливаться на проблемах адаптивной верстки. Как было сказано выше ей вообще еще не занимался.
Были комментарии с замечаниями, почему не использовал теги html5 и почему не использовал списки, а ставил вместо них блоки. Ребята, спасибо, я это исправлю. Однако, мне хотелось бы знать, кроме эстетической части если как-то особый смысл заменять блоки, на эти элементы? Вопрос может покажется глупым, но все же

Answer 1

[Андрей Федоров]

#1

#2

#3

Comments

[Дмитрий Гормаш]

Ну, 1 и 2 скрин еще можно пропустить, ведь автор уточнил, что мобильного варианта нету. Только, вот непонятно, мобильный вариант, это адаптация или второй мобильный шаблон.

[oleg-s]

Дмитрий Гормаш: Мобильного макета не было, в дальнейшем просто адаптирую этот дизайн. Думаю, его адаптивная верска может заслужить отдельной темы:)
Андрей Федоров По поводу 1 и 2, это будет решаться в дальнейшем при помощи media запросов. Вот 3 это интересная вещь. Та же самая верстка локально не уезжает, когда загрузил на гитхаб уехала. Осталось разобраться почему.

Answer 2

[Александр Шемаханов]

Проверил через сервис Google:
Результат Mobile-Friendly Test
Проверил с телефона:
Chrome 55.0.2883.91/854x480px
Все элементы на своих местах, но текст неудобочитаемый

Comments

[oleg-s]

Александр Шемаханов спасибо за ссылку, это мне пригодится! Мобильной версткой еще буду заниматься отдельно. Дизайн будет адаптивным, когда закончу со всеми недоработками desctop версии

Answer 3

[Uwe_Boll]

единственное до чего можно докопаться это:
<div class="clear"></div>
и отсутствие тэгов figure и figcaption
и ТЫ недооценил силу списков

и за каким юхом ТЫ посылаешь форму Get' om

Comments

[Павел]

чем вам clear не понравился?

[Uwe_Boll]

mrusklon: потому что есть ::after и ::before

[oleg-s]

Uwe_Boll По figure, пожалуй, дельное замечание. Со смысловой нагрузкой всех новых тегов html5 я не сильно знаком, поэтому по привычке div-ы. Буду работать над этим.
в clear я ничего преступного не вижу, если можете поясните чем же он хуже чем, цеплять before на элементы?
О списках речь в gallery__preview? Опять же если можно поподробнее, в чем сила, брат?:)
Get в форме по дефолту, я его специально не прописывал. А это ведь только статика. Может быть прикрутится Post, может JavaScript будет эту форму обрабатывать. Не вижу смысла прописывать method="post" на этом этапе

[Uwe_Boll]

oleg-s: про списки я бы добрую половину дивов заменил бы на списки тот же span с классом "social-networks" про галерею тоже самое с gallery__preview а так же gallery__main-item и даже див с классом services ибо семантика.
А теперь про метод отправки формы скрипты могут не прогрузиться или юзверь зайдет с пятого осла
и скрипты банально не заработают и все данные будут видны третьи лицам или же вирусне которая чекает адресную строку и поэтому нужно обязательно указывать метод отправки формы

Answer 4

[Rsa97]

Порезанные сверху и снизу буквы в полях ввода, отсутствие min-width:

Comments

[oleg-s]

Rsa97 Что это за устройство? Какое разрешение и какой браузер? Если начали сжимать браузер пока текст не вылез за пределы, ну тут опять же упомяну, что к адаптивной верстке я еще не приступал.

[Rsa97]

oleg-s: Компьютер, Firefox. Да, сжатый. Но подсказки в полях ввода режет и в несжатом варианте.

Answer 5

[Дмитрий Гормаш]

Добавлю еще несколько скринов:
1.https://yadi.sk/i/GF4lco0w37ofzk
На фф текст в инпуте выглядит обрезным и textarea не фиксированных размеров.

2. https://yadi.sk/i/bxlx7D7s37oh4p
Зачем использовать картинку, если можно залить обычным цветом

3. https://validator.w3.org/nu/?doc=https%3A%2F%2Fole...
Тег img обязательно должен иметь alt.

4. Класс .wrapper - бесполезный. Примените к body заливку и все.

5. ИМХО не стоит прописывать селлектору .gallery display: inline-block;

6. В textarea при проверке через хром и фф отличается шрифт. В одном с засечками, в другом без.
Аналогичная ситуация с outline.

7. Футер по умолчанию разве не блок? Если не прав - подправьте.

8. Такие вещи лучше делать списком
https://yadi.sk/i/LfSdmtb237ospk

9. К не закрытым тегам типа input,img, link - стоит прописывать в конце "/"

10. https://yadi.sk/i/_tQ2_Tw037ovTC
Это, конечно, мелочь, и не играет никакой серьезной роли, но с выходом хтмл5, уже можно не прописывать type при подключении css

11. Конкретно по цсс ничего сказать особого не могу т.к. дело каждого, какие стили прописывать какие нет, но, единственное, это надо уметь правильно форматировать. Про это почитайте в интернетах.

Comments

[oleg-s]

@kanonir1886
1. Хорошее замечание! 1 буду фиксить. Второе textarea растянули специально или она так сама встала?
2. В макете картинка на фоне. Если приблизить, то будет заметно, что фон неравномерный, а как-бы "в полоску". Другое серьезное замечание можно было бы сделать по поводу размера этого самого фона. Я хотел сделать его маленьким 10x10 или хотя бы 100x100. Но видимо, я не мастер ФШ и каждый раз у меня заметно терялось качество, поэтому пока оставил так. Но, считаю, что надо это будет исправлять.
3. Хорошее замечание. Однако, я так точно и не знаю влияет ли этот показатель валидности сайта на что-то реально или нет. Ну кроме довольства или не довольства работой самого у себя:)
4. Назначение этого класса было в том, чтобы фоны могли чередоваться. Можно применить и ваше решение, но что мы выигрываем с этого я не очень понимаю
5. Там inline-block чтобы блок не схлопывался, потому что внутри блоки c float. Ваше решение?
6. Интересный момент
7. Если обратить внимание еще и на старые браузеры, то нет))
8. Пожалуй да:)
9. Нет, смотрите документации по этим тегам стандарта html5
10. Именно поэтому не прописываю
11. Пожалуйста, конкретнее? Про то, что где-то после } стоит перенос, а где-то нет. Это неправильно форматирование или имелось ввиду еще что-то?

Спасибо за подробный комментарий!

Answer 6

[Ankhena]

1. textarea растягивается и по вертикали и по горизонтали.

2. У body уже установлен color: #9b9b9b; зачем его еще несколько раз устанавливать для Welcome to my portfolio?

3. Есть классные теги section, article, figure, figcaption, main

4. У кнопки submit курсор должен быть "ладошкой" и хорошо бы какое-то изменение при наведении.

5. Не знаю, как точно надо в БЭМ, но лично меня бесят классы для h1 и h2 и т.д. если они всюду одинаковые.

6. Почему имя в форме пишется красным, а остальное серым?

7. Считаю, что placeholder должен исчезать при получении фокуса. (Тут 50 на 50, есть разные мнения)

8. .gallery-wrapper зачем фон картинкой?

хватит :)

Comments

[oleg-s]

1. Исправим!
2. Ок!
3. Прочитаю обязательно:)
4. Исправим!
5. Вот идея этой самой методологии, чтобы не привязывать стили к определенным элементам. Т.е. на все случаи вешать классы. Насколько я уловил ее суть и старался придерживаться. Отступил кажется только в паре мест
6. Опечаточка
7. Тут стандартное поведение placeholder, решил оставить:)
8. Не увидел:)

Спасибо за ваш комментарий!