In this post, we will see how to resolve Should child theme display all classes in WordPress theme editor?

Question:

I am working in the child theme of our parent theme and need to edit some css. Apart from the file – style.css – it seems that each css file I open in the theme editor in WordPress displays the entire css sheet whereas the style.css is a skeleton that I can just add the classes that I need to change. These additional css files reside in a folder – example being /assets/css/file.css.
Is it normal for those css files residing in a folder to load in the theme editor that way – in full? I have searched and searched and cannot find resolve. Newbie to WP and thought I would ask the question here?
Example:
a simple example of what I mean by ‘block”:
Where if I edit “h3” from 700 to 200 it will affect every class selector in the block.

Best Answer:

Yes, it is normal.
A CSS file is a file containing a set of rules, grouped by selectors that specify what patterns of elements should be affected by the rules inside the brackets, of the form of:
Now, if you open this file for editing, then actually most editors will open the file in full and you can edit the rules.
So, if an editor opens this file and does not show it to you in full for some reason, that’s different from normal, because it has to include a parser which somehow determines what part is shown to you and a parser that takes your changes into account and changes the file in a way that the “protected” content remains unchanged.
Yet, it would make more sense to separate the core rules that are not to be changed into a separate file, like core.css or so, so the rules that are allowed to be changed would be physically separated from the rules that are intended to be kept immutable.
EDIT
A problem statement in the comment-section of the question is given as follows:
a simple example of what I mean by ‘block”:
Where if I edit “h3” from 700 to 200 it will affect every class selector in the block.

Answer

Since you want to change the font-weight of h3 to a different value, then you can add a rule for it, like this:
In general it would be enough to just put an h3 rule below (!) your rule where you used a composite selection after the selection, because in CSS selectors of the same specificity, if in conflict with each-other, the rule specified later will take precedence. But, since you might not fully control the order of the rules (or maybe some other team member would change the order without knowing the side effects), it is good to make the rule you prefer more specific than the one you prefer less. So, the main rule will be applied for all selectors involved, and your other rule will take precedence. Read more here: https://blogs.halodoc.io/best-practices-that-we-follow-to-avoid-specificity-issues/
See the example below for a proof-of-concept:


Our rule for h3 in this example is twice determined with the same specificity, so the second rule takes precedence, whereas our rule for h4 is also determined, but the first has a more specific selector than the second, so the first rule for h4 takes precedence. You can use this to your advantage.
Note that the suggestion I have given may not be a solution for your case right away, because you may have some other rules. If so, you may want to create a snippet into your question with a minimal, reproducible example. For now I presume that this solution solves your problem, let me know if it’s not working out for you yet, it’s possible that you will need to share further details.

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com