Refactor css scripts to best practice.

src/styles.scss

@@ -1,9 +1,20 @@
 /* You can add global styles to this file, and also import other style files */
+.declaration-order {
+  /* Positioning */
+  /* Box-model */
+  /* Typography */
+  /* Visual */
+  /* Misc */
+}
 @import "~bootstrap/dist/css/bootstrap.css";
 @import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
 
+html,
+body { height: 100%; }
+
 body {
-  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  font-family: Roboto, 'Roboto', sans-serif;
   background: #fafafa;
 }
 
@@ -12,35 +23,48 @@ p {
   font-size: 1.1em;
   font-weight: 300;
   line-height: 1.7em;
-  color: #000000;
+  color: #000;
 }
 
-a, a:hover, a:focus {
+a,
-  color: inherit;
+a:hover,
+a:focus {
   text-decoration: none;
-  transition: all 0.3s;
+  color: inherit;
+  transition: all .3s;
 }
 
 .wrapper {
+  perspective: 1500px;
+  align-items: stretch;
   display: flex;
   width: 100%;
-  align-items: stretch;
   height: 100vh;
-  perspective: 1500px;
 }
 
+ul ul a {
+  padding-left: 30px;
+  font-size: .9em;
+  background: #6d7fcc;
+}
+
+.full-width,
+table { width: 100%; }
+
+li.breadcrumb-item.active,
+footer.footer { color: black; }
+
 #sidebar {
-  min-width: 250px;
-  max-width: 250px;
-  height: 100vh;
-  position: -webkit-sticky;
   position: sticky;
+  position: -webkit-sticky;
   top: 0;
   left: 0;
   z-index: 9999;
+  min-width: 250px;
+  max-width: 250px;
+  height: 100vh;
   background: #313a46;
   color: #fff;
-  transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
   transform-origin: center left;
 }
 
@@ -48,7 +72,6 @@ a, a:hover, a:focus {
   min-width: 100px;
   max-width: 100px;
   text-align: center;
-  transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
 }
 
 #sidebar .sidebar-header {
@@ -56,55 +79,44 @@ a, a:hover, a:focus {
   background: #313a46;
 }
 
-#sidebar .sidebar-header strong {
+#sidebar .sidebar-header strong,
-  display: none;
+#sidebar.active .sidebar-header h3 { display: none; }
-}
 
-#sidebar.active .sidebar-header h3 {
+#sidebar.active .sidebar-header strong { display: block; }
-  display: none;
-}
-
-#sidebar.active .sidebar-header strong {
-  display: block;
-}
 
 #sidebar ul li a {
-  color: #ffffff;
+  display: block;
+  padding: 10px;
   text-align: left;
+  font-size: 1.1em;
+  color: #fff;
 }
 
-#sidebar ul li a.active {
+#sidebar ul li a.active,
-  background: #000000;
+#sidebar.active ul li a.active { background: #000; }
-}
 
 #sidebar.active ul li a {
   padding: 20px 10px;
+  font-size: .85em;
   text-align: center;
-  font-size: 0.85em;
-}
-
-#sidebar.active ul li a.active {
-  background: #000000;
 }
 
 #sidebar.active ul li a i {
-  margin-right: 0;
   display: block;
-  font-size: 1.8em;
+  margin-right: 0;
   margin-bottom: 5px;
+  font-size: 1.8em;
 }
 
-#sidebar.active ul li a {
+#sidebar.active ul li a { padding: 10px; }
-  padding: 10px !important;
-}
 
 #sidebar.active .dropdown-toggle::after {
   top: auto;
   bottom: 10px;
   right: 50%;
-  -webkit-transform: translateX(50%);
-  -ms-transform: translateX(50%);
   transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  -webkit-transform: translateX(50%);
 }
 
 #sidebar ul.components {
@@ -113,14 +125,8 @@ a, a:hover, a:focus {
 }
 
 #sidebar ul p {
+  padding: 10px;
   color: #fff;
-  padding: 10px;
-}
-
-#sidebar ul li a {
-  padding: 10px;
-  font-size: 1.1em;
-  display: block;
 }
 
 #sidebar ul li a:hover {
@@ -128,40 +134,32 @@ a, a:hover, a:focus {
   background: #fff;
 }
 
-#sidebar ul li.active > a, a[aria-expanded="true"] {
+#sidebar ul li.active > a,
+a[aria-expanded="true"] {
   color: #fff;
   background: #313a46;
 }
 
-ul ul a {
+a[data-toggle="collapse"] { position: relative; }
-  font-size: 0.9em !important;
-  padding-left: 30px !important;
-  background: #6d7fcc;
-}
-
-a[data-toggle="collapse"] {
-  position: relative;
-}
 
 .dropdown-toggle::after {
-  display: block;
   position: absolute;
   top: 50%;
   right: 20%;
+  display: block;
   transform: translateY(-50%);
 }
 
 #content {
-  width: 100%;
   position: relative;
   overflow: auto;
+  width: 100%;
   min-height: 100vh;
-  transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-}
-
-#content.active {
-  transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
 }
+#sidebar,
+#sidebar.active,
+#content,
+#content.active { transition: all .3s cubic-bezier(.945, .020, .270, .665); }
 
 #sidebarCollapse {
   width: 40px;
@@ -170,84 +168,57 @@ a[data-toggle="collapse"] {
 }
 
 #sidebarCollapse span {
+  display: block;
   width: 80%;
   height: 2px;
   margin: 0 auto;
