Nested complexity

Post-it note sketch of boxes nested within boxes.

I feel stalled out right now.

For the last two weeks, I have been working on getting a new layout for the site created in CSS now that I have a development environment that allows me to iterate quickly

However, understanding how all of the CSS styles work together as well as learning the latest CSS for flexbox and grid is taking longer than I thought.

The problem is that for someone with a basic understanding of HTML/CSS/JS, a Ghost blog is a complex beast, especially if you want to actually understand how everything works and not just 'use it'.

Much of what's causing me trouble right now is understanding all of the specifics because reality has a surprising amount of detail. I have a good general understanding of CSS but I don't know all of the specifics of implementation and how to get it working in the way that I want. It's complex enough to require a slightly different approach.

The basics of complexity

When tackling any sufficiently complex problem getting down to some sort of bedrock is essential. You need to start from a place of good understanding even if it seems like something small and insignificant.

I have heard that the essence of good programming is being able to break down a complex problem into smaller parts. A website operates on known rules of logic so the complexity is built upon rules and those can be understood on their own to gain understanding of the whole.

After spending some time leap-frogging around to different things to make some progress I have limited myself to learning the basics of CSS grid in a sandbox 'site' on my local machine.

I will then apply some of that to a local branch of my site and then push it to the live site once I have something that I really understand.

Frustration

Another aspect of learning is getting frustrated when something doesn't make sense.

My current frustration is that I don't like how CSS works. I think in terms of components and it seems that CSS works in terms of pages.

I want to create some basic rules of styling and layout and then embed components that share common types of behavior.

So far it seems like much of the various javascript frameworks are all attempting to do the same thing: bring programmatic thinking and tooling to websites. It seems like much of the modern tooling of the web is trying to solve for this frustration.

It's been frustrating, but it's pushed me to slow down and start small. That's never been a bad idea.