One of the most important tenets of any kind of writing content for the web is: Don’t Repeat Yourself (DRY).
If you want some text like h3’s to be purple, bold, large, and italic, it’s best not to do this:
<h2 style="font-size; 12px; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #003300; font-weight: bold;">Heading</h2>
<h2 style="font-size; 12px; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #003300; font-weight: bold;">Another heading that looks just like the previous one</h2>
<h2 style="font-size; 12px; font-family: Tahoma, Arial, Helvetica, sans-serif; color: #003300; font-weight: bold;">Look at that! A third heading that looks just like the previous two</h2>This code is really bad because it violates DRY. Because so much is repeated in the styling rules above, you now have the following problems:
- If you want to change anything, you have to change it multiple times.
- Your code is much bulkier and harder to read than it should be.
- Bulkier code is slower to load, thus, your pages load slower
If the extremely un-DRY markup above looks familiar, it’s because it’s the kind of thing that most WYSIWYG editors output. The reason—which is also the fatal flaw of WYSIWYG editors in general—is that they must obey rather than interpret. They can’t read your mind: they don’t know when you’re trying to say, “I want a third small blue thing, just like those other two except over here”; rather, they can only obey when you say, “I want this thing to be small and blue, and I want this other thing to be small and blue, and I also want this third thing to be small and blue.”
But that’s because WYSIWYG editors are mindless machines. Don’t be a mindless machine: write CSS class-based rules that capture repeated styles, as described above.
It’s also important to primarily use css styling so that the site looks consistent. Consistent sites look more professional and more authoritative. We want to avoid making our sites look like https://www.theworldsworstwebsiteever.com/
For most sites going forward I remove the option to adjust the colors via the WYSWIG text editor so we don’t run into this anymore. This can be done by adding some code to the child theme functions, such as by following this tutorial. https://thestizmedia.com/remove-buttons-items-wordpress-tinymce-editor/
If an h3 doesn’t seem like it’s behaving the same as it should, it probably has some unnecessary inline styles applied to it. You can just use a button in the text editor to clear that up:
I hope this is helpful.