-  display: block;
   background: #555;
-  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
+  transition: all .8s cubic-bezier(.810, -.330, .345, 1.375);
 }
 
-#sidebarCollapse span:first-of-type {
+#sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
-  /* rotate first one */
-  transform: rotate(45deg) translate(2px, 2px);
-}
 
-#sidebarCollapse span:nth-of-type(2) {
+#sidebarCollapse span:nth-of-type(2) { opacity: 0; }
-  /* second one is not visible */
-  opacity: 0;
-}
 
-#sidebarCollapse span:last-of-type {
+#sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
-  /* rotate third one */
-  transform: rotate(-45deg) translate(1px, -1px);
-}
 
 #sidebarCollapse.active span {
-  /* no rotation */
-  transform: none;
-  /* all bars are visible */
-  opacity: 1;
   margin: 5px auto;
+  transform: none;
+  opacity: 1;
 }
 
 .footer {
-  color: #98a6ad;
   padding: 10px;
   text-align: center;
+  color: #98a6ad;
 }
 
-.mat-column-select {
+.mat-column-select { overflow: initial; }
-  overflow: initial;
-}
 
-button {
+button { height: 2.5rem; }
-  height: 2.5rem;
-}
 
-.badge-pill {
+.badge-pill { width: 5rem; }
-  width: 5rem;
-}
 
 .mat-column {
-  word-wrap: break-word !important;
+  word-wrap: break-word;
-  white-space: unset !important;
+  white-space: unset;
   overflow-wrap: break-word;
   word-break: break-word;
+  hyphens: auto;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
-  hyphens: auto;
 }
 
 .mat-column-address {
-  flex: 0 0 30% !important;
+  flex: 0 0 30%;
-  width: 30% !important;
+  width: 30%;
 }
 
 .mat-column-supply {
-  flex: 0 0 25% !important;
+  flex: 0 0 25%;
-  width: 25% !important;
+  width: 25%;
-}
-
-.mat-column-select {
-  flex: 0 0 10% !important;
-  width: 10% !important;
-}
-
-.mat-column-view {
-  flex: 0 0 5% !important;
-  width: 5% !important;
 }
 
 .center-body {
@@ -256,103 +227,70 @@ button {
 }
 
 @media (max-width: 768px) {
-  #sidebar {
-    margin-left: 0;
-  }
-
   #sidebar.active {
     min-width: 100px;
     max-width: 100px;
+    margin-left: -100px;
     text-align: center;
-    margin-left: -100px !important;
   }
 
-  #sidebar .sidebar-header strong {
+  #sidebar .sidebar-header strong,
-    display: none;
+  #sidebar.active .sidebar-header h3 { display: none; }
-  }
 
-  #sidebar.active .sidebar-header h3 {
+  #sidebar.active .sidebar-header strong,
-    display: none;
+  #sidebar.active ul li a i { display: block; }
-  }
-
-  #sidebar.active .sidebar-header strong {
-    display: block;
-  }
 
   #sidebar.active ul li a {
     padding: 20px 10px;
-    font-size: 0.85em;
+    font-size: .85em;
   }
 
   #sidebar.active ul li a i {
     margin-right: 0;
-    display: block;
-    font-size: 1.8em;
     margin-bottom: 5px;
+    font-size: 1.8em;
   }
 
-  #sidebar.active ul ul a {
+  #sidebar.active ul ul a { padding: 10px; }
-    padding: 10px !important;
-  }
 
   .dropdown-toggle::after {
     top: auto;
     bottom: 10px;
     right: 50%;
-    -webkit-transform: translateX(50%);
-    -ms-transform: translateX(50%);
     transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    -webkit-transform: translateX(50%);
   }
 
-  #content, #content.active {
+  #content,
-    height: 100vh;
+  #content.active {
     position: fixed;
-    margin-left: 0;
+    height: 100vh;
   }
 
-  #content .menutoggle {
+  #content .menutoggle { margin-left: 250px; }
-    margin-left: 250px;
-    transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-  }
 
-  #content.active .menutoggle {
+  #sidebar,
-    margin-left: 0;
+  #content,
-    transition: all 0.3s cubic-bezier(0.945, 0.020, 0.270, 0.665);
+  #content.active,
-  }
+  #content.active .menutoggle { margin-left: 0; }
+
+  #content .menutoggle,
+  #content.active .menutoggle { transition: all .3s cubic-bezier(.945, .020, .270, .665); }
 
   #sidebarCollapse span:first-of-type,
   #sidebarCollapse span:nth-of-type(2),
   #sidebarCollapse span:last-of-type {
+    margin: 5px auto;
     transform: none;
     opacity: 1;
-    margin: 5px auto;
   }
 
-  #sidebarCollapse.active span {
+  #sidebarCollapse.active span { margin: 0 auto; }
-    margin: 0 auto;
-  }
 
-  #sidebarCollapse.active span:first-of-type {
+  #sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); }
-    transform: rotate(45deg) translate(2px, 2px);
-  }
 
-  #sidebarCollapse.active span:nth-of-type(2) {
+  #sidebarCollapse.active span:nth-of-type(2) { opacity: 0; }
-    opacity: 0;
-  }
 
-  #sidebarCollapse.active span:last-of-type {
+  #sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); }
-    transform: rotate(-45deg) translate(1px, -1px);
-  }
-
-}
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-.full-width, table {
-  width: 100%;
-}
-
-li.breadcrumb-item.active, footer.footer {
-  color: black;
 }