@badicean

Эта верстка соответствует бэм принципам?

Ребят, изучаю подход бэм. гляньте пожалуйста , что можно улучшить, есть ли косяки?
<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>
  • Вопрос задан
  • 669 просмотров
Пригласить эксперта
Ответы на вопрос 1
qfox
@qfox
Ответы есть у меня
Нет ;-)

col-md-6 new-left — лучше унести в модификаторы b-layout

informers — это разметка? лучше как элемент разметки тогда.

b-inline — тоже скорее к разметке относится, лучше в элементом в b-layout или в специальный блок для разметки

auth-line — явно элемент auth-form, я бы сделал .form.form_auth или form_type_auth, а этот элемент — form__field.

ну и дальше в том же духе.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы