Why Won’t My CSS Work?! The Trials of Website Design

As many of you know by now, I have my own website. It is kind of a master copy of all my work. Things I post to Hive, things I post to Tumblr and Instagram, so on so forth — it all ends up there.

My site is run on WordPress. I used to run a theme coded from scratch, but when WordPress added the Twenty Nineteen theme, I liked it enough to switch and make a child theme of it. I’ve heavily customized it since, so you might not recognize it, but at its root, that’s the theme I’m using.

For local testing, I run MAMP on my computer — a simple way to host a WordPress installation offline. I keep a copy of my live site there, theme and all, so I can make changes in a safe sandbox. If nothing breaks, I copy the files over to the live server.

This usually works. Except when it doesn’t.

Case in point: The other day I spent way longer than I should have trying to massage the formatting of my tag archive pages to look nice. I have some grand vision of creating a kind of psudeo-wiki type structure with tag pages for various haiku poets and season words and everything linked together. That might sounds confusing, but it works in my head.

But tweaking the CSS has been a nightmare.

The problem is WordPress’s base CSS for the Twenty Nineteen theme. Some of its styles are way too aggressive. They override nearly everything — even when I write stronger rules in my child theme. You may not be familar with css, but let me tell you: writing a stronger rule should override a base rule; this is what the entire idea of child themes are based on, that you can create an easy add on that overrides the styles of the original you dislike. But WordPress doesn’t play by their own rules.

It shouldn’t be that hard, but half the time it feels like I’m trying to punch through concrete with a sponge.

Still, after a few hours of trial, error, and blood-pressure spikes, I finally got it looking halfway decent on my test site.

Somewhat satisfied, I uploaded the updated CSS and PHP files to the live server.

Reloaded. And…

Totally broken.

I can’t figure out why — because all the files are exactly the same. Same files, same code, same everything. But for some reason the css tweaks I made in my child theme that work in my testing environment, do not work on the live site. The base WordPress styles just steamrolled them again. It’s as if the live site looked at my lovingly crafted CSS and said, “Cute. No.”

I fiddled for a while, then went to bed.

I’m now seriously tempted to ditch the child theme entirely and just edit Twenty Nineteen directly. Yes, I’d lose automatic updates and the supposed best practice of separation. But I’d gain control. And right now that sounds better.

Haven’t touched it again since. Maybe next week I’ll come back to it with fresh eyes.

Hurm.

In the meantime, if you want to see what I was working on, go here to see a sample. All tag pages are affected by my edit, but the Bashō one is the only one I put a bio in for now.

Hi there! David is an American teacher and translator lost in Japan, trying to capture the beauty of this country one photo at a time and searching for the perfect haiku. He blogs here and at laspina.org. Write him on Bluesky.

【Support @dbooster with Hive SBI】



0
0
0.000
6 comments
avatar

I also used to get very frustrated with WordPress. So eventually, I dropped it. But I do seem to recall some of my child theme issues were solved by being meticulous with version numbering. Because WordPress calls the child theme with the version number: https://laspina.org/wp/wp-content/themes/2019-child/style.css?ver=1.0.0

So that's caused me caching issues in the past. But I don't think that is the problem here. If I interpret your issues correctly, they are:

  1. Remove Twenty Nineteen's mini rule above our tag subheading
  2. kill extra gap under the subheading article

The 'mini rule' is actually a dashed border on h2. So you can override this in many ways. Personally, I would just delete or comment out the original definition, border-top: 1px dashed rgba(149, 114, 169, 0.4); But I kinda like your self-documenting way of keeping the originals in place. So maybe just add border: none; to your override?

The extra gap is mostly down to padding-top: 1em; in the same definition. So you could override it with zero.

In my screenshot, I just disabled the offending rules in my browser. Is this what you're after?

CSS screenshot

!BBH

0
0
0.000
avatar

I used to work with Wordpress a great deal and in the end dropped it, partly because my work had taken me down a different path as a developer. I work more now with headless systems powered by APIs, using Tailwind css but I do recall the old themes and that it was often a struggle to override certain classes.

0
0
0.000
avatar

One of the most common things: works in the dev environment but doesn’t work in PRD :D

Sucks man, hopefully that snafu doesn’t happen to you again!

0
0
0.000
avatar

yeah.. I tried my hand at making a few sites, but nah.. not my thing. good luck to u. hope u can figure out all out..

0
0
0.000
avatar

I am very happy with html+css alone.
I use chatgpt to help me.
i need no cms for the things i build... it's all purpose-built and neat.
Until I need to add new features 😅

0
0
0.000