It is worth taking time to really get familiar with BEM styling principles. This is one of those areas where not spending time can easily dissuade you from using this technique; the principles are easy to understand but can take time to implement! Let's take a look at our code in more detail.

The key principle around BEM, when using the PostCSS plugin, is that of nesting—in this instance, we create our core component content, which results in an empty style rule at the top of our style sheet. Indented to the next level is our @descendant—this indicates that our message boxes are being styled as alerts. We then use a number of @modifiers to style each type of alert, such as success, warning, error, or notice (that is, information). This includes a separate style rule to cover each instance of the hover pseudo-element used in our code.

What does this mean for us? It means we have to not just consider each element (for instance, a message box) as a single...