CSS has changed a lot in the last couple of years. It feels like we're getting new features monthly now. New features are well and all, but it's hard to keep up with what's fully supported or safe to use.
Ever struggle with CSS selectors and specificity? Here's a weird analogy for how to deal with selectors.
A native way to create modals and dialogs, accessible and keyboard-friendly, using only HTML and a tiny bit of Javascript.
Responsive design is more than just creating a mobile or tablet version of your site.
Naming things is hard, but when I create components I usually go for the same class names.
CSS has gotten a lot of new selectors in the last couple of years. Here's how the :where selector works, and why you should use it.
Sticky menus and headers look cool, but it's often violating a WCAG criteria and should be avoided.
When you want to define something directional, like padding-left or margin-top, it can be take into consideration what languages your website should support.
Styling is easy when you control the markup. You can add classes to your liking, and style them accordingly. Dealing with CMS-generated HTML however is another thing, having no control over the markup and attributes.
In SCSS it's possible to nest your CSS. It speeds up your workflow, but it also invites you to overdo it. Here's my two cents when it comes to when and how you should nest your code.
Building for the web has never been easier, but it's also never been easier to over-engineer the simplest of things.
Naming and using color variables is hard, but here's one way to do it.
You've probably been told to use REM instead of pixels for font sizes, but I think you should use it for everything. Here's why.
Learning is best by doing, and Codepen is a great tool to help you do just that.
There's no correct architecture for SCSS files and the management of them, but here's how I do it and why it works for me.
Ever embedded a video from Youtube, but struggled to make them behave the way you'd like? Here's how you can make the embeds full-width and responsive.
Container queries are here, and it’s possible to use them instead of width-based media queries
Adding icons to a website can be done in many different ways, but my favorite approach is to use SVGs inline in my HTML. Here's how.
CSS container queries gives us the power to alter components based on the context they are used in. But what if we don't know where they're being used?
Tips on how to create pill shaped buttons with CSS.
Earlier I've written about the implications that follow in Safari if you use list-style: none on lists. Here's an updated version of that.
A quick breakdown of how I reset the browser's default styling before I start writing my first lines of CSS.