CSS can conflict with parent rules

[dmorrison42]

With certain parent CSS rules, it is possible to break styling (accidentally).

This can be seen with this Sphinx theme https://github.com/snide/sphinx_rtd_theme.

For example see the template below:

{% extends "!layout.html" %}

{%- block extrahead %} 
<script src="/_static/json-schema-view.min.js"></script>
<link rel="stylesheet" href="/_static/json-schema-view.min.css"></script>
<script>
window.addEventListener('load', function () {
    var view;
    var codeBlocks = document.getElementsByClassName('highlight-jsonschema');
    for (var i = 0; i < codeBlocks.length; i++) {
        try {
            view = new JSONSchemaView(JSON.parse(codeBlocks[i].textContent));
        } catch (e) {
            console.log(e)
        }
        codeBlocks[i].parentElement.replaceChild(view.render(), codeBlocks[i]);
    }
});
</script>
<style>
.json-schema-view .property, 
json-schema-view .property {
    display: table-row !important;
}
</style>
{% endblock %}

[mohsen1]

Every CSS class is scoped under json-schema-view class.

Do you mean CSS from this module is effecting other elements or the other way around?

[dmorrison42]

The following rule from the Sphinx theme is causing the view to break.

 .rst-content dl:not(.docutils) .property {
    display: inline-block;
    padding-right: 8px;
}

[mohsen1]

We can't add !important to all properties to avoid this. It's a problem in Sphinx rule that over-target elements.

[dmorrison42]

I would generally agree, especially with the fact that we shouldn't use !important everywhere.

One possible option would be inline styles, but I understand if that's not a direction we want to go in either.

One other possibility may be to make the rules more specific so that the :not selector is less of a problem.

I'm OK with my current work around, because the parent CSS will always be able to create a rule that will break things, but it would obviously be ideal if it wasn't needed.

[mohsen1]

The acceptable solution is to prepend all of classes with some specific prefix. For example jsv--property instead of property. It should be done via tooling and not by hand.

I don't have the time to do that but will review a pull request if you make one. :)