Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa. I liked, and was inspired, by the theme switch in the Medium app.

One of my colleagues is transitioning to the front-end team that I used to be a part of. To prepare him mentally for his journey into front-end development, I’ve been sending him a newsletter I call Front-End Hack of the Day. I’m posting them to Medium now for the world to enjoy.

The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid. To wield CSS Grid effectively, you need to remember its properties and values.

You’ve probably noticed the number of CSS animation examples featuring on websites has been on the rise lately. Animation is one of the key web design trends of 2018. All over the web, designers are getting creative and using CSS animations to bring personality to their sites, explain complex ideas quickly and easily, and guide their users’ actions.

This approach is different from others you may have seen in that it uses a valid <table> (and child elements) and acknowledges that screen readers no longer consider <table>s to be tables when you start messing with their display properties.

As we all (should) probably know by now, specificity is is one of CSS’ most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don’t use IDs in CSS, and we don’t nest selectors unless absolutely necessary.

BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers.

One of the biggest—if not most common—complaints about OOCSS is its use of ‘insemantic classes’. Unfortunately, the idea that classes are semantic (in the HTML sense of the term) is something of a fallacy.