bem-semantic-html

bem-semantic-html.html

<style>
  .article {
    width: 800px;
    border: 1px solid #ddd;
    background-color: rgba(236, 253, 245);
    padding: 20px;
    border-radius: 0.75rem;
    box-shadow: 4px 4px 5px #999;
  }

  .article__title {
    font-size: 32px;
    color: rgba(120, 53, 15);
    margin-bottom: 10px;
  }

  .article__publicationDate {
    color: rgba(180, 83, 9);
    font-weight: bold;
  }

  .article__content {
    color: #555;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-family: Verdana;
  }
</style>

<article class="article">
  <h1 class="article__title">The Brawl Between Semantic CSS and Functional CSS</h1>
  <div class="article__publicationDate">10th April, 2021</div>
  <div class="article__content">
    <p>The Web has experienced a lot since its creation by Tim Berners-Lee. 
        You can consider remarkable events like the formation of W3C, the classic browser wars, 
        the formation of WaSP, the ceding of XHTML and HTML 4.0 standards to HTML5 and many other events.
    </p>
  </div>
</article>