9

css を書いている間、新しいルールを配置する適切な場所を見つけることに多くの時間が費やされていることがわかりました。たとえば、このスタイルシートがある場合:

.a, .b, #c {
  display:inline-block;
}

.d {
  color: #fff;
}

を追加したいのですが.d {display:inline-block;)、これを第 1 セクションに追加するか、第 2 セクションに追加するかについてよく考えます。意味：

.a, .b, #c, .d {
  display:inline-block;
}

対

.d {
  color: #fff;
  display:inline-block;
}

明らかに、CSS が複雑になるにつれて、これにより多くの時間が浪費されます。もう 1 つの時間消費者は、セレクターがスタイルシートに何度も表示されるときに、既存のルールを編集するためにそれらを見つけるプロセスです。

CSS の記述プロセスをより迅速かつ効率的にする特定のワークフロー/ツールはありますか?

ご注意ください：

  1. 同様の質問が既に存在しますが、2 年前に回答されているため、最新の回答が必要です

  2. 比較的新しい SO ユーザーとして、これがここに属しているのかプログラマーに属しているのかがわかりませんでした。これが SO のトピックから外れている場合は、喜んで移行します。

4

8 に答える 8

7

共通のスタイル属性ではなく、目的とロジックに基づいてスタイルをグループ化する必要があります。.aと.bに共通点がない場合はdisplay: inline-block;、それぞれに付けても構いません。

非常に効率的な CSS ファイルではなく、保守可能なコードに焦点を当てます (それを行うことができる縮小および圧縮ライブラリがあります)。

于 2013-01-29T13:36:28.590 に答える
3

私は数年前にこの問題に遭遇し、あなたと同じように、大きな CSS ファイル (たとえば... 1000 行以上) を扱っているときはいつでも、ほとんどの時間が編集よりも特定のセレクターの検索に費やされていることに気付きました。または特定のルールを作成します。

そのため、CSS ファイルの操作がおそらく 10 倍簡単になったいくつかの規則に従っています。重要なのは、ワークフローのボトルネックがセレクターの検索であることを認識することです。そのため、このプロセスをより簡単にすることが重要です。

  1. HTML マークアップに表示される順序で CSS セレクターを記述します。多くの場合、最初に (inspect 要素などを介して) マークアップを見てスタイルを書き始めるので、マークアップの順序でセレクターを記述すると、どこでルールを探すべきかについて大まかなアイデアが得られます。あなたのCSSファイル。

    したがって、コード例の場合、コードの再利用のために組織を犠牲にするかどうかによって答えが異なります。確かに、同じセレクター (つまり ) に何かを入れておけば、コードを再利用できるかもしれませんが、.a, .b, .c, .d6 か月後に CSS に戻ったときにセレクターを見つけられなくしていませんか? あなたの判断を使用してください。

  2. スタイルは 1 行で記述します。このように記述できない正当な理由がない限り (たとえば、ルールをネストする必要がある CSS プリプロセッサを使用している、他の 10 人の開発者によって維持されている既存のコードベースで作業しているなど)、スタイルを 1 つのファイルに記述します。 line を使用すると、スタイルをより速く見つけることができます。たとえば、次のように書きます。

    selector { property1: value, property2: value; property3: value; }
selector2 { property1: value, property2: value; property3: value; }
selector3 { property1: value, property2: value; property3: value; }

    それ以外の：

    selector { 
  property1: value, 
  property2: value; 
  property3: value; 
}

selector2 { 
  property1: value,
  property2: value;
  property3: value;
}

selector3 { 
  property1: value,
  property2: value;
  property3: value;
}

    ルールを 1 行で記述すると、セレクターをスキャンできます。さらに、1000 行以上の CSS ファイルを簡単に 10 分の 1 に減らすことができるため、はるかに管理しやすくなります。ここでも、ワークフローのボトルネックはセレクターの検索であることを思い出してください。そのため、「従来の」方法で記述するとプロパティの読み取りが容易になりますが、実際にはセレクターを検索するプロセスが遅くなります。さらに、セレクターを 1 行で記述すると、次のようにインデントを使用できます。

    header { property1: value, property2: value; property3: value; }
  header h1 { property1: value, property2: value; property3: value; }
  header h3 { property1: value, property2: value; property3: value; }
  header h3 span { property1: value, property2: value; property3: value; }
body { property1: value, property2: value; property3: value; }

  3. 検索と置換はパンとバターです。上記の 2 つの提案を使用してセレクターを整理すると、多くの場合、主要なセクションのセレクターを見つけることで、必要な特定のルールを見つけるのに十分に近づくことができます。たとえば、非常に具体的なものを見つけようとして#someDiv header ui li a:hoverいて、検索を実行するだけで#someDiv、残りを見つけるのに十分な距離に近づくことができます。

それが役立つことを願っています:)

于 2013-02-09T10:35:10.687 に答える
2

まず第一に、CSS の最適化についてあまり考えないでください。他の人のコメントで述べたように、そのためのツールがあります。

「スタイルの要素」ではなく、要素のスタイルを設定する必要があります。この奇妙な文は、CSS が次のように定義されるべきではないことを意味します。

