Refactor templates to use classes instead of inline style tags #36
Description
For example:
Now:
<div style="text-align: center">
<div style="display: inline-block" class="mui-panel">…</div>
</div>Desired:
<div class="notifications-container">
<div class="mui-panel">…</div>
</div>Elsewhere in a <style> tag or included .css file:
.notification-container {
text-align: center;
}
.notification-container > .mui-panel {
display: inline-block
}The reason to do it this way is it's easier to maintain a consistent style across pages, and it can eliminate a lot of redundancy. Once you give semantic class names to the structure of the document you can re-use them across multiple pages and restyle them all by editing the common CSS, rather than finding a whole bunch of unrelated style attributes in multiple documents and changing them all consistently.
style attributes should only really be used if necessary, e.g. dynamically setting the position of an element with some javascript (which is the kind of thing that you almost never need, some combination of flex and/or grid can do just about any layout). Mixing and matching them can cause issues with specificity since style attributes have a very high weight.