クリーンコードの追加画像

Question

私はトランスポートリンクにスタイルを与えようとしていますが、私はそれをやったことがありますが、それはよりクリーンなコードになりうると感じています。おそらく私は擬似クラスの前に使うべきです。 これを達成するために最高のクリーンな方法を教えてください。 はこちらのリンクにある 多くのおかげで開始するために enter image description here [https://dl.dropboxusercontent.com/u/14407746/move_bubble_master/index.html][2]

   #main .descript strong { 
      font-family: 'proxima_nova_altbold'; 
      display: block; 
      font-weight: 700; 
      padding: 20px 0px 16px 0px; 
      color: #000; 
      font-size: 14px; 
      border-bottom: solid 1px #e0e0e0; 
      } 
      /* line 226, ../sass/main.scss */ 
      #main .descript ol { 
      list-style: none; 
      padding: 0px; 
      width: 100%; 
      margin-bottom: 2px; 
      } 
      /* line 229, ../sass/main.scss */ 
      #main .descript ol li { 
      width: 50%; 
      float: left; 
      height: 53px; 
      border-bottom: solid 1px #e0e0e0; 
      position: relative; 
      color: #000; 
      padding-left: 34px; 
      font-size: 13px; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      } 
      /* line 236, ../sass/main.scss */ 
      #main .descript ol li img { 
      float: left; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
      } 
      /* line 237, ../sass/main.scss */ 
      #main .descript ol li span { 
      display: block; 
      color: #9c9c9c; 
      padding-bottom: 6px; 
      } 
      /* line 242, ../sass/main.scss */ 
      #main .descript ol li em { 
      font-family: 'proxima_nova_altbold'; 
      position: absolute; 
      top: 0px; 
      right: 40px; 
      line-height: 76px; 
      color: #9c9c9c; 
      font-style: normal; 
      } 
      /* line 250, ../sass/main.scss */ 
      #main .descript ol li.room { 
      line-height: 53px; 
      } 
      /* line 252, ../sass/main.scss */ 
      #main .descript ol li.room img { 
      width: 23px; 
      height: auto; 
      left: 3px; 
      top: 15px; 
      } 
      /* line 254, ../sass/main.scss */ 
      #main .descript ol li.kitchen { 
      line-height: 53px; 
      } 
      /* line 256, ../sass/main.scss */ 
      #main .descript ol li.kitchen img { 
      width: 23px; 
      height: auto; 
      left: 3px; 
      top: 15px; 
      } 
      /* line 258, ../sass/main.scss */ 
      #main .descript ol li.kilburn, #main .descript ol li.kilburnPark, #main .descript ol li.maida, #main .descript ol li.south { 
      padding: 16px 0px 0px 34px; 
      height: 64px; 
      } 
      /* line 260, ../sass/main.scss */ 
      #main .descript ol li.kilburn img, #main .descript ol li.kilburnPark img, #main .descript ol li.maida img, #main .descript ol li.south img { 
      width: 19px; 
      height: auto; 
      left: 3px; 
      top: 20px; 
      } 
      /* line 263, ../sass/main.scss */ 
      #main .descript ol:after { 
      clear: both; 
      content: ""; 
      display: table; 
      } 

Answer 1

、私はあなたがそれらの大きいのではなく、あなたのCSSでそれらのクラスをより深くネストされた要素のいくつかにいくつかのクラスを追加し、ターゲットをお勧めしますマルチレイヤーセレクターを使用してください。

これは特に、複製したコードのビットに適用されます。複雑なセレクタを個別にビルドする必要がなく、すべてのターゲット要素で同じクラスが定義されていれば、この複製を削除することができます。