[S] Optimize other selectors

src/pages/overall/overall-course/course-head/course-head.scss

@@ -17,14 +17,14 @@
     text-align: left;
     float: left;
 
-    .course-name
+    #name
     {
         overflow: hidden;
         font-size: 22px;
         color: var(--main);
     }
 
-    .course-teacher
+    #teacher
     {
         font-size: 12px;
         color: #999999;
@@ -41,16 +41,16 @@
     // Adjust position
     margin-top: -2px;
 
-    .course-grade
+    #grade
     {
         font-size: 21px;
     }
 
-    .course-updates
+    #updates
     {
         font-size: 14px;
 
-        .unread-number
+        #unread-number
         {
             display: inline-block;
             width: 20px;
@@ -63,31 +63,30 @@
             margin-right: 3px;
         }
 
-        .unread-text
+        #unread-text
         {
             font-style: italic;
         }
     }
 
-    .course-updates.unread
+    #updates.unread
     {
-        .unread-number
+        #unread-number
         {
             background: var(--unread);
             color: white;
         }
 
-        .unread-text
+        #unread-text
         {
             color: var(--unread);
         }
     }
 
-    .course-updates.none
+    #course-updates.none
     {
         color: #999999;
-
+        #unread-number
-        .unread-number
         {
             background: #eeeeee;
         }

src/pages/overall/overall-course/course-head/course-head.vue

@@ -1,21 +1,19 @@
 <template>
     <div id="course-head" class="course-card-content main vertical-center"
          :class="clickable ? 'clickable' : ''" @click="redirect">
-            <div class="course-name">{{course.name}}</div>
-            <div class="course-teacher">{{course.teacherName}}</div>
         <div id="block-info">
+            <div id="name">{{course.name}}</div>
+            <div id="teacher">{{course.teacherName}}</div>
         </div>
         <div id="block-grade">
-            <div class="course-grade">
+            <div id="grade">
-                <span class="letter">{{course.letterGrade}} </span>
+                <span id="letter">{{course.letterGrade}} </span>
-                <span class="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
+                <span id="numeric">{{course.numericGrade === undefined ? '--' : course.numericGrade.toFixed(2)}}</span>
-                <span class="percent" v-if="course.numericGrade !== undefined">%</span>
+                <span id="percent" v-if="course.numericGrade !== undefined">%</span>
             </div>
-            <div class="course-updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
+            <div id="updates" @click="redirect" :class="unread === 0 ? 'none' : 'unread'">
-                <span class="unread-number">{{unread}}</span>
+                <span id="unread-number">{{unread}}</span>
-                <span class="unread-text" :class="clickable ? 'clickable' : ''">
+                <span id="unread-text" :class="clickable ? 'clickable' : ''">new update{{unread >= 2 ? 's' : ''}}</span>
-                        new update{{unread >= 2 ? 's' : ''}}
-                    </span>
             </div>
         </div>
     </div>