One of the most frustrating aspects of working with old code is the inline styling that can’t be overridden with CSS. Usually, this means spending a significant amount of time combing through old (hopefully not unorganized) code to manually delete the inline styling, all the while the developer is thinking to him or herself, there has to be another way. It turns out, there actually is another way. By using the [style] parameter with your selectors in your CSS stylesheets, you can completely override any inline styling that might be in your HTML.
Let’s say that you have this inline styling on a div:
- <div class="myDiv" style="border: 1px solid #000"></div>
If you tried to override this in your CSS by just writing a new style for it like below, it probably wouldn’t work, even if you used the sometimes frowned-upon !important.
- .myDiv{
- border: none;
- }
However, if you pair your .myDiv selector with a [style] bracket and use the !important value, you can override that pesky inline styling fairly easily:
- .myDiv[style]{
- border: none !important;
- }
While this might not be considered the best practice way of doing things, there are many cases where it would be the easiest and quickest way to get rid of unwanted inline styling, and as a developer it’s definitely worth taking advantage of.