1

これは、非常に的を絞った質問ではなく、一般的なベスト プラクティスの質問です。font-family、font-size などだけを使用していたときに発生した行の高さの頭痛のほとんどを解決し、CSS 宣言の総数を実際に削減するので、私は font shorthand の大ファンです。タイポグラフィを完全に制御できます。

問題は、フォントサイズがページ全体で変更されると、行の高さも変更されるため、次のようにフォントを数回再定義していることに気づきます。

.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}

私はこのコードが最適化されていないと強く感じています...私は自分の体（またはマークアップの非常に高いID）でfont-familyを宣言することを考えているので、毎回繰り返す必要はありませんが、次に、font-family、line-height、および場合によっては font-weight を使用する必要があります。これにより、ほぼ同じ量の CSS が作成されます。

この手順を最適化するためのアイデアやヒントはありますか? マークアップに追加のクラスがあるのでしょうか。

ps: Stackoverflow 管理者向け: 「コーディング スタイル」タグに関する質問ですが、使用は許可されていません。

4

4 に答える 4

2

データベースを設計したり、OOクラスを定義したりするようにCSSを作成しようとしました。私は...するだろう：

  1. CSSの冗長性を排除してみてください
  2. 最初に一般的なCSSルールを定義し、次に特定のケースを定義します
  3. 必要に応じて速記を避けてください

次に例を示します。

h1, h2, h3 {
    font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
    font-size: 26px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 18px;
}
于 2012-05-02T11:01:37.597 に答える
1

これから始めます：

body { font-family: Calibri, sans-serif; }
* { line-height: 1.3; }

次にh1、h2サイズなどをパーセンテージで定義します。次に、色などを設定します。ブロック間の間隔 (見出しと段落の間、またはリストの項目の間など) を調整するには、ほとんどの場合、行の高さよりも垂直方向のマージンを使用する方が適切です。

フォント設定の混合サラダを作成する必要はありませんfont。短縮形は助けになるどころか、混乱する傾向があります。

Calibri は小さな素敵なフォントですが、残念ながらそれがないシステムでは適切なフォールバックがありません。しかし、ほぼすべての点で (サンセリフであることを除いて) Calibri とは完全に異なる Tahoma よりも、ほぼすべてのサンセリフ フォントがフォールバックとして優れています。

于 2012-05-02T12:23:18.250 に答える
0

すべてが同じ font-family を共有している場合は、一番上に 1 か所で宣言してから、「詳細」を定義してみませんか。つまり、ベスト プラクティスは、共通/一般的なルールを設定してから、必要なものを再定義することです。

例：

/* define the font family/general characteristics */

h1, h2, h3 {
    font:normal 23px/23px Calibri,Tahoma,sans-serif;
}

/* define the details for the ones you would like */
h1 {
    font-size:26px;
    line-height:26px;
    border-bottom:2px dotted #bababa;
    color:#204fe7;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
于 2012-05-02T10:33:27.093 に答える
0

これを短縮する最善の方法は、フォント ファミリを設定する 1 つのタグを指定することだと思います。ちょっとこんな感じ

body {
  font-family:Calibri,Tahoma,sans-serif;
}

次に、CSS スタイルの各要素をさらに微調整できます。

また、言及するだけです。CSS は、ページの読み込み時にそれほど問題を引き起こしません。画像とサーバー側のコードの最適化にもっと集中します。

于 2012-05-02T10:37:57.570 に答える