The Cost of Complexity

Modern web development is weird.

Complex things are a lot easier to build than they used to be. Interactive pages, reusable components, lightning fast sites; all a matter of finding the right libraries, frameworks, and toolsets. Sometimes, though, they feel like increasingly byzantine houses of cards, precariously balanced and waiting for a light gust of wind to make it all crash.

I'm reminded of a public website I worked on a few years back. The client called us in a fit because their site's store locator suddenly stopped working. After a brief investigation, it turns out that we had hit some request limit on our maps service. It was easily resolved, but it stuck us with a few hours of analysis, pulling us off other client work. It really drove home the point that anything on the Internet is a living document, subject to change or break without you having to do anything.

So, complexity. Pick a "modern" web framework like React, Angular, or Vue and you have options and third-party tools to do virtually anything with minimal setup. You have a lot of choices to make, though, and it's hard to know where to start. Let's look at an example.

Choosing a CSS Approach

Where and how do you put your CSS? Sounds like a simple thing, but you can do some combination of the following:

• Go "old school" and stick a global style sheet in a top-level directory
• Use CSS modules so that most styles are scoped to components, relying only on a small set of global styles for common elements
• Use a CSS preprocessor (like SASS) to build and configure styles, mixins, and variables that global and component-scoped CSS can use
• Use CSS variables to configure global variables
• Use a third-party CSS library like Bootstrap that gives you a swath of opinionated CSS classes that affect styling and layout
• Use a third-party like TailwindCSS that gives you hundreds of semantically named, narrowly targeted utility classes
• Adopt a CSS naming methodology like BEM or CUBE
• Use CSS-in-JS, first selecting a specific library like Emotion to do so
• Use inline styles (😥)

I suspect that if you're working for a company with digital product maturity, there will be vocal advocates for the right combination of approaches. There will be direction decided, documentation written, and a constant battle to hold the line when it comes to maintaining consistency and standards. That's a slog, though, right? And when push comes to shove, standards seem to be the first thing to get tossed overboard.

I think it is, unfortunately, more realistic that most codebases built by more than a few people have a little of everything:

• Some component styles stuck in a global CSS file
• Some classes named in BEM format, others inexplicably titled something like "red-margin"
• A whole CSS library like Bootstrap imported and only used for its layout grid or buttons
• Inline styles for conditionally rendered content

Here's the thing, though: it works! You can get a pretty site out of it, it's just a nightmare to maintain. It can take hours of research to figure out where an update to a button class needs to get made and how to make it apply to more than a single implementation. We've then accumulated mountains of technical debt, and that sort of work is always an uphill battle to sell until the mountain threatens to topple over.

I have no real solution here. I think it's better to make decisions early and stick with them even if they have potential downsides because at least it's easier to change one big thing later than a hundred different small things. But...I'm not sure.

Jeez. This has got to be a nightmare for anyone who wants to start learning how to build things.