Cześć, ostatnio zainteresowałem się szeroko pojętym BEM-em. W ramach ćwiczeń napisałem przykładowy kod, w którym postanowiłem skorzystać z owej konwencji nazewniczej(nie chciałem spłycać BEM tylko do tego ale właściwie obecnie owa konwencja mnie interesuje) i chciałbym poddać te oto właśnie nazwy waszej opinii. Wiem, że BEM nie narzuca konkretnego nazewnictwa, mimo to są wytyczne i właśnie wg nich chciałbym poznać waszą opinię. Jeśli jest taka opcja to w przypadku złego zastosowania proszę o poprawę.
Pozdrawiam serdecznie
Kod codepen: https://codepen.io/Hoorder/pen/popOdaP
Kod tutaj:
<header class="aboutMe">
<div class="aboutMe__titles">
<p class="aboutMe__title-welcome">Witaj!</p>
<h1 class="aboutMe__title-headline">Jestem Adam Kowalski,</h1>
<h2 class="aboutMe__title-subline">web developer - freelancer</h2>
<button class="aboutMe__title-btn">Zobacz moje portfolio</button>
</div>
</header>
<section class="knowledge">
<p class="knowledge__title">Tworzę bardzo dobre strony internetowe</p>
<div class="knowledge__feature">
<img src="images/services1.png" alt="" class="knowledge__feature-img">
<p class="knowledge__feture-title">Nowoczesne i zgodne z aktualnymi standardami</p>
<p class="knowledge__feture-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero
facilis possimus, voluptatem tempore molestias amet voluptatum excepturi modi recusandae placeat, sit
quis nesciunt dolores fugiat in alias, perspiciatis delectus iste.</p>
</div>
<div class="knowledge__feature">
<img src="images/services2.png" alt="" class="knowledge__feature-img">
<p class="knowledge__feture-title">Zoptymalizowane pod kątem wyszukiwarek internetowych</p>
<p class="knowledge__feture-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero
facilis possimus, voluptatem tempore molestias amet voluptatum excepturi modi recusandae placeat, sit
quis nesciunt dolores fugiat in alias, perspiciatis delectus iste.</p>
</div>
<div class="knowledge__feature">
<img src="images/services3.png" alt="" class="knowledge__feature-img">
<p class="knowledge__feture-title">Świetnie wyglądające na urządzeniach mobilnych</p>
<p class="knowledge__feture-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero
facilis possimus, voluptatem tempore molestias amet voluptatum excepturi modi recusandae placeat, sit
quis nesciunt dolores fugiat in alias, perspiciatis delectus iste.</p>
</div>
</section>
<section class="portfolio">
<p class="portfolio__title">Projekty, z których jestem dumny</p>
<div class="project">
<img src="images/portfolio1.jpg" alt="" class="project__img">
<div class="project__about">
<p class="project__about-title">Nazwa projektu</p>
<p class="project__about-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
fugit neque consectetur hic inventore libero, harum, similique tempora incidunt ullam quaerat!
Itaque sunt incidunt eligendi assumenda ducimus quae illum debitis?</p>
</div>
</div>
<div class="project">
<img src="images/portfolio2.jpg" alt="" class="project__img">
<div class="project__about">
<p class="project__about-title">Nazwa projektu</p>
<p class="project__about-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
fugit neque consectetur hic inventore libero, harum, similique tempora incidunt ullam quaerat!
Itaque sunt incidunt eligendi assumenda ducimus quae illum debitis?</p>
</div>
</div>
<div class="project">
<img src="images/portfolio3.jpg" alt="" class="project__img">
<div class="project__about">
<p class="project__about-title">Nazwa projektu</p>
<p class="project__about-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
fugit neque consectetur hic inventore libero, harum, similique tempora incidunt ullam quaerat!
Itaque sunt incidunt eligendi assumenda ducimus quae illum debitis?</p>
</div>
</div>
<div class="project">
<img src="images/portfolio4.jpg" alt="" class="project__img">
<div class="project__about">
<p class="project__about-title">Nazwa projektu</p>
<p class="project__about-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
fugit neque consectetur hic inventore libero, harum, similique tempora incidunt ullam quaerat!
Itaque sunt incidunt eligendi assumenda ducimus quae illum debitis?</p>
</div>
</div>
</section>
<section class="maxim">
<p class="maxim__title">Moje życiowe motto</p>
<p class="maxim__citation">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga id architecto harum
sint at alias.</p>
<p class="maxim__citation-author">~ Jan Nowak</p>
</section>
<section class="hobby">
<div class="hobby__item">
<p class="hobby__item-title">Chodzić po górach</p>
</div>
<div class="hobby__item">
<p class="hobby__item-title">Patrzeć wysoko</p>
</div>
<div class="hobby__item">
<p class="hobby__item-title">Zmieniać świat</p>
</div>
<div class="hobby__item">
<p class="hobby__item-title">Jeść owoce i warzywa</p>
</div>
</section>
<section class="contact">
<p class="contanct__title"></p>
<div class="contact__wrap">
<form action="/" method="POST" class="contact__form">
<input type="text" name="name" placeholder="Twoje imię:" class="contact__form-input">
<input type="text" name="email" placeholder="E-mail:" class="contact__form-input">
<textarea name="description" placeholder="Treść wiadomości:" id="" cols="30" rows="10"
class="contact__form-textarea"></textarea>
<button type="submit" class="contact__form-btn"></button>
</form>
<div class="socials">
<div class="social">
<img src="images/contact1.png" alt="" class="social__img">
<p class="social__address"></p>
</div>
<div class="social">
<img src="images/contact2.png" alt="" class="social__img">
<p class="social__address"></p>
</div>
<div class="social">
<img src="images/contact3.png" alt="" class="social__img">
<p class="social__address"></p>
</div>
<div class="social">
<img src="images/contact4.png" alt="" class="social__img">
<p class="social__address"></p>
</div>
<div class="social">
<img src="images/contact5.png" alt="" class="social__img">
<p class="social__address"></p>
</div>
</div>
</div>
</section>
<footer class="author">
<div class="author__name">© Adam Kowalski</div>
</footer>