.class1, .class2, .class.., classn {
  display:inline-block;
}

.class1, .class2, .class3{
  backgroundColor: #333
}

.class1, .class.., classn {
  opacity: 0.1
}
...

今スタイリングしている特定の要素に適用されるすべてのルールを見て気が狂ってしまうからです。あなたの脳に優しくしてください:)

また、Chrome インスペクタなどのツールを使用して、ブラウザで直接スタイリングするのが現在の一般的な方法だと思います。要素に適用される 20 のルールと、スタイリングしている要素とは関係のない他の多くの要素よりも、多くのプロパティが定義されたいくつかのルールの方が適切です。

css をより速くコーディングしたい場合は、他の人が言ったように、css プリプロセッサを使用する必要があります: Less または sass. sass が明らかに勝者ですが、less で構築された twitter ブートストラップを学んだので、less に慣れました。とにかく、CSS プリプロセッサの使用を開始することの改善は、less または sass のいずれかを選択するよりもはるかに大きいです。

于 2013-02-08T19:13:35.070 に答える
1

より優れた、保守しやすい CSS コードを作成する場合、プレーンな CSS でしかできないことがたくさんあります。また、以前に聞いたことがあると思いますが、動的な CSS 言語である Sass または Less でコードを記述できます。

それはそれで良いことかもしれませんが、それはあなたの質問にどのように関係していますか? 読む！たとえば、Lessでは、ネストされた CSSを使用できます。たとえば、次を見てください。

article.post {

    p{
        margin: 0 0 12px 0;
    }
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
    img {
        float:left;
    }

}

「ルールは好きなだけ入れ子にすることができるので、後で心配する必要がなくなります。何かのパディングを変更したいと思ったことがありますが、それがどの要素に影響を与えるか正確にわからなかったために怖がっていましたか? 入れ子を使用することで、 CSS から多くの当て推量を取り除くことができます。」

Less の優れた点は、すでにその書き方を知っているということです。すべての CSS コードは有効な Less コードです。ただし、もっと多くのことができます。たとえば、 mixinsを見てみましょう。

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}



.tab {
    background: #333;
    color:#fff;
    .rounded_top;  //Now you have a rounded top with simple, maintainable code
}



.submit {
    .tab;
    background: red;  //Notice that background: #333; is overridden here
}

Less のすべての機能に関する非常に素晴らしい記事がここにあります。これは、Less でできることのほんの一部にすぎませんが、私が言いたかったのは、動的な機能に飛び込むことを恐れる必要はないということです。 CSS 言語。

あなたはすでにそれらの使い方を知っています。

于 2013-02-12T12:46:13.320 に答える
1

あなたの質問は、デザイナーの「一般的な」混乱のようです。css を設計する最善の方法は、どのクラスが何に適用されるかについて十分に明確にすることです。さまざまな要素に異なるプロパティを適用する場合 (たとえば、div に width=40px を設定し、span に 50px を設定する場合)、新しい css クラスを作成する必要がありますが、すべてのプロパティが同じである場合は、既存のものをそのまま使用します。 !

po[roperty を追加する最善の方法は、単一の要素に新しいプロパティを追加する必要がある場合は、インライン css を使用することです。スタイルシートのフォーマットを維持すると便利です。例：

<div class="divcss" style="height:35px">
于 2013-02-09T04:40:17.477 に答える
1

CSS プリプロセッサについて、1 つまたは 2 つのことを学ぶ必要があります。SASSやLESSなどのオプションがいくつかあります。Web には、これらのプリプロセッサとその使用方法について学ぶことができる多くのリソースがあります。

あなたが尋ねたのは、あなたが定義している新しい CSS クラスの使用法についてです。それはテーブルのようなもので、椅子と木は木で作られていますが、椅子は共通の特性とは異なる色を持つこともできます. ここで OOCSS の出番です。

上記の例は素晴らしいものではないかもしれませんが、私の言いたいことが理解できることを願っています。既存のスタイルに新しいプロパティを追加したい場合、それをどのように行うかはあなた次第です。しかし、スタイルに意味を持たせたい場合は、整理する必要があります。

ボーナス

StubbornellaによるObject Oriented CSSの wiki 全体を必ず確認してください。そのリポジトリのコミットは非常に古いことに気付くかもしれませんが、それらは多くの OOCSS ベースのフレームワークの基盤となっています。

個人的にはinuit.cssの大ファンです。これは私が出会った中で最も強力な CSS フレームワークであり、まったく驚くべきものです。これにより、デザインを完全に制御し、物事を DRY に保つことができます。

于 2013-02-12T21:07:03.643 に答える
0

CSS ファイルを最適化すると、次のように記述できます。

.dis-inblck{display:inline-block;}
.color-w{color:#fff;}
于 2013-02-13T16:14:37.157 に答える
0

特定のクラス名をデフォルトまたは共通のスタイルとして設定したルールを作成して、特定の ID、クラス、またはタグをターゲットにすることができます。

.pos-inline{
  display:inline-block;
}
.col-white {
  color: #fff;
}

適用するプロパティのクラスまたは div をコンマ (.a、.b、#c) で区切って追加するだけです。

于 2013-01-29T14:24:31.140 に答える