Answer the question
In order to leave comments, you need to log in
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">©  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
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 questionAsk a Question
731 491 924 answers to any question