Рекомендованные сообщения

Здравствуйте. Постараюсь коротко. Это мой второй проект, просто тренировочный макет. Нет адаптива, нет css-рюшек, вроде плавных переходов, нет js и даже нет  половины состояний для элементов (но это потому, что их не было в макете). Html и css. Их и прошу оценить. Понимаю, что нормальным людям лень оценивать, поэтому у меня есть несколько более или менее конкретных вопросов. Надеюсь, не слишком странных:

  1. Меня беспокоит организация маргинов и паддингов. По-моему, она "некрасивая". Есть такое понятие "красивая организация отступов"?
  2. Мне кажется, что я нашла не лучшее решение для огромных тортов на фоне. Дивы с абсолютным позиционированием, из-за чего пришлось прописать body  overflow-x: hidden
  3. Стали бы вы делать плиточную раскладку категорий тортов grid'ами или это "микроскопом гвозди"? 
  4. Правильно ли я понимаю, что если мне захочется оживить слайдеры, то придется немного менять разметку и стили?
  5. Как вы относитесь к br в верстке? (-:  Например, в блоке выбора размера торта:
    <label class="cake-size" for="two-kg">
      <input class="hidden" type="radio" form="order-form" name="cake-size" id="two-kg">
      <span class="mass medium">2 кг</span>
      <span>23-24 см<br>(10–12 персон)</span>
    </label>
  6. Практикуется ли именование классов по БЭМ на лендингах? (-:

С дурацкими вопросами я закончила. Буду, благодарна за любой фидбэк относительно вменяемости разметки.

Ссылка на страницу и на гит

P.P.S. как склеить коммиты теперь? )

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, Alisa1711 сказал:

P.P.S. как склеить коммиты теперь?

Коммиты последовательные, а не параллельные. Значит что последующий содержит предыдущие изменения. «Склеивать» не требуется, так как в последнем есть все изменения.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 11.05.2018 в 23:22, Alisa1711 сказал:

Мне кажется, что я нашла не лучшее решение для огромных тортов на фоне. Дивы с абсолютным позиционированием, из-за чего пришлось прописать body  overflow-x: hidden

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

Большой торт вам было бы проще добавить фоном в section и там позиционировать через background-position , и тем самым вам не нужен блок с этим тортом и соответственно убрать overflow-x hidden

 

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Стали бы вы делать плиточную раскладку категорий тортов grid'ами или это "микроскопом гвозди"? 


Можно сделать и гридами, и флексами, и float блоками, разница в простоте подхода и поддержкой браузера если есть такие требования... Можно и гриды, как для практики, через годик, можно будет уже полным ходом их использовать без зазрения совести))))

 

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Как вы относитесь к br в верстке? (-:  Например, в блоке выбора размера торта:

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

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Правильно ли я понимаю, что если мне захочется оживить слайдеры, то придется немного менять разметку и стили?

Возможно, все зависит от текущей верстки, наследования и требования плагина, если вы будете использовать его...
Но это не значит что вам придется его переделывать с нуля))))

 

В 11.05.2018 в 23:22, Alisa1711 сказал:

Меня беспокоит организация маргинов и паддингов. По-моему, она "некрасивая". Есть такое понятие "красивая организация отступов"?

Главное поменьше юзать отрицательные значения в маржины...
 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 11.05.2018 в 00:22, Alisa1711 сказал:

Меня беспокоит организация маргинов и паддингов. По-моему, она "некрасивая". Есть такое понятие "красивая организация отступов"?

Со временем этому научитесь.  

 

В 11.05.2018 в 00:22, Alisa1711 сказал:

Мне кажется, что я нашла не лучшее решение для огромных тортов на фоне. Дивы с абсолютным позиционированием, из-за чего пришлось прописать body  overflow-x: hidden

Если поменять bg на intro wrapper например 6удет норм, и тогда лишний див сможете убрать.

 

В 11.05.2018 в 00:22, Alisa1711 сказал:

Стали бы вы делать плиточную раскладку категорий тортов grid'ами или это "микроскопом гвозди"? 

Я так понимаю это макет академии , а у них уже давно на flex'ах все курсы. Там же еще мобильная версия и планшетная, еще и контент прыгает местами, так что в этом случае весь макет думаю под flexbox заточен.
Grid'ы рано юзать еще. 
 

В 11.05.2018 в 00:22, Alisa1711 сказал:

Как вы относитесь к br в верстке? (-:  Например, в блоке выбора размера торта:

Я бы тоже так сделал еще и контакты внизу с br к примеру. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Спасибо за ответы. 

В 18.05.2018 в 10:53, vladmih сказал:

Главное поменьше юзать отрицательные значения в маржины...

А почему? В принципе они валидны и иногда могут помочь решить проблему. Например, в обсуждаемом макете отрицательные маргины могли бы решить проблему "заезжания" фон в интро секции "Наши торты". Или их юзанье может как-то аукнуться?

 

P.S. Вопрос не в тему, а на странице с точки зрения семантики всегда должен быть <header>? Например, в приложенной картинке можно сделать header'ом все до списка. А можно и вместе со списком . А можно двумя секциями intro  и features, например?  Т.е. на странице будет только main и footer. Кстати, если все, что до списка header, то без отрицательных маргинов не понятно как сделать фон, ибо весь последующий контент будет в main.

арбитраж.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 21.05.2018 в 20:48, Alisa1711 сказал:

Спасибо за ответы. 

А почему? В принципе они валидны и иногда могут помочь решить проблему. Например, в обсуждаемом макете отрицательные маргины могли бы решить проблему "заезжания" фон в интро секции "Наши торты". Или их юзанье может как-то аукнуться?

 

P.S. Вопрос не в тему, а на странице с точки зрения семантики всегда должен быть <header>? Например, в приложенной картинке можно сделать header'ом все до списка. А можно и вместе со списком . А можно двумя секциями intro  и features, например?  Т.е. на странице будет только main и footer. Кстати, если все, что до списка header, то без отрицательных маргинов не понятно как сделать фон, ибо весь последующий контент будет в main.

арбитраж.jpg

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

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

 

Изменено пользователем Alexej

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
В 21.05.2018 в 19:48, Alisa1711 сказал:

А почему? В принципе они валидны и иногда могут помочь решить проблему. Например, в обсуждаемом макете отрицательные маргины могли бы решить проблему "заезжания" фон в интро секции "Наши торты". Или их юзанье может как-то аукнуться?

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: angelseol
      Нужно написать с помощью, языка HTML, страничку в которой будут 6фреймов, 
      визуально представлено на картинки ниже.
      пожалуйста, помогите)

    • Автор: Katerina23
      Установила программу для chrome, позволяет просматривать в браузере как бы выглядел сайт на телефоне и у меня не получается прописать стили, чтобы спрятать боковое меню?
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .... в стилях style.css
      @media screen and (max-width: 600px) { .menu-niz-1{ display: none; } } меню которое надо убрать
      <div class='menu-niz-1'> <!--здесь меню--> </div>