B
B
badicean2015-05-13 11:50:48
HTML
badicean, 2015-05-13 11:50:48

Does this layout match BEM principles?

Guys, I'm learning the bam approach. Please take a look, what can be improved, are there jambs?

<div class="b-layout">
  <div class="b-line">
    <div class="col-md-6 new-left">
      <div class="b-logo">
          <a class="b-link b-logo__link" href="/" title="logo">
          	<img class="b-icon b-logo__icon" src="./assets/images/logo_img.png" alt="logo" />
          	<span class="b-logo__title">Logo title</span>
          </a>
      </div> 
      <div class="b-slogan">
        <p class="b-slogan__text">
          text about  
        </p>
      </div>
        <div class="informers">
            <div class="b-inline informer">
                <span class="informer__text">Нас уже</span>
                <span class="informer__number">101</span>
            </div>
            <div class="b-inline informer">
                <span class="informer__text">Вопросов</span>
                <span class="informer__number">79</span>
            </div>
            <div class="b-inline informer">
                <span class="informer__text">Решений</span>
                <span class="informer__number">34</span>
            </div>
        </div>
    </div>	
    <div class="col-md-6 new-right">
      <div class="b-tabs">
        <div class="b-inline b-tabs__item b-tabs_item_auth" ng-class="{true:'b-tabs__item_checked'}[path === '/auth']">
          <a class="link link__tab" href="/auth">Вход</a>
        </div>
        <div class="b-inline b-tabs__item b-tabs_item_signup" ng-class="{true:'b-tabs__item_checked'}[path === '/signup']">
          <a class="link link__tab" href="/signup">Регистрация</a>
        </div>
      </div>
      <div class="auth auth_type_signup" ng-show="path === '/signup'">
        регистрация
      </div>
      <div class="auth auth_type_signin" ng-show="path === '/auth'">
        <div class="auth-line">
          <div class="social">
            <a class="social-link b-inline">
              <i class="fa fa-twitter social__icon"></i>
              <span class="social__text">Twitter</span>
            </a> 
            <a class="social-link b-inline" >
              <i class="fa fa-facebook social__icon"></i>
              <span class="social__text">Facebook</span>
            </a> 
          </div>
        </div>
        <div class="auth-line">
          <div class="separator">
            <div class="separator__spacer b-inline"></div>
            <span class="separator__text b-inline">или</span>
            <div class="separator__spacer b-inline"></div>
          </div>
        </div>
        <form action="" class="auth-form">
          <div class="auth-line">
            <span class="input input_size_m i-bem" >
              <span class="input__box"><input class="input__control" placeholder="Email"/></span>
            </span> 
          </div>
          <div class="auth-line">
            <span class="input input_size_m i-bem" >
              <span class="input__box"><input class="input__control" placeholder="Пароль"/></span>
            </span> 
          </div>
          <div class="auth-line">
            <input class="button button_type_login" type="submit" value="Войти">
          </div>
          <div class="auth-line">
            <a href="#" ng-click="popup_type_pass_recovery=true" class="link link_style_underline">Забыли пароль?</a>
          </div>
          <div class="auth-line"></div>
        </form>

      </div>
          <div ng-show="popup_type_pass_recovery" class="auth-line popup popup_type_pass_recovery">
            <div class="popup__content">
              <span class="input input_size_m i-bem" >
                <span class="input__box"><input class="input__control" placeholder="Введите свой e-mail"/></span>
              </span> 
              <input class="button button_type_pass_recovery" type="submit" value="Войти">
            </div>
          </div>
    </div>	
  </div>
</div>



 <footer class="b-line_footer">
      <div class="container">
      	<div class="b-footer-links">
      <div class="b-footer__level b-footer__link">&copy;&#160; 2015 copyright</div>  
      <div class="b-inline b-footer__link b-footer__link_faq"><a href="#" class="b-link ">FAQ</a></div>
      <div class="b-inline b-footer__link b-footer__link_help"><a href="#" class="b-link ">Поддержка</a></div>
      <div class="b-inline b-footer__link b-footer__link_blog"><a href="#" class="b-link ">Блог</a></div> 		
      	</div>
      	<div class="b-footer-links b-footer-links_right">
      <a href="vk" class="b-link b-inline" title="Служба поддержки"><i class="b-ico b-ico-vk"></i></a>	
      <a href="vk" class="b-link b-inline" title="Служба поддержки"><i class="b-ico b-ico-fb"></i></a>	
      <a href="vk" class="b-link b-inline" title="Служба поддержки"><i class="b-ico b-ico-tw"></i></a>	
      	</div>
      </div>
</footer>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Yaroshevich, 2015-07-07
@qfox

No ;-)
col-md-6 new-left - it's better to take b-layout informers into
modifiers - is this markup? better as a markup element then.
b-inline - also more related to markup, better in an element in b-layout or in a special block for
auth-line markup - obviously an auth-form element, I would do .form.form_auth or form_type_auth, and this element is form_field.
well and further in the same spirit.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question