Refactor templates to use classes instead of inline style tags

[etrepum]

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.

[tylerIams]

Ok, we are still making some large scale changes to the way the templates are organized, but this is good, I will implement it. I think the major problem with workflow has been that I'm not using pull requests properly. I am kicking myself for this one, especially because it was made way before the vast amount of changes we had made were actually ready for review.

…

On Wed, Aug 14, 2019 at 2:11 PM Bob Ippolito ***@***.***> wrote: 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 <https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_CSS_Specificity&d=DwMFaQ&c=qgVugHHq3rzouXkEXdxBNQ&r=KpANKktvOUT8t5L4AGgt31o0sFSBGC3hL1OxI-Umyek&m=jthZn8z2P1B4aIQ4txs7C39TDJEBYD5DAioBn8ijsKI&s=LYxKv3QFAXh26bcMz8XFGLkOyraYqcV4207BDnM25r0&e=> since style attributes have a very high weight. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_MissionBit_MB-5FPortal_issues_36-3Femail-5Fsource-3Dnotifications-26email-5Ftoken-3DAJBUYCDY47C2DGM5L4MD74DQERYJNA5CNFSM4ILY7YC2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HFJ2DLQ&d=DwMFaQ&c=qgVugHHq3rzouXkEXdxBNQ&r=KpANKktvOUT8t5L4AGgt31o0sFSBGC3hL1OxI-Umyek&m=jthZn8z2P1B4aIQ4txs7C39TDJEBYD5DAioBn8ijsKI&s=CPrpyZ3ava3AZBllsUuuXxf0-kiwrpj46dnMFFT0SHQ&e=>, or mute the thread <https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AJBUYCDJAB4HSR6F7RLIOLDQERYJNANCNFSM4ILY7YCQ&d=DwMFaQ&c=qgVugHHq3rzouXkEXdxBNQ&r=KpANKktvOUT8t5L4AGgt31o0sFSBGC3hL1OxI-Umyek&m=jthZn8z2P1B4aIQ4txs7C39TDJEBYD5DAioBn8ijsKI&s=-6M7NhGQO8DHcqg9-qWU7caro4_CfSBBN5hsevcnOdw&e=> .

-- Best, Tyler Iams

[etrepum]

It's ok to open pull requests for things that are not ready to merge yet to get early feedback. GitHub even added draft pull requests for this purpose: https://github.blog/2019-02-14-introducing-draft-pull-requests/