@4chets
Начинающий ВЕБ-программист

Правильно ли построен html и css?

Правильно ли построена система html и css кода в принципе? Если что то можно улучшить, или как то упростить ваши советы? Правильно ли понял БЭМ?
5e6bd1430f366930733866.png
5e6bd151d44cf409055441.png
<div class="wrapper">
		<header>
			<div class="container">
				<img src="img/logo.png" alt="logo">
				<nav class="header__menu">
					<ul>
						<li><a href="#">HOME</a></li>
						<li><a href="#">ABOUT</a></li>
						<li><a href="#">WORK</a></li>
						<li><a href="#">PROCESS</a></li>
						<li><a href="#">SERVICES</a></li>
						<li><a href="#">TESTIMONIALS</a></li>
						<li><a href="#">CONTACT</a></li>
					</ul>
				</nav>
				<p class="burger">&#9776;</p>
			</div>
		</header>
		<section class="banner">
			<div class="container">
				<div class="banner__main">
					<div class="banner__first">
						<h1>We Design and Develop</h1>
						<p>We are a new design studio based in USA. We have over<br> 
						20 years of combined experience, and know a thing or two<br> 
						about designing websites and mobile apps.</p>
					</div>
					<div class="banner__button">
						<a href="">CONTACT US</a>
					</div>
				</div>
			</div>
		</section>


CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Montserrat', sans-serif;
}
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
.container{
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 5px;
}
.wrapper{
	height: 670px;
	background: #e9e9e9;
}
header .container{
	padding-top: 38px;
	margin-bottom: 184px;
	display: flex;
	justify-content: space-between;
}
nav ul{
	display: flex;
}
nav ul  li a{
	font-size: 12px;
	margin-left: 32px;
	color: #191919;
	font-weight: bold;
}
a:hover{
	color: #44cdc8;
}
.menu__visible{
	display: initial;
}
.burger{
	display: none;
}
.banner .container{
	display: flex;
	justify-content: flex-end;
}
.banner__first{
	margin-bottom: 62px;
}
.banner__first h1{
	font-size: 38px;
	color: #1d1d1d;
	padding-right: 43px;
	padding-bottom: 33px;
}
.banner__first p{
	font-size: 18px;
	color: #9b9b9b;
}
.banner__button a{
	font-size: 12px;
	color: #fff;
	padding: 23px 46px 22px 44px;
	background: #10c9c3;
}
@media screen and (max-width: 700px) {
	.burger{
		display: initial;
		font-size: 20px;
	}
	.header__menu{
		width: 250px;
		height: 20%;
		position: absolute;
		display: none;
	}
	nav ul{
		display: block;
	}
	nav ul li {
		padding-bottom: 10px;
	}
	.menu__visible{
		display: block;
	}	
	.banner .container{
		display: block;
	}
	.banner__first h1,p{
		text-align: center;
		padding-right: 0;
	}
	.banner__button{
		text-align: center;
	}
}
@media screen and (max-width: 480px) {
	.banner__first h1{
		font-size: 28px;
	}
	.banner__first p{
		font-size: 14px;
	}
	.banner__button a{
		font-size: 9px;
		padding: 18px 41px 17px 39px
	}
}
  • Вопрос задан
  • 220 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Froggyweb
в принципе выкладывать код в виде картинок - хрень
БЭМ проклинает все

.banner__first h1{
font-size: 28px;
}
это БЭМ?
Ответ написан
@SlivnoyBochok
И "импорт" нагружает страницу, есть другой способ
Ответ написан
@Liuonid
БЭМ нужен только для крупных проектов. Для ледингов. Он курит в стороне. Так как вы потратите больше времени на именовании классов. В бэм нельзя использовать селекторы тегов. нельзя так же универсальный селектор(*), нельзя юзать resets(вроде normalize.css), так же нельзя определять !important в стилях.
И вообще не нужно забивать голову БЭМом. Есть множество других методологии.
Ответ написан
Ваш ответ на вопрос

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

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