Слова, які часто використовуються в CSS-класах

<ul class="list">
  <li class="item">Первое</li>
  <li class="item">Второе</li>
  <li class="item">Третье</li>
</ul>

<div class="user">
  <img class="user__img" src="userpic.png" alt="Дормідонт Петрович">
  <a class="user__link" href="#">Дормідонт Петрович</a>
</div>

<div class="gallery">
  <ul class="gallery__list">
    <li class="gallery__item">
      <img class="gallery__img" src="flowers.jpg" alt="Цвітемо як востаннє">
    </li>
    <li class="gallery__item">
      <img class="gallery__img" src="trees.jpg" alt="Парк Три сосни»">
    </li>
  </ul>
</div>

<nav class="nav">
  <a class="nav__link nav__link--active">Головна</a>
  <a class="nav__link" href="#">Другорядний</a>
  <a class="nav__link" href="#">Третя з кінця</a>
  <a class="nav__link" href="#">Передостання</a>
  <a class="nav__link" href="#">Зовсім кінець</a>
</nav>

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item nav__item--current">
      <a class="nav__link">Головна</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Статті</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Фотогалерея</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Контакти</a>
    </li>
  </ul>
</nav>

<div class="widget">
  <h4 class="widget__title">Вирощуємо желе</h4>

  <div class="widget__content">
    <p>Щоб виростити товариське доброзичливе желе,
     нам знадобиться рулон поролону, два кілограми цукру,
     три яйця та пів чайної чашки ацетону.</p>

    <a class="widget__link" href="#">Не читати далі...</a>
  </div>
</div>

<div class="news">
    <h3 class="news__title">Ворашні новини</h3>

    <ul class="news__list">
        <!-- до класу елемента додаємо клас блоку,
              щоб створити новий простір імен -->
        <li class="news__item item-news">
            <h4 class="item-news__title">Змагання серед вобли з ковзанярського спорту</h4>
            <div class="item-news__text">
              <p>Перемогла команда кільок з Одеси</p>

              <a href="#" class="item-news__link">Читати далі</a>
            </div>
        </li>

        <li class="news__item item-news">
            <h4 class="item-news__title">Вчені уточнили роль напилка у догляді за нігтями</h4>
            <div class="item-news__text">
              <p>Британські вчені високо оцінили внесок
                 напилка у відрощування півтораметрових нігтів.</p>

              <a href="#" class="item-news__link">Не читати далі</a>
            </div>
        </li>
    </ul>
</div>

<article class="article">
  <h3 class="article__title">Намацуємо чакри у пучка петрушки</h3>
  <time class="article__datetime">32 травня, 10:87</time>

  <div class="article__author author-article">
    <img class="author-article__img" src="userpic.png" alt="Клішня Андріївна">
    <a class="author-article__link" href="#">Клішня Андріївна Бойко</a>
    <div class="author-article__desc">Наш експерт з чакрів</div>
  </div>

  <div class="article__content">
   Сходіть на ринок і купіть у стареньких пучок петрушки грам на 100.
     Як слід переберіть, очистіть від жуків та гусениць. Жуків віддайте погратися
     коту, гусениць поселіть у горщик з кактусами, нехай одна буде Джоном,
     друга Біллі, а у вас у горщику тепер буде Дикий Захід. Поверніться
     до пучка петрушки. Ласкаво погляньте на нього і добре почухайте
     за вухом, можна собі чи коту. Перев'яжіть атласною стрічкою,
     Обов'язково зав'яжіть бант. Вітаємо! Тепер у вас є повністю
     одомашнений пучок петрушки, який буде весело бігати за вами
     по п'ятах і пророщувати своє насіння у ваших капцях.
  </div>
</article>

<article class="entry">
  <header class="entry__header">
    <h3 class="entry__title title-entry">
      <a class="title-entry__link" href="#">Гумові качечки як спосіб самопізнання</a>
    </h3>

    <time class="entry__datetime">32 травня, 10:87</time>
  </header>

  <div class="entry__author author-entry">
    <img class="author-entry__img" src="userpic.png" alt="Василиса Сергійович">

    <a class="author-entry__link" href="#">Василиса Сергійович</a>
  </div>

  <div class="entry__content">
 Дістаньте з горища коробку з півсотнею гумових качечок,
     залишки після святкування нового року. З качечок
     і свічок викладіть пентаграму на підлозі кімнати.
     Сядьте посередині у позу лотоса, в кожну руку візьміть
     по німецько-бразильському словнику, прокашляйтесь, наберіть
     повні груди повітря і голосно і впевнено,
     з повною самовіддачею скажіть "Кря!"
  </div>

  <div class="entry__tags tags-entry">
    <h4 class="tags-entry__title">Мітки</h4>

    <ul class="tags-entry__list">
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">хоровод своїми руками</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">порцелянові тапки</a>
      </li>
      <li class="tags-entry__item">
        <a class="tags-entry__link" href="#">гуталін у кулінарії</a>
      </li>
    </ul>
  </div>

  <div class="entry__actions actions-entry">
    <ul class="actions-entry__list">
      <li class="actions-entry__item actions-entry__item--read">
        <a class="actions-entry__link" href="#">238 відповідей</a>
      </li>
      <li class="actions-entry__item actions-entry__item--write">
        <a class="actions-entry__link" href="#">Написати звернення</a>
      </li>
      <li class="actions-entry__item actions-entry__item--share">
        <a class="actions-entry__link" href="#">Поділитися</a>
      </li>
    </ul>
  </div>
</article>