Skip to content

feodoraxis/markup_starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Стартер для вёрстки

Для запуска нужно клонировать проект к себе и выполнить команду:

npm i

Далее для работы исполняем команду:

gulp

Методология БЭМ

Предполагается вёрстка по БЭМ. Если нужна другая методология - тогда проверьте все классы в стилях и в вёрстке на соответствие нужной методологии.

Краткие правила по БЭМ и мои личные рекомендации

БЭМ

  • БЭМ - сокращение от "блок-элемент-модификатор". В рамках данной методологии компоненты и части страниц логически разбиваются на блоки и элементы, а их CSS-классы пишутся специальным образом
  • Все селекторы пишем в нижнем регистре
  • Название блока пишем через тире
  • Название элемента блока пишем через двойное нижнее подчёркивание. Но название элемента через тире как название блока
  • Название модификатора пишем как название элемента, но вместо двойного подчеркивания используем двойное тире

Личные рекомендации

  • Переиспользуемость блоков - не панацея. Если по всей вёрстке один блок используется один раз - ничего страшного. Главное - если такой-же блок где-то еще попадается, вот тогда его надо переиспользовать
  • Для JS используйте ID. Если типовый элементов много и к каждому нужно применить действие из JS, то для этого необходимо присвоить элементу отдельный класс с префиксом "js-". Соответственно, если в JS обращаемся к элементу через класс, то только через класс с префиксом "js-".
  • Используйте любой интерпритатор. Я использую SASS, потому что он мне больше нравится. Вы можете использовать любой. Главное - используйте его в принципе и передайте исходники клиенту при прекращении работы.
  • Медиа-запросы пишем прямо в самих компонентах, не отделяем их
  • JS также делим на смысловые блоки и в соответствующих блоках подключаем только те модули и библиотеки, которые нужны в конкретном случае.
  • Название модификатора пишем как название элемента, но вместо двойного подчеркивания используем двойное тире
  • В JS для определения переменной используйте слова const и let. var - устарел
  • Делайте абсолютное сравнение с учётом типизации данных. Т.е. вместо "==" пишем "==="
  • Переменные, методы, классы и функции называем используя буквы и цифры. Стараемся избегать цифры. Нижнее подчёрскивание не используем. Соответственно названия типа "font page" в JS записываем как "frontPage".
  • Константа, если она используется как константа, пишем верхним регистром через нижнее подчёркивание
  • Везде указывайте понятные названия. Если можно упростить без потери смысла - упрощаем. Если смысл теряется - упрощать не нужно. Но и слишком сложные и длинные названия тоже использовать не нужно. Одно слово - идеально. Два слова - хорошо. Три слова - норм. Больше - плохо. Но если без большего количества слов для понимания не обойтись - используем их. Но опять-же, если нужно больше 3-х слов для названия переменной/функции - пересмотрите свой код. Скорее всего с ним что-то не так.

About

Стартер html-вёрстки

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published