24

CSSコードを整理するための形式化されたメソッドを作成する試みはありましたか？読みやすくするための独自の戦略を立てる前に、他に何があるのか​​疑問に思っています。どの用語を検索すればよいか完全にはわからないため、Googleはあまり役に立ちませんでした。

インデント/間隔の線、新しい線をいつ使用するか、命名規則などに沿ってもっと考えています。

何か案は？

4

5 に答える 5

18

ClearLeft で有名な Natalie Down は、このトピックなどをカバーする本当に素晴らしいスライド ショーを作成しましたhttp://natbat.net/2008/Sep/28/css-systems/

スライド ショーよりも多くの情報が含まれているため、PDF をダウンロードしてください。これは、あらゆるスキル レベルの CSS 開発者にお勧めします。

于 2008-11-21T20:22:54.267 に答える
4

これは、通常のコード形式の議論によると、すべて非常に主観的なものであり、形式化された規則については知りません。

私が選択した方法は、すべて小文字のクラスと ID をアンダースコアで区切って使用することです (#page_containerたとえば)。最初にすべてのタグスタイル ( html、body、など)を宣言しul、次にすべてのクラスと ID をアルファベット順に並べ替えます。さらに、各クラス、id、またはタグで定義されているすべてのスタイルもアルファベット順に定義されています。この規則を使用すると、特定のスタイルを追跡しやすくなります。

書式設定のために、私は常にそれをできるだけ小さく圧縮しますが、それでも判読可能です. 適切な空白を入れてすべてを 1 行にまとめました。Visual Studio を使用している場合は、この形式を指定して、この方法で自動的に書式設定することができます ([ツール]、[オプション]、[テキスト エディター]、[CSS]、[形式] の [スタイルをコンパクトに設定] ルール)。

ここでの命名規則は非常に主観的ですが、心に留めておくべきことは、スタイル上の意味ではなく、意図した目的に従って要素に名前を付けることです。たとえば、会社のスローガンを大きな赤いフォントでスタイルしたい場合、名前の#slogan代わりにid を使用し#red_boldます。

アイデアを提供する完全な例を次に示します。

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }
于 2008-11-21T20:24:18.960 に答える
2

これは、CSS プロパティの順序付けのドラフトです。最初に配置とレイアウトを行い、次にタイポグラフィ、次に背景やその他の細かいことを行うというガイドラインに大まかに従っています。合理的に可能な限り、ボックス モデルにどのように影響するかによって、プロパティを並べ替えようとします。ただし、私の順序は少し前後する傾向があります。これについてコメントをいただければ幸いです。

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

個人的には、行ごとに 1 つのプロパティを 1 つのタブでインデントし、右中括弧を 1 つのタブでインデントすることを好みます。私にはこの方法の方が読みやすいですが、それは間違いなく意見/好みの問題です。

以前は、css 宣言をタブでインデントして、HTML の親子関係にできるだけ一致させていましたが、現在はそうしていません。CSSEdit のグループ化機能は、そうした誘惑を大幅に減らすのに役立ちます。

CSS には、コード構造について定められた規則はありません。したがって、それはあなたにとって何が最適かということになります。

于 2008-11-21T20:34:24.010 に答える
0

を利用できるように、ファイルはモジュール化する必要があります@import。私は通常、基本クラス（タイポグラフィや色など）用のbase.cssファイルを持っています。サイトの構造によっては、他のCSS「部分」を使用してユーザー向けのスタイルシート全体で再利用できると便利な場合があります。これらの子孫スタイルシートは、必要に応じて基本スタイルをより細かく拡張できます（たとえば、、または.warn {color:red;}によって拡張される場合があります）。これは、いわゆるオブジェクト指向CSSを実装するための優れたデザインパターンです。p.warn {font-style:italic;}h1.warn {border:5px solid red;}

ファイル自体の中で、セレクターとプロパティリストをアルファベット順に並べるのが好きです。異なるタイプのセレクター（最初にIDリスト、次にクラスのリスト、次に要素セレクターのリスト）に対して別々のリストを維持しようとしましたが、これは不必要に難しいことがわかったので、すべてのセレクターを同じアルファベット順にしていますリスト。そうすれば、すべての複雑なセレクターまたは単純なセレクターに与えられたスタイルのルートをすばやく見つけることができます。

複雑なセレクター内で、各セレクターをアルファベット順にリストします。

何らかの理由でSassを使用できない場合は、次のように、そのネストパターンを模倣する可能性があります（これが機能しているかどうかはまだわかりません）。

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

残念ながら、マージンを探してもp、それがの一部であることに気付かない場合がありblockquote, .nav, pます。これもあまり「オブジェクト指向」の設計ではありませんが、スタイリングを必要とする事実上すべての要素にクラスの文字列を配置するよりも間違いなく優れています。

したがって、このアプローチは完全ではなく、ファイル内で検索する必要が完全になくなるわけではありませんが、CSSテンプレートツールを自分の制御できない理由で使用できない場合に開発した最良のアプローチです。この方法を改善するための提案を聞きたいです:)

于 2010-10-01T18:47:30.627 に答える
0

個人的には慣習自体は知りませんが、従うのが本当に良いアイデアがたくさんあることは知っていますが、基本的には、CSS をどのように実装したいかによって選択することができます。あなたに一番合っています。

于 2008-11-21T20:15:20.803 に答える