Попытка разметки по БЭМ :)

[Endorphin]

<section class="b-about-us__line">
  <div class="b-about-us-content center-block clearfix">
   <div class="b-about-us__head">
     <h2>О компании</h2>
   </div>
   <div class="b-about-us__left">
     <div class="b-about-us-left__img">
       <img class="b-image" src="images/abous-us-image.png" alt="фото">
     </div>
     <div class="b-about-us-left__video">
       <video class="b-video" controls="controls">
         <source src="" type="">
         <source src="" type="">
         <source src="" type="">
       </video>
     </div>
   </div>
    <div class="b-about-us__right">
      <div class="b-about-us-right__text">
        <p class="b-text">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi dignissimos, delectus velit impedit, ut dolorum in corrupti doloremque minus laborum, nisi assumenda similique! Quos quasi enim libero beatae, recusandae illo iste ducimus incidunt doloribus, id, dolores ab, fuga officia unde est molestiae nulla sequi excepturi eum iure voluptatum ratione officiis.
        </p>
      </div>
    </div>
  </div>
 </section>

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

[wwt]

Не лучше ли вынести us в модификатор для блока?

.b-about {
	color: red;
	
	&__content {}
	&__head {}
	//и т.д.

	&_us {
		color: green;
		&__content {}
		&__head {}
		// и т.д.
	}
}

 

[Igor Schnaider]

Мне кажется, что без макета и стилей тут бессмысленно что-то смотреть. Ведь БЭМ это не только про наименование классов, с черточкой или еще чем, это в целом подход к верстке.
Из вашего пример не ясно как реализованы все компоненты, блоки, элементы. Независимы ли блоки. Или, стоит ли делать блок .about с элементами .about__left и .about__right, а не вынести это, скажем, в блок .layout.
В общем, мало информации.

[Endorphin]

20 минут назад, Igor Schnaider сказал:

Мне кажется, что без макета и стилей тут бессмысленно что-то смотреть. Ведь БЭМ это не только про наименование классов, с черточкой или еще чем, это в целом подход к верстке.
Из вашего пример не ясно как реализованы все компоненты, блоки, элементы. Независимы ли блоки. Или, стоит ли делать блок .about с элементами .about__left и .about__right, а не вынести это, скажем, в блок .layout.
В общем, мало информации.

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

1 час назад, wwt сказал:

Не лучше ли вынести us в модификатор для блока?

.b-about {
	color: red;
	
	&__content {}
	&__head {}
	//и т.д.

	&_us {
		color: green;
		&__content {}
		&__head {}
		// и т.д.
	}
}

 

к сожаленью пока что данную вами технологию я не изучил)

[Endorphin]

.b-about-us__line {
 background: #f9f9f9;
 border-top: 1px solid #eeeeee;
}

.b-about-us-content {
  padding-top: 10px;
}

.b-about-us__head {
  margin: 30px 0;
  font-size: 28px;
  text-align: center;
}

.b-about-us__left {
  float: left;
  width:45%;
}

.b-about-us-left__img {
  margin-bottom: 20px;
}

.b-image, .b-video {
  width:100%;
}

.b-about-us__right {
  float:right;
  width: 50%;
  margin-left: 5%;
}

.b-about-us-right__text {
  font-size: 26px;
  text-indent: 15px;
}

.b-text::first-letter {
  font-size: 48px;
  vertical-align: bottom;
}

вот такие стили применял к данному блоку, хотя скорее всего это тоже ничего не даст) нужна наверно страница непосредственно

[wwt]

1 час назад, Endorphin сказал:

вот такие стили применял к данному блоку, хотя скорее всего это тоже ничего не даст) нужна наверно страница непосредственно

песочница вам в помощь https://jsfiddle.net/

 

[by chris]

@Endorphin, я лично не использую никаких префиксов в начале (o-, b-, c-). В родной документации не видел. Может плохо смотрел?

[Endorphin]

13 часа назад, by chris сказал:

@Endorphin, я лично не использую никаких префиксов в начале (o-, b-, c-). В родной документации не видел. Может плохо смотрел?

Почему, все верно, в родной документации нету, это из статьи на хабрэ, и то я видимо не так это понял) перечитывать буду и документацию и статью)

Edited July 23, 2016 by Endorphin

[monochromer]

@Endorphin, предполагается, что все html-элементы, создаваемые по БЭМу должны иметь класс. У вас там заголовок h2 остался без класса.

<div class="b-about-us__head">
  <h2>О компании</h2>
</div>

По поводу префикса b-. Когда "Яндекс" только начинали переводить все свои сервисы на БЭМ, им нужно было как-то различать, какие блоки сделаны по новой методологии, а какие - по старой. Если вы с нуля начинаете проект, то данный префикс абсолютно не нужен.

[Endorphin]

1 час назад, monochromer сказал:

@Endorphin, предполагается, что все html-элементы, создаваемые по БЭМу должны иметь класс. У вас там заголовок h2 остался без класса.

<div class="b-about-us__head">
  <h2>О компании</h2>
</div>

По поводу префикса b-. Когда "Яндекс" только начинали переводить все свои сервисы на БЭМ, им нужно было как-то различать, какие блоки сделаны по новой методологии, а какие - по старой. Если вы с нуля начинаете проект, то данный префикс абсолютно не нужен.

Понял, спасибо, один нюанс бэм понял, перечитваю документацию и как то с трудом понимается, найти бы источник с объяснением простым языком что да как по бэму.

[Igor Schnaider]

Можете начать отсюда.