I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. My application heavily relies on hardcoded HTML and CSS styles, much of which is contained within Ext components such as panels and tab panels. Since this HTML is a descendant of the Ext components' elements, it inherits the CSS reset styling, causing conflicts with the custom styling of the non-Ext HTML.
There are two specific CSS rules that are causing problems:
.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}
Dealing with the box-sizing property was manageable by creating a custom reset wrapper class that reverted the box-sizing back to 'content-box' and applying it to the topmost wrapper element in the custom HTML. The rule looks like this:
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
However, the other CSS rule is more challenging to address:
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}
This particular rule poses a challenge because the different elements in my custom HTML do not all require the same margin and padding settings. Overriding these styles in the same manner as the box-sizing property is not feasible. The high specificity of these selector rules gives them precedence over many of my custom CSS styles. For example, the ".x-reset div" selector's margin/padding styles override those set by a rule like ".my-cool-class { padding: 5px; margin: 5px; }".
To address this issue, I could increase the specificity of my custom CSS rules by either prefixing class selectors with the element type they target (e.g., "div.my-cool-class") or prefixing the rules with .x-reset (e.g., ".x-reset .my-cool-class"). However, both options would require extensive manual updating of existing custom CSS, increasing file size and reducing modularity of CSS classes.
Is there a solution through Ext's settings or another CSS method that I may have overlooked that can elegantly solve this problem with minimal overhead?