We Keep Coding

How to apply styling for 3rd party css framework like bootstrap

Im working on react web app which has less file for its styling. As
shown below, EnPage is a 3rd party component, which has content within
it, Actually the main element class "page-body" has some styling
issue, so I want to overwrite it with a styling fix
<div class="Banner">
<EnPage>
<div class="page">
<main class="page-body"> ...</main>
</div>
</EnPage>
</div>
when on hovering over in chrome devtools, I can see
.page-body {
padding-right : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
padding-left : var( --page-content-screen-lg-horizontal-padding , var(--spacing-m));
}
In dev tools, if set these both attributes to 0, then it fixes styling
issue
.page-body {
padding-right : 0;
padding-left : 0;
}
Now how to do this code , like the below?
.Banner {
--page-content-screen-lg-horizontal-padding : 0;
}

Generally third parts materials generate custom classes that style your element. Normally, their classes are inyected after yours, to be sure that their styles have precedence over inherited or previously defined styles.
Things you should try:
1 - Read the documentation of the material library.
Depending on the material library you are using, they may provide a custom way to overpass their basic styles. Some do, other don't. Please be sure to check their documentation to see if this is the case.This is always the best option as you are ensuring the material will work as designed and will not cause any bugs or conflicts.
2 - Give an id to your element and place your custom styles on the id.
This works because CSS styles are defined based on specificty precedence. As ids are more specific than classes, these styles have priority over the ones defined by classes.
Example:
html:
<main class="page-body" id="page-body"> ...</main>
css:
#page-body {
padding-right: 0;
padding-left: 0;
}
3 - If nothing else seems to work and you really need to replace the material style, you could use !important. But please note that this is a bad practice and many state that !important really shouldn't exist in the first place, as if your need to use it is because you are not understanding css precedences rules and you are just hacking the css logics.
Putting this duscission aside, you may place !important after your declaration and this is going to enforce your rule over any other that might exist.
Example:
.page-body {
padding-right: 0 !important;
padding-left: 0 !important;
}
Did I mention this is a bad idea?
If you want to read more about css precedence:
What is the order of precedence for CSS?
https://css-tricks.com/precedence-css-order-css-matters/

Disable/Remove default !important declarations in elements

I have a CSS conflict going on with a major plugin in my wordpress site. The plugin maker found it handy to add !important declarations throughout all their styling sheets. From a developer's perspective; this is a disaster. In their defense they want to cover all themes that are using !important declarations, so it looks consistent. I do not agree, so I need a solution.
What happens is that my premium theme, who's not using those declarations, cannot override the styling. I have some solutions to remove certain classes by jQuery.
But there is a problem which cannot be resolved by removing classes. For example, the anchor:hover is default as border: none !important by the plugin. But I would like to see is that the anchor:hover border option is actually applied via the theme settings. The applied CSS is this (be aware that the .plugin class is not applied in the anchor, just from a CSS file):
.plugin a { border: none !important; }
Is there any way I can disable certain class combinations from the DOM? I'm happy to have this done with php or jQuery. Something like: .plugin is not applied to anchor I have no idea how to resolve this.

Surely this is just a case of overwriting the css with a better specified css line.
For example if the code is:
.plugin a::hover { border: none !important; }
You can overwrite this by doing:
body .plugin a::hover { border: 1px solid grey !important; }
Because you have added the element body to your css line it adds extra specificity meaning it overwrites the plugins css. You unfortunately have to use !important, as !important throws regular specificity ruling out the window (bad plugin creator).
More on css specificity here

Do you need any of the styles provided by the plugin? If not then it might be worth looking at dequeueing the plugin styles altogether and just adding your own styles where the theme doesn't cover it.
If you find out the registered name of the stylesheet (should be in the style tag) you can dequeue it with something like:
function remove_push_plugin_styles() {
wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );

You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:
var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.
The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.

How to block outer CSS to modify div

Scenario
Visit this link for Codehttps://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info
I do not want my innerDiv to get modified by CSS in outerDiv.
Is there some way to achieve this?
(contents(HTML) of InnerDiv are loaded via ajax call , and the resulting page already has its own CSS and both CSS files are messing up all the layouts and formats)

From a previous answer: all: initial isn't supported by Edge (Safari is finally OK)
So you can reset manually a hundred of properties if you really really really want to be sure (forget the most obscure ones you know you don't use. If you're a third party, well no luck).
You can (should) add the !important modifier (that's one of those cases where it isn't possible to do in some other way... Fine for me at least)
You can also add a whole lot of specificity to your selectors by adding an id to your component's parent and prefix each of your selectors with that id: #myComponent.my-component .my-component-descendant { color: #333 !important; }. If your existing CSS already uses id (meh), you can go even further (lower, quality wise) and use the same id multiple times in a single selector. #myComponent#myComponent#myComponent.my-component .my-component-descendant { color: #333 !important; }. What is one the crappiest thing you can imagine in a sane project is also a powerful tool when you need to add "enough" specificity.
Food for thought: the modern way of setting box-sizing by setting it on :root and then letting inheritance do its job can be helpful (or not) https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
Advantage: if you set another value on a descendant, descendants of the latter will inherit from it. You now have a whole part of your DOM inheriting from another value.

You can override the properties in you innerdiv; here I have overwritten the background-color property of the outerdiv
#outerMostDiv {background-color:red;}
#innerDiv {background-color:yellow;}
<div id="outerMostDiv">
<!-- SOME CSS HERE (say Outer CSS)-->
outer div
<div id="innerDiv">
<!-- some CSS HERE -->
innerdiv
</div>
</div>

CSS overriding UI properties - with or without !important

I want to override default Dropdown properties that belong to react semantic UI
Here is my dropdown:
<Dropdown
placeholder="User"
selection
compact
options={userOptions}
/>
The text in my dropdown has too much padding so in my CSS I removed it like so:
.default.text {
font-size: 10px;
padding: 0;
}
I got rid of the padding from the Dropdown icon as well:
.dropdown.icon {
padding: 0 !important;
}
However, as you can see this only worked when I used !important
Related questions:
How come the icon padding only works by using !important -- the text padding did not need !important
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

Use a higher css rule specificity, like:
.somegrandparent .someparent .dropdown.icon {
padding:0;
}
How come the icon padding only works by using !important -- the text
padding did not need !important
Your one rule is working without !important as it might already have a higher specificity whereas the other did not.
I hear using !important is bad practice. Should I avoid using it at
all costs? How else do I override these properties / What are best
practices?
It is "ok" to use to override external libraries sparingly. But if it is possible to override by a higher specificity that is preferred as it will be easier to debug css conflicts / bugs.

Getting rid of background properties

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.

jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.