The subject we’ll be tackling is how to make clean, logical, stable changes to the CSS of your WordPress site. We’ll be accounting for the fact that this often involves overriding existing CSS styles from the original parent theme, as well as plugin files, while leaving them intact—meaning that you’ll be working within a large, often complex landscape of overlapping CSS styles.
For this article, it’s best if you have general understanding of the following:
- Cascading Style Sheets (CSS)
- Good ways of editing theme resources, either by working inside a child theme or a custom CSS plugin (not the original theme stylesheet!)
- Using Chrome Developer Tools (the “Inspect element” option when you right-click in Chrome), or a similar tool in another browser.
If any of the above is new to you, now’s a great time to learn those things! We’ll be here.
We’ll look at the two core concepts you need to make intelligent CSS changes to your WordPress site, and then look at a couple of case studies to draw out principles to work from.
Core concepts: breadth and specificity
Every styling change you make needs to get two things right:
This was an awesome post
For English speakers (thanks Google translate): “Although it may seem like another thing to learn, a grounding in just the basics of syntax with respect to hierarchy makes things an order of magnitude easier to read, and much less wordy.”
Well said!
[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painfulspecificity olympics—or, worse, !important contests—you’d otherwise […]
[…] This type of unusable, uninterpretable styling rule frequently and needlessly complicates working in WordPress, and requires unreasonable amounts of creativity to work around. […]
[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painful specificity olympics—or, worse, !important contests—you’d otherwise […]
[…] and WordPress takes care of the rest. Used well, this lets you avoid some of the more painful specificity olympics—or, worse, !important contests—you’d otherwise […]
I actually do not know much about css, but I am curious about the colors and layout tatak my website. so I often try
(but I’ve backup my website before I practice)
The one thing that keeps my CSS sane and legible is not to edit it directly at all, but instead to use less and compile it to CSS every time I save (I use WinLess, there are many other compilers to choose from). Although it may seem like another thing to learn, a grounding in just the basics of the syntax with respect to hierarchy make things an order of magnitude easier to rea, and much less verbose.
The end result of selectors like the button example above may be spaghetti, but trying to craft such code by hand is grief, and considerably more error-prone.