A visual way to understand CSS specificity. Change the selectors or paste in your own.

Some solutions to common layouting issues

"I hope that this post has extended your vision on web performance beyond the well known barrier app vs network, and that this help you to rethink or improve your app architecture."

"As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours."

CheatSheet for flex

CheatSheet for grid

"Due to recently disclosed security vulnerabilities for nearly all computers, you should disable any JavaScript cookie manipulation on your website (e.g. when using the critical CSS technique) by setting your cookies to be SameSite and HttpOnly on the server, as recommended on the Chromium wiki. Otherwise, sensitive data, like session keys, may be exposed to malicious third parties."

The next time you get something done with DevTools, ask yourself if it makes sense to automate it, and how much time this will save down-the-line.

What to expect in 2018?

• Always prefer classes
• Co-locate component code
• Use consistent class namespacing
• Maintain a strict mapping between namespaces and filenames
• Prevent leaking styles outside the component
• Prevent leaking styles inside the component
• Respect component boundaries
• Integrate external styles loosely

CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, if you didn’t code your animations with performance in mind and add more complexity, website users will soon take notice and possibly get annoyed.

Critical extracts & inlines critical-path (above-the-fold) CSS from HTML