leanniby / display-bem Goto Github PK

Использовать media query для конкретного элемента

   .block
      &__el1
         .....
         @include tablet
               
        &__el2
         .....
         @include tablet

вместо

     .block
         .....
         @include tablet
              &__el1
              ....
              &__el2

Создай основной файл для sass style.sass и импортируй в нем нужные sass файлы

• Добавить meta tag https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
• Поправить отображение на мобильных устройствах
• Использовать media query для tab-content__item-link что бы выводилось по 4, по 3(33% от ряда), по 2 в ряд(50%) в зависимости от размеров экрана,
• Использовать media query для пары других блоков, выбирай на свое усмотрение

Сделать плавную анимацию на ховер для меню и кнопок
Для меню добавить при наведении нижнюю полоску 3px

Удалить селектор .header > *
Можно использовать

• Переменную $headerElemPaddingTB: 30px и установить отступы для конкретных блоков header__logo, header__social-mendia ....
• Создать новый класс header__item c нудными оступами

В фоотере меню должно быть не зависимым от главного меню, должно иметь уникальное имя

Переммести все стили в отдельную папку sass or style
Весть js в отдельную папку js/scripts/src
JS вместе со стилями обычно помещают если используются bem-tool, он в основном подходит для очень больших проектов подходит. JS вместе со стилями актуально коглда используют фреемворки с компонентным подходом

Потренировать использовать flex переписав home.html с использованием flexbox для большинства элементов
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• Для элементов jQuery использовать префикс $. var carousel = $('.carousel');
• Не использовать анонимные функции длиннее 2-3-х строк. При ошибке не получим имя функции в отладчике, сложнее читать код, нельзя переиспользовать. Лучше объявить все функции в одном месте.
• Обработчики лучше вешать через on('event', handlerFn)
• Еще лучше использовать делегирование событий. Тогда будет создан один обработчик и будет работать для элементов добавленных после навешивания обработчиков https://learn.jquery.com/events/event-delegation

Использовать миксин для размера шрифта должен принимать размер в пикселях и выводить размер в em с фолбэком на px

   .el{
      @include font-size(16px);
    }

Должен быть вывод

.el{
   font-size: 16px;
   font-size: 1em;
}

Создать миксины для часто используемых размеров экранов, пример tablet, desktop
и использовать так

.block__items{
   font-size: 10px;
   @include tablet{
         font-size: 12px:
   }
   @include desktop{
      font-size: 14px;
  }
}

Применить box-sizing: border-box; для всех элементов