Медиа-запросы при использовании БЭМ - PullRequest
Новая
       121

Медиа-запросы при использовании БЭМ

3 голосов
/ 19 марта 2019

Я занимаюсь кодированием всего четыре месяца, поэтому не знаю, как правильно использовать методологии и фреймворки. Я долго искал ответы на свой вопрос, но не смог найти ни одного. Я смотрел много видео профессиональных кодеров, объясняющих БЭМ и использующих БЭМ, но ни один из них не объяснил БЭМ больше, чем веб-сайт БЭМ объясняет это. Если я использую методологию БЭМ, все ли в моих медиа-запросах должно быть модификаторами? 

html {
  font-size: 16px;
  box-sizing: border-box;
}

/************************
HEADER
************************/

/********
BLOCKS
*********/


.main-header {
  text-align: center;
  padding: 0.1rem;
  width: 100%;
}


/********
ELEMENTS
*********/

.main-header__name {
  margin: 0.15rem 0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.main-header__main-nav {
  padding-left: 0;
  list-style-type: none;
  margin-top: 0;
}

.main-header__main-nav__a-remove-decoration {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  display: block;
}

.main-header__main-nav__li-padding-top{
  padding-top: 0.50rem;
}

/********
MODIFIERS
*********/

/************************
MEDIA QUERIES
************************/
@media (min-width: 48rem) {
/************************
HEADER
************************/

/********
BLOCKS
*********/
.main-header {
  display: flex;
  flex-direction: column;
}

/********
ELEMENTS
*********/
.main-header__main-nav {
  display: flex;
  width: 100%;
  flex-grow: 1;
  justify-content: center;
}

.main-header__main-nav__li-flexgrow {
  flex-grow: 1;
}


/********
MODIFIERS
*********/
}
	<header class="main-header">
			<h1 class="main-header__name">Best City Guide</h1>
				<ul class="main-header__main-nav">
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow "><a class="main-header__main-nav__a-remove-decoration" href="icecream.html">ice cream</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">donuts</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">tea</a></li>
					<li class="main-header__main-nav__li-padding-top main-header__main-nav__li-flexgrow"><a class="main-header__main-nav__a-remove-decoration" href="#">coffee</a></li>
				</ul>
	</header><!--/.main-header-->

1 Ответ

2 голосов
/ 19 марта 2019

Я не эксперт БЭМ, но IMO, медиа-запросы не должны быть частью модификаторов.Модификаторы - это те, которые добавляют некоторый дополнительный стиль / функциональность в элемент.Например: 

.link {
 // link style
}

.link--active {
   // modifier
   // attributes of an active link only  
   text-decoration: none;
}


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

Более того, я видел, что вы столкнулись с необходимостью добавления __ (2 подчеркивания) дваждыв некоторых ваших стилях.Это также то, что, как я считаю, не требуется, потому что, углубившись в какой-то вложенный HTML-макет, вам придется создавать очень длинные имена классов, которые в конечном итоге станут трудными для поддержки.

Следовательно, вы можете использовать правило большого пальца, когда вам захочется добавить __ дважды, просто сделайте его новым блоком.

Для лучшей читабельности и управления именами классов вы также можете добавить к своим классам префикс пространства имен.Вы можете прочитать эту статью для получения подробной информации по этому вопросу.

Он говорит очень хорошие понятия, такие как префиксы для разных классов.Например, если класс является компонентом, он может иметь префикс, например .c-myBlock.Если это служебный класс, то к нему можно добавить префикс, например u-activeLink и еще несколько похожих понятий.

Надеюсь, это поможет !!

...