Changes in css of the parent theme certainly can do a lot of “damage”, even if you’re using child themes.
As a theme author it’s good to take as many precautions as possible when making changes, but it’s impossible to imagine all (weird) uses people think of.
It has happened to me often enough so that I don’t use child themes and don’t automatically update themes anymore; but I do read through the list of changes so from time to time I make minor changes.
This is a weakness in the system (but I remember the situation before WordPress very well, so I do not complain).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@dpu, are you saying your CSS in your Child Theme style.css file was lost on the update?
I think what happened (as it has happened to me a couple of times) is that new css rules were introduced that had unintended effect on this specific child theme.
Generally speacking, you cannot rely on changes in the parent’s css not affecting your child theme. For example:
* {
transition: 0.4s ease-in-out;
-webkit-transition: 0.4s ease-in-out;
}
might be nice to add, but not to everyone’s liking.
I don’t think there’s a useful way around it.
So updates need to be checked, which takes time.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you don’t want to inherit updates from the parent’s stylesheet, you can just choose not to enqueue it. Or not to @import it, depending on how to set it up. So, if you do that you can just copy the parent theme’s CSS code itself into your Child Theme css file.
Thread Starter
dpu
(@dpu)
Concerning the CSS in my Child Theme, nothing was lost.
However, after the update, all the bullet points were not displayed anymore and I had to go back to get my bullet points again.
Thread Starter
dpu
(@dpu)
For your information, here is my child CSS/style.css (I mainly added rounded boxes):
pre {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: auto;
margin: 0;
padding: 6px 10px;
border: 1px solid #aaa;
border-bottom-color: #ccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
outline: none;
background: #f4f4f4;
-webkit-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
vertical-align: middle;
overflow-x: auto;
word-wrap: normal;
white-space: pre;
}
