Doing it Wrong #1: Using CSS to Render Content

by jsn1nj4

HTML

<article class="event" id="awesome_regional_conference-2023">
  <h1 class="title"></h1>
  <h3 class="date"></h3>
  <p class="venue"></p>
  <p class="location"></p>
</article>

SCSS

.event {
  .title::before { content: var(--title); }
  .date::before { content: var(--date); }
  .venue::before { content: var(--venue); }
  .location::before { content: var(--location); }
  
  &#awesome_regional_conference-2023 {
    --title: "Awesome Regional Conference 2023";
    --date: "5/21/2023";
    --venue: "Totally Real Conference Hall";
    --location: "123 Totally Real Blvd, Austin, Tx";
  }
}