CSS仕様コードレビュー_html/css_WEB-ITnose

先週、私たちはフロントエンドの開発仕様を策定し、今日、CSS 仕様の実装をランダムにチェックしました。多くの問題が見つかりました

CSS のモジュール性の考え方と、少量のコードの冗長性は許容されますが、広い領域のコードの冗長性が許容されるという意味ではありません。

症状 1

上記のコードは、大領域の冗長性の問題を解決します。

42px; height: 40px; margin: 8px 0 2px; これらのコードは同じであり、1 つとして定義できます。

.footer .home-icon:before{background-position:1px -166px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .productList-icon:before{background-position:-45px -166px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .me-icon:before{background-position:-89px -166px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .mores-icon:before{background-position:-135px -166px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .homeActive:before{background-position:1px -210px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .productListActive:before{background-position:-45px -210px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .meActive:before{background-position:-89px -210px;width: 42px;height: 40px;margin: 8px 0 2px}.footer .moresActive:before{background-position:-135px -210px;width: 42px;height: 40px;margin: 8px 0 2px}

症状 2

.footer .icons:before{width: 42px;height: 40px;margin: 8px 0 2px}.footer .home-icon:before{background-position:1px -166px}.footer .productList-icon:before{background-position:-45px -166px}.footer .me-icon:before{background-position:-89px -166px}.footer .mores-icon:before{background-position:-135px -166px}.footer .homeActive:before{background-position:1px -210px}.footer .productListActive:before{background-position:-45px -210px}.footer .meActive:before{background-position:-89px -210px}.footer .moresActive:before{background-position:-135px -210px}

上記のリストでは、モジュールに分割されていますが、実際には 3 レベルのモジュールのネストが導入されています。これを行う必要はありません。 CSS ファイルのみが削減され、コードがより簡潔になります。相違点がある場合は、スタイルのネストを追加するだけで済みます。したがって、モジュールが大きすぎて CSS が多すぎる場合、ほとんどのスタイルの問題を解決できます。 2つのモジュールに分割して実装しても問題ありません。

.property .regular-module1 .append-list{width: 100%;height: 90px;background-color: #FFF;}.property .regular-module1 .append-list .append-listData{display: inline-block;width: 88%;height: 90px}.property .regular-module1 .append-list .append-listData .append-word1{font-size: 24px;color: #666;padding-top: 18px;clear: both}.property .regular-module1 .append-list .append-listData .append-word2{font-size: 20px;color: #999;padding-top: 10px;clear: both}.property .regular-module1 .append-list .append-listData .append-wordData1{float: left;padding-left: 30px;}.property .integralDetails-module1 .append-list{width: 100%;height: 90px;background-color: #FFF;}.property .integralDetails-module1 .append-list .append-listData{display: inline-block;width: 100%;height: 90px}.property .integralDetails-module1 .append-list .append-listData .append-word1{font-size: 24px;color: #666;padding-top: 18px;clear: both}.property .integralDetails-module1 .append-list .append-listData .append-word2{font-size: 20px;color: #999;padding-top: 10px;clear: both}.property .integralDetails-module1 .append-list .append-listData .append-wordData1{float: left;padding-left: 30px;}

一部の仕様は無視されます

3 レベルを超えるネスト

.property .append-list{width: 100%;height: 90px;background-color: #FFF;}.property .append-listData{display: inline-block;width: 88%;height: 90px}.property .append-word1{font-size: 24px;color: #666;padding-top: 18px;clear: both}.property .append-word2{font-size: 20px;color: #999;padding-top: 10px;clear: both}.property .append-word-data1{float: left;padding-left: 30px;}

仕様では、CSS のネストは可能な限り 3 レベル以内であることが定義されています。上記のリストでは、ネストを 5 レベルにする必要があります。スタイルの命名には、部分的にこぶを使用します。

ライン接続なし

使用された単語のネーミングCSS

.property .regular-module1 .append-list .append-listData{display: inline-block;width: 88%;height: 90px}.property .regular-module1 .append-list .append-listData .append-word1{font-size: 24px;color: #666;padding-top: 18px;clear: both}.property .regular-module1 .append-list .append-listData .append-word2{font-size: 20px;color: #999;padding-top: 10px;clear: both}.property .regular-module1 .append-list .append-listData .append-wordData1{float: left;padding-left: 30px;}.property .regular-module1 .append-list .append-listData .append-wordData2{float: right}.property .regular-module1 .append-list .append-listData .append-wordData3{color: #ff6046}.property .regular-module1 .append-list .append-listIcon{display: inline-block;margin-bottom: 32px}