Правильно ли я использую БЭМ?
Я только начал изучать БЭМ, сверстал часть сайта и пробовал по максимуму использовать БЭМ. Я не могу понять, правильно ли я делаю?
@import url(reset.css);
/* font-family: 'Gilroy-Bold', sans-serif;
font-family: 'Gilroy-Heavy', sans-serif;
font-family: 'Gilroy-Light', sans-serif;
font-family: 'Gilroy-Medium', sans-serif;
font-family: 'Gilroy-Regular', sans-serif; */
.container {
margin-left: auto;
margin-right: auto;
width: 1445px;
background-color: #ffffff;
}
.menu {
margin-top: 32px;
margin-left: 252px;
}
.menu__list {
display: flex;
}
.menu__item {
margin-right: 155px;
font-family: 'Gilroy-Bold', sans-serif;
color: #828282;
list-style-type: none;
}
.menu__item-link {
font-size: 18px;
line-height: 22px;
text-decoration: none;
color: #828282;
}
.menu__item-link--active {
color: #000;
}
.menu__line {
border: 1px solid #828282;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 940.6px;
margin-top: 31px;
}
.header__content-title {
font-family: 'Gilroy-Bold', sans-serif;
font-size: 47px;
line-height: 59px;
margin-top: 39px;
}
.header__content-sub-title {
font-family: 'Gilroy-Medium', sans-serif;
font-size: 18px;
line-height: 22px;
margin-top: 94px;
margin-left: 297px;
}
.header__container {
display: flex;
}
.header__content-langwich {
font-family: 'Gilroy-Bold', sans-serif;
font-size: 16px;
line-height: 20px;
margin-top: 70px;
margin-left: 350px;
transform: rotate(-90deg);
}
.header__content-langwich-link {
text-decoration: none;
color: #828282;
}
.header__content-langwich-link--active {
color: #000000;
}
.header__content-img {
margin-top: 30px;
}
.about {
background-color: #f6f6f6;
width: 1445px;
height: 506px;
margin-top: 104px;
}
.section-about {
height: 506px;
}
.title {
font-family: 'Gilroy-Bold', sans-serif;
font-size: 34px;
line-height: 43px;
text-align: center;
}
.title__about {
padding-top: 120px;
}
.sub-title {
font-family: 'Gilroy-Medium', sans-serif;
font-size: 18px;
line-height: 21px;
text-align: center;
}
.sub-title__about {
padding-top: 17px;
}
.title__skills {
margin-top: 120px;
margin-bottom: 69px;
}
.programs {
display: flex;
justify-content: center;
margin-top: 83px;
}
.programs__img {
display: flex;
justify-content: center;
align-items: center;
}
.programs__text {
font-family: 'Gilroy-Bold', sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
color: #828282;
margin-top: 24px;
}
.programs__stars {
margin-top: 40px;
}
.star {
margin-right: 9px;
}
.programs__block {
margin-left: 45px;
margin-right: 45px;
}
.portfolio {
background-color: #f6f6f6;
width: 1445px;
height: 2253px;
margin-top: 110px;
}
.portfolio__title {
padding-top: 112px;
padding-bottom: 47px;
}
.portfolio__link {
font-family: 'Gilroy-Medium', sans-serif;
font-size: 18px;
line-height: 21.83px;
color: #070707;
}
.portfolio__text {
text-align: center;
margin-top: 44px;
margin-bottom: 99px;
}
.portfolio__img {
display: flex;
align-items: center;
justify-content: center;
}
.message__title {
margin-top: 114px;
margin-bottom: 20px;
}
.message__sub-title {
margin-bottom: 29px;
}
.message__button {
font-family: 'Gilroy-Bold', sans-serif;
font-size: 18px;
line-height: 22px;
text-decoration: none;
color: #ffffff;
width: 180px;
height: 42px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background-color: #070707;
border-radius: 50px;
margin-bottom: 85px;
}
.icons__list {
display: flex;
align-items: center;
justify-content: center;
}
.icons__item {
list-style-type: none;
margin: 0px 30px 45px 30px;
}
.icons__sub-title {
font-family: 'Gilroy-Medium', sans-serif;
font-size: 14px;
line-height: 16px;
text-align: center;
margin-bottom: 123px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link
href="https://fonts.cdnfonts.com/css/gilroy-bold"
rel="stylesheet"
/>
<title>БЭМ</title>
</head>
<body>
<header class="header">
<div class="container">
<nav class="menu">
<lu class="menu__list">
<li class="menu__item">
<a
class="menu__item-link menu__item-link--active"
href="#"
>Home</a
>
</li>
<li class="menu__item">
<a class="menu__item-link" href="#">About me</a>
</li>
<li class="menu__item">
<a class="menu__item-link" href="#">Skills</a>
</li>
<li class="menu__item">
<a class="menu__item-link" href="#">Portfolio</a>
</li>
<li class="menu__item">
<a class="menu__item-link" href="#">Contacts</a>
</li>
</lu>
<div class="menu__line"></div>
<div class="header__content">
<div class="header__container">
<div class="header__content-title">
Denis <br />
Novik
</div>
<div class="header__content-sub-title">
UX | UI designer <br />
24 years old, Minsk
</div>
<div class="header__content-langwich">
<a
href="#"
class="header__content-langwich-link"
>RU
</a>
<a
href="#"
class="header__content-langwich-link header__content-langwich-link--active"
>| ENG</a
>
</div>
</div>
<img
class="header__content-img"
src="/img/photo.jpg"
alt="img"
/>
</div>
</nav>
</div>
</header>
<section class="section-about">
<div class="container">
<div class="about">
<div class="title__about">
<h1 class="title">About me</h1>
</div>
<div class="sub-title__about">
<p class="sub-title">
Hi, I'm Denis – UX/UI designer from Minsk. <br />
I'm interested in design and everything connected
with it.
<br />
<br />
<br />
I'm studying at courses "Web and mobile design
<br />
interfaces" in IT-Academy. <br />
<br />
<br />
Ready to implement excellent projects <br />
with wonderful people.
</p>
</div>
</div>
</div>
</section>
<section class="section-skills">
<div class="container">
<div class="skills">
<div class="title">
<h1 class="title__skills">Skills</h1>
</div>
<p class="sub-title">I work in such programs as</p>
</div>
<div class="programs">
<div class="programs__block">
<div class="programs__img">
<img
class="programs__img"
src="/img/PS.png"
alt="ps"
/>
</div>
<p class="programs__text">
Adobe <br />
Photoshop
</p>
<div class="programs__stars">
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img
class="star"
src="/img/Star-empty.png"
alt="star"
/>
</div>
</div>
<div class="programs__block">
<div class="programs__img">
<img
class="programs__img"
src="/img/AE.png"
alt="ai"
/>
</div>
<p class="programs__text">
Adobe <br />
Illustrator
</p>
<div class="programs__stars">
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img
class="star"
src="/img/Star-empty.png"
alt="star"
/>
<img
class="star"
src="/img/Star-empty.png"
alt="star"
/>
</div>
</div>
<div class="programs__block">
<div class="programs__img">
<img
class="programs__img"
src="/img/AI.png"
alt="ae"
/>
</div>
<p class="programs__text">
Adobe <br />
After Effects
</p>
<div class="programs__stars">
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img
class="star"
src="/img/Star-empty.png"
alt="star"
/>
</div>
</div>
<div class="programs__block">
<div class="programs__img">
<img
class="programs__img"
src="/img/Figma.png"
alt="fig"
/>
</div>
<p class="programs__text">
Figma <br />
</p>
<div class="programs__stars">
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img class="star" src="/img/Star.png" alt="star" />
<img
class="star"
src="/img/Star-empty.png"
alt="star"
/>
</div>
</div>
</div>
</div>
</section>
<section class="section-porftolio">
<div class="container">
<div class="portfolio">
<div class="portfolio__title">
<h1 class="title">Portfolio</h1>
</div>
<div class="portfolio__concept">
<div class="portfolio__img">
<img src="/img/portfolio-photo1.png" alt="img" />
</div>
<p class="portfolio__text">
<a class="portfolio__link" href="#"
>Online fashion store - Homepage</a
>
</p>
</div>
<div class="portfolio__concept">
<div class="portfolio__img">
<img src="/img/portfolio-photo2.png" alt="img" />
</div>
<p class="portfolio__text">
<a class="portfolio__link" href="#"
>Reebok Store - Concept</a
>
</p>
</div>
<div class="portfolio__concept">
<div class="portfolio__img">
<img
class="portfolio__img"
src="/img/portfolio-photo3.png"
alt="img"
/>
</div>
<p class="portfolio__text">
<a class="portfolio__link" href="#"
>Braun Landing Page - Concept</a
>
</p>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="contacts">
<div class="message">
<div class="message__title">
<h1 class="title">Contacts</h1>
</div>
<div class="message__sub-title">
<p class="sub-title">
Want to know more or just chat? <br />
You are welcome!
</p>
</div>
<a class="message__button" href="#">Send message</a>
<div class="icons">
<lu class="icons__list">
<li class="icons__item">
<a href="#">
<img src="/img/link1.png" alt="img" />
</a>
</li>
<li class="icons__item">
<a href="#">
<img src="/img/link2.png" alt="img" />
</a>
</li>
<li class="icons__item">
<a href="#">
<img src="/img/link3.png" alt="img" />
</a>
</li>
<li class="icons__item">
<a href="#">
<img src="/img/link4.png" alt="img" />
</a>
</li>
</lu>
<p class="icons__sub-title">
Like me on <br />
LinkedIn, Instagram, Behance, Dribble
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>Источник: Stack Overflow на русском