Exorbitant Changes of Life

belowwwwwwwwwwwwwwwww

aboveeeeeeeeeeeeeeeeee

It’s not without its challenges, but nothing I don’t experience when working with HTML or JavaScript in my opinion.

Here are a few quick tips I have been thinking about lately with regards to writing better CSS.

3. Periodically check the output

This may seem silly to some, “I know what the output will look like, I wrote it!”, but Sass and tools alike do a great job of masking what you might expect in the output.

Periodically checking the output has often resulted in me refactoring a bit of my CSS for the better of the project.

let response

if (data.value === 'one') {
  response = 'Response for value one'
} else if (data.value === 'two') {
  response = 'A different response for value two'
} else if (data.value == 'three') {
  response = 'Another slightly different response for value three'
}

This is a test.

It is typically best practice to not repeat yourself. Keep it DRY. In this screencast I demonstrate how to move repeatable HTML elements into reusable components for portability.

An added benefit of working in this way is being able to mock data across templates before you get into setting up the CMS like you can see below.

{# templates/_components/card.twig #}

<article class="c-card">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
</article>

{% set cards = [
  {
    title: "Card Title 1",
    description: "Card description would go here."
  },
  {
    title: "Card Title 2",
    description: "Card description would go here."
  }
] %}

{% for card in cards %}
  {% include '_components/card' with {
    title: card.title,
    description: card.description
  } %}
{% endfor %}

Now once your CMS is setup you can remove the temporary data and update the reference to cards to pull from the CMS.

document.addEventListener('click',  event => {
  // If event doesn't match our toggle selector return
  if (!event.target.closest('.accordion-toggle')) return
  if (!event.target.matches('.accordion-toggle')) return
  // Run toggle code
  togglePanel()
}, false)