作成するCSSクラスの数を最小限に抑える方法は？

Question

私はasp.net webformsプロジェクトに取り組んでいます。私はCSSにかなり慣れており、複雑なスタイリングを書くことができます。私が直面している問題は、作成されるクラスの数を最小限に抑えたり、既存のクラスを効率的に再利用する方法です。たとえば、各ページには特定の場所に複数のdivが表示される必要があり、まもなく私は別のページにあまりにも多くのクラスを作成します。私はブートストラップを使用することでこれを回避できましたが、ブートストラップは私のプロジェクトには許可されていません。以下は、小セクションの1ページに使用するサンプルCSSです。

<div style="padding-top: 10px; padding-left: 300px; padding-bottom: 50px; " ><asp:button id="btnAssociae" ToolTip="Associate" runat="server" Text="Associate" onclick="btnAssociate_Click"></asp:button></div> 
    <div style="margin-left: 65px; border-bottom: 1px solid"></div> 
    <div style="padding-top: 50px; padding-left: 60px; " ><span style="padding-right: 90px">Delete</span><asp:button id="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click"></asp:button> 
    </div> 

おそらく1つの考えは、pxの代わりにパーセントを使用することです。どんな提案も感謝します。 注：同封のコードサンプルでは、​​インラインCSSが表示されます。これは最終的にクラスに変換されます。

Answer 1

BEM方法論を試すことができます。たとえば、ここにいくつかの説明があります：http://getbem.com/ 私は毎日それを使って作業しており、スタイルシートは保守がずっと簡単です。

いくつかの基本良いpractics： - ： - 「ALIGN-左」または「テキストベースのようなclassessページ

• ヘルパー上のすべてのセクションのためのいくつかのデフォルトのパディング/マージンと.container のような一般的なクラスを作ります新しいパラメータを作成するだけで、クラスを追加するだけで、さまざまなスタイルを作ることができます。

• Sass/LESSを使ってコードを作成すると、「通常の」CSSよりも簡単にコードを作成できます。スタイルを小さなファイルに分割して、ボタンのクラス名などの "ボタン"という名前にすることもできます。

• ピクセルを使用できますが、 'em'または 'rem'は何らかの点で優れています。パーセントは特にRWD

• フレキシボックスが

Answer 2

うん、私はULAに同意し、水平/垂直のdiv位置決めのための本当に素晴らしいツールであるため、注意が必要です。 BEMは、クラスの数を減らすのに最適です。また、あなたのプロジェクトではブートストラップが許可されていないからといって、自分のメソッドを採用して自分で何かを構築することはできません。ブートストラップは、インストールできるユーティリティクラスのライブラリです。tools.cssという別のスタイルシートを作成し、プロジェクト全体で再利用できるユーティリティクラスを定義してみましょう。

また、私はSASSを使って物事を整理することにもっと同意することはできません。あなたが何か新しいことを学ぶ準備ができていると感じたら、それはクリーンなスタイルを書くための素晴らしいツールです。 https://www.sitepoint.com/getting-started-with-sass/ - >これは学習のための素晴らしいリソースです。