Hi everyone,
I want to start a discussion about an openedx-wide strategy to avoid CSS conflicts. I drafted a very early-stage work-in-progress OEP to propose a solution: docs: CSS best practices by jesperhodge · Pull Request #580 · openedx/open-edx-proposals · GitHub.
Will you help me shape this? Any opinion is valid and welcome here.
To understand the motivation: we had some very annoying bugs with CSS conflicts in the past, and I recently fixed a bug that was caused by CSS in a library component breaking HTML in the Authoring MFE. At this point our CSS files even break code in completely separate modules or projects. So I would really like to get us to make our CSS modular so that we will avoid all of these bugs.
There are many ways to solve this, my favorite at the moment is:
- CSS modules (GitHub - css-modules/css-modules: Documentation about css-modules) - I have used this in the past very successfully and it seems to be a good fit for us. It’s not a huge overhead to implement but still needs some changes to our codebases.
As a backup, we may just want to set certain ground rules for our CSS that require it being somewhat modular.