0012-css-styling-conventions

12. Conventions Regarding CSS Styling
-------------------------------------

Status
------

Accepted

Context
-------

Without a set of rules or guidelines on how CSS or SASS should be written in Paragon it is difficult to write css in a consistent way. We run into common pitfalls (e.g. class name conflicts or extraneous use of !important rules).

Decision
--------

We will adopt and expand the following guidelines:

- Avoid using the ``!important`` rule 
- Class names should use the prefix ``pgn__`` followed by class names that follow Bootstrap conventions. (See Bootstrap classname conventions: https://getbootstrap.com/docs/5.0/extend/approach/#classes). Note that this is not the BEM convention.
- Do not use CSS utility classes in Paragon components (e.g. ``className="d-flex"``).
- Avoid use of inline styles (e.g. ``style={{ color: 'red' }}``
- All SASS variables in Paragon must have the ``!default`` rule


Consequences
------------

SASS that is in the library that does not conform to these rules should be gradually refactored. We should create SASS or JSX lint rules to enforce these guidelines where possible.

References
----------

* https://getbootstrap.com/docs/5.0/extend/approach/#classes