1

私のワークステーションの上級開発者は、次のようにコーディングしています。

table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var {font:inherit;}
del,ins {text-decoration: none;}
li {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
q:before,q:after {content: '';}
abbr,acronym {border: 0;font-variant: normal;}
sup{vertical-align: baseline;}
sub{vertical-align: baseline;}
legend {color: #000;}
strong{font-weight:600;}

私は同じことを次のようにコーディングしました (上級開発者が私のコードをレビュー/書き直す前に私が取り組んだ同じ CSS コードの別の部分):

html {
    background-color: #7e1d32;
    font: 16px/22px arial, sans-serif;
}
#outer_container {
    min-height: 598px;
    width: 100%;
    background: #D4D4D4 url('../images/top_bg.gif') repeat-x top left;
}
#inner_container {
    min-height: 698px;
    width: 100%;
    background: #D4D4D4 url('../images/top_designed_bg.jpg') repeat-x top center;
}

/* top orange banner */
#top_orange_bar {
    height: 47px;
    width: 100%;
    background: transparent url('../images/top_orange_bg.gif') repeat top left;
}
#top_orange_bar_content {
    width: 1026px;
    margin: 0 auto;
}
#top_orange_bar_content .left {
    float: left;
    width: 730px;
    margin-left: 40px;
}
#top_orange_bar_content .left h4 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font: bold 14px/52px arial, sans-serif;
    color: #7f1e32;
}
#top_orange_bar_content .right {
    float: right;
    width: 160px;
    margin-right: 40px;
    text-align: right;
}
#top_orange_bar_content .right a {
    margin-top: 8px;
}

上級開発者が行った方法で css コードを作成する利点は何ですか?

4

5 に答える 5

6

まあ、彼はそれほど年長ではありません...
彼は余分な文字がページの読み込みを遅くすることをどこかで読みました、彼は正しいです、しかしコードは保守可能で読みやすい 必要があります. ファイルを本番環境にデプロイするとき
は、自分のやり方でコーディングし、ミニファイヤを使用してコードから空白文字を消去する必要があります。通常、これはビルド/リリース プロセスの一部です。 それは上級開発者がすることです。

于 2012-01-17T00:03:14.803 に答える
3

非常に少ない。短いドキュメントを取得します。インターネット経由で送信する場合も数バイト少なくなりますが、これは CSS プリプロセッサで回避できます。

かなり個人的な好みです。

于 2012-01-17T00:02:09.693 に答える
1

上級開発者の方法では、ファイル サイズのバイト数がわずかに異なります。サイトで呼び出す前に最小化することを計画している場合、無意味な行為です。

ただし、変更が必要なときに検索するだけなので、自分のやり方ですべてを1行のCSSにすることを好みました。

読みやすさと構成は、長い道のりをリストする唯一の理由です.

于 2012-01-17T00:03:13.327 に答える
1

本当の利点はありません。スクロールする必要が少なくなり、必要なルールを見つけやすくなります。これは、CSS ファイルに数千行ある場合に違いを生みます。

あなたのやり方ですが、読みやすいです。1 つだけ注意してください。このようにする場合は、読みやすくするためにも、次のようにアルファベット順に並べることをお勧めします。

#top_orange_bar_content .right {
    float: right;
    margin-right: 40px;
    text-align: right;
    width: 160px;
}
于 2012-01-17T00:06:18.393 に答える