Hello Reader,
Last week, I talked about how CSS is like a strange puzzle.
Like a regular puzzle, when we write CSS, we need to figure out how to fit all the pieces together properly.
But it’s made more complicated because each piece can change it’s size and position.
Despite that, we still need everything to fit together.
There are so many variables at play at any given time that it sometimes feels like we’re just hoping for the best.
And in a way, we are only hoping for the best because as hard as we might try, it’s the user on the other end who has the final control over everything.
What do I mean by that?
Here’s a quick, incomplete list of things that can impact how things look that we, as the author of how the page is supposed to look, have no control over:
- The operating system
- The browser
- Viewport size
- System settings, like light/dark and even font size adjustments
And that doesn’t even include things like the limitations of certain devices, like the colors they can display or the device's pixel density.
When we create a page with CSS, we cannot know what the end user is seeing.
Once you come to terms with that, it can change how you approach writing CSS!
That’s why I strongly believe that one of the most common reasons people struggle with CSS is that they approach writing it with the wrong mindset.
People approach it trying to tell the browser exactly what to do, throwing things like width: 100vw in where it’s not needed (and causing problems), or trying to force things to behave in overly specified ways, which lead to issues.
Instead of forcing the issue, we need to write code that can adapt to whatever is thrown at it.
The absolute simplest example of this is something like a container/wrapper class, where instead of declaring a fixed width for our layout (like we might have done in the late 90s and into the 2000s), we instead use a max-width.
We want to set a maximum size on our layout, but we need it to be able to adapt to when a user is on a smaller device, or has a smaller browser window opened on their desktop.
And while that is a simple thing that most people understand, a lot of people stop there.
However, every line of CSS we write should take that same approach!
We need to set constraints and push things in the right direction instead of simply assigning an absolute value and then getting frustrated when we run into problems.
Instead of getting frustrated because we feel that what we wrote should work, we need to step back and consider why it’s not.
After all, a website without CSS is already responsive*, so we need to work with the browser and remember that when problems happen, we wrote the code that caused those problems.
*most of the time. Images, iframes, and other replaced elements do need a little help from us.
🙋♂️ What I’ve been up to this week
Responsive Bento Grid
This was a bit of a longer video than I’d planned it to be, but I had fun exploring custom properties in building out this Frontend Mentor Bento grid challenge 🙂.
⚡ Quick tips of the week
|
|
🎙️ Podcast
Navigating CSS Layout Decisions
Inspired by recent articles from Andy Bell and Alex Riviere (linked in the links section below), I explore a bit of my own decision-making process when deciding between Flexbox and Grid.
This leads to me talking about intrinsic and content-first layouts as well, and how the most important thing is that we're thinking about the decisions that we're making.
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB
|
|
🔗 Other awesome stuff around from the web
🏁
On a completely different note, if ever you’ve been wondering why we have logical properties like margin-block-start, and even shorthands like padding-inline, but we have no way to make the margin, padding, or inset shorthands behave in a logical way, you can help fund the initiative to make it happen!
Have a fantastic week!
Kevin
P.S. A quick reminder, to check out CSS Demystified, if you are interested in it 🙂