CSSアーキテクチャ:コードの簡潔原則

32250 ワード

CSSアーキテクチャ:コードの簡潔原則
作者:大砂漠日付:2013-04-25 クリック:508


特别声明:この文章はJekstがDenise Jacobsの英文文章の本名「CSS Architectures:Principles of Code Cleeanup」によって翻訳しています.訳文は私たち自身の理解と思想を持っています.この訳文を転載するには、英語の出所を明記する必要があります.http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/作者に関する情報
——著者:Denise Jacobs
——Jekst
多くの場合、大きい(小さい)ウェブサイトのCSSはコードがふくよかで冗長な教材の例であり、多くのコードは必要でない限定要素を誇張して使用しています.必要でない長いセレクタの中で、特定のセレクタを過剰に使用しています.より適切なセレクタがある時は依存性のある後代セレクタを使っています.不適切なところに使いました.impotant私たちはいくつかの基本的で信頼できるCSSの書き方を学ぶことができます.実践は組織様式表のメンテナンス性を大いに高めます.私達の最終的な目標はウェブサイトに様式表を組織するので、極めて大きいのはその拡張性を高めます.
したがって、我々の方法は二つの部分を含む.まず、クリーンで効率的なCSSを作成するために、基本的な実践を提供しなければなりません.次に、我々は、日増しに流行している拡張可能なCSSアーキテクチャの主要な方法を理解し、学習し、ウェブサイトのスタイルを新たなレベルに表現する必要がある.
私が探索しているこれらの内容は、本文と次の文章を貫きますが、拡張可能なコードを作成する前に、まずいくつかのCSSの整理を行います.私たちはいくつかのテクニックから始めましょう.
いくつかの有用な技術
他の開発者から仕事のスキルを学ぶと、よく勉強になります.以下は私個人が一番好きなテクニックです.
スタイルの位置決め
ページ上で、要素のスタイルを特定する方法を使うのはいい考えです.IEの開発者ツール、ファイアフォックスのFirebugやGoogleの開発者ツールなどを使わないなら、Outline属性を追加した旧式の方法を使って、outline属性を追加して、その要素のスタイルをより速く見たいです.

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
  outline: 1px solid red;/*       */
}

outline属性を使う基本原理は、outline属性は要素のサイズを増加させないが、borderは増加する.赤い(または他の色の名前)を使うoutlineは意味があります.コード作成時は、16進数、rgb(a)、hsl(a)形式のコードのみを使用し、色名は使用しません.ですから、色の名前を見たら、この属性は問題を解決するためにつけられたものです.注意outline属性はIE 8以下ではサポートされていません.
テストスタイルを追加
テストと問題解決の過程で、もう一つのいいやり方は新しく追加されたテストパターンをインデントすることです.

.searchform > .searchsubmit {
  width: 14%;
  height: 25px;
  background: transparent url(images/icon_magnify.png) 0 0 no-repeat;
    margin: -2px 0 0 0;/*       */
}

インデントを使うと、このスタイルは一時的なものであることが確認されます.これからも閲覧しやすくなります.そのスタイルを保存すべきだと決めた場合、このスタイルのインデント量を他のスタイルのインデント量に調整します.
スタイルを無効にする
良い方法で新しいスタイルを追加すると同時に、彼らを無効にする高速な方法が必要です.「x-」を選択器またはスタイルルールの前に置くことにより、これらのスタイルをすばやく除外することができます.

.social a {
  -moz-transition: opacity 0.3s ease 0s;
  x-display: block;/*    */
  height: 35px;
  opacity: 0.4;
}

この方法は注釈のスタイルよりずっと速いです.もし後でこのスタイルを保留すると決めたら、比較的に見つけやすくなります.このスタイルを適当な位置に置いてください.
CSSコード整理最適化基準
私たちはもう普通ではない技術を勉強しました.きれいに書くために、コードを最適化したり、他人のイタリアのそば式のCSSコードを整理するために、いくつかの経験法則を見に来ました.マクロレベルからミクロレベルに至るまで、まずHTMLコードの可読性と意味をどのように高め、より良い組織文書に移行し、スタイル宣言の数量を減らす方法を模索します.
マクロレベルの最適化
スタイル宣言自体に注目するのは簡単ですが、選択器を作る前に、HTMLとスタイルシート自体を読み取りやすくしなければなりません.
スタイルシートの情報と構造宣言を提供します.
大きな様式表ファイルの中で、カタログを使うのが大好きです.開発者にとっては、新しい様式表を入手して、各部分が何をするかを知ることができます.どの名前が直接に彼らが望むスタイルにジャンプできるかを知ることができます.
基本的には、スタイルファイルに開発者の情報(名前など)、最終更新日を記入することをお勧めします.このようなやり方を使うと、ファイルに問題があれば、現在の開発者は誰を探しているのか分かります.

/* stylesheet information for XyZ Corp
File created date: 09.15.2010
Last modified date: 06.04.2012
By: [name]
*/

また、ファイルの先頭にカタログを書くと、他の開発者がこのカタログを見て、このファイルの構造や部分の役割が分かります.

/* Table of Contents
- Link Styles
- Other sitewide styles
- Actions
- Layout
- LOGO
- TOP NAV
- NAVBAR
- SUBNAV
*/
…
(later in the document…)
/* =Layout */ (etc.)

スタイルシートファイルの各部分の名前の前に付けられた等号(=)は、特にこのようにしています.マークとしてドキュメントを検索するのが簡単です.
コメントと入れ子
注釈とネストマークは、ネスト要素の開始と終了を追跡して、ネスト要素のコードブロックをより速く識別するのに役立ちます.
注記divまたは他の主要なレイアウト要素の場合は、使用または開始、使用またはマークが終了します.
ネストは必要なステップではないように見えるかもしれませんが、視覚的に有用であり、視覚的なレベルを明確に示すことができ、問題を容易に発見することができます.ライン要素には、ブロックレベルの要素が含まれています.しかし、チェックは通常簡単な問題を発見するのに役立ちません.
次の例の違いを見てもいいです.
前のコード

<body>
<div id="pagewrap">
<div id="header">
<h1>Website Titleh1>
<ul id="navigation">
<li><a href="#">Homea>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contacta>li>
ul>
<div id="contentwrap">
<div id="maincontent">
<h2>Main Content Titleh2>
<p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.p>
div>
<div id="secondarycontent">
<h3>Sidebar Titleh3>
<p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)p>
div>
<div id="footer">
<p>standard copyright and footer
informationp>
div>
body>

変更後のコード:

<body>
<div id="pagewrap">
  <div id="header">
    <h1>Website Titleh1>
    <ul id="navigation">
    <li><a href="#">Homea>li>
    <li><a href="#">Abouta>li>
    <li><a href="#">Contacta>li>
    ul>
  <div>
  
  <div id="contentwrap">
    <div id="maincontent">
    <h2>Main Content Titleh2>
    <p>Main content, which is so much more
important than the secondary content that it
makes one teary with emotion.p>
    div>
 
    <div id="secondarycontent">
    <h3>Sidebar Titleh3>
    <p>Sidebar content, which is not as important
as the primary content (which is why it is in
the sidebar)p>
    div>
  div>
  <div id="footer">
    <p>standard copyright and footer
informationp>
  div>
div>
body>

もっと多くの情報とテクニックを見つけて、スタイルシートを組織します.Creating Effective Semantic Markp
ミクロレベル最適化
ミクロ最適化は、ファイルサイズを小さくし、ページローディング速度を向上させ、最適な体験を得るためです.以下のこれらの方法はマクロレベルでCSSを向上させることができる.
スタイルのルールをアルファベット順に書きます.
CSSルールをアルファベット順に並べることは、コードを綺麗に保ち、問題を減らすための重要な手段です.なぜですか?アルファベット順に並んでいるスタイルは位置決めしやすいからです.
例1:

.login {
  margin-top: 5px;
  line-height: 1.5em;
  padding-left: 5px;
  float: right;
  list-style-type: none;
  width: 80px;
  font-weight: bold;
  border-left: 1px solid #69824d;
}

例2

.login {
  border-left: 1px solid #69824d;
  float: right;
  font-weight: bold;
  line-height: 1.5em;
  list-style-type: none;
  margin-top: 5px;
  padding-left: 5px;
  width: 80px;
}

スピードのために効率を上げる
長い選択器はブラウザを強制的に検索してページDOMの中で不必要な要素をマッチングさせます.要素制限子を排除し、後世の選択器を使用することで、より直接的なマッチングスタイルに有利になり、速度を上げることができます.
最適化前:

div#wrapper div#maincontent div#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

最適化後:

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

もっとこの話題の内容については、この文章「Optimzations for Improving Page Load Times」を見ることができます.
コードを簡潔に保つ
スタイル宣言やセレクタに言及すると、少ないほど効率が高くなります.スタイル宣言には、以下の規則が適用されます.
いずれの場合も、略字属性を使用します.(簡略化された属性の文法、属性値の順序、デフォルトの属性値、必要な属性値)圧縮値と単位いずれの場合も重複属性を書かないようにします.
変更前のコード:

#sidebar {
  background-color: #fff;
  background-image: (bg.png);
  background-position: 0 0;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #ffff00;
  font-family: Georgia, serif;
  font-size: 1.33em;
  line-height: 1.33em;
  font-weight: normal;
  margin: 10px 20px 10px 20px;
  padding: .1em;
}

変更後のコード

#sidebar {
  background: #fff url(bg.png) repeat-x 0 0;
  border: 1px solid #ff0;
  font: normal 1.33em/1.33 Georgia, serif;
  margin: 10px 20px;
  padding: .1em;
}

コードを圧縮
最後に、複数行の削除とインデントもあなたのサイトの効率とスピードを向上させるのに役立ちます.開発には複数行、ネスト、インデントがオススメですが、ウェブサイトがオンラインを準備すると、CSSファイルのサイズを小さくするのが一番いいです.いくつかの圧縮CSSの良いツールは、CSS Copresterと CSS Drive
工具は大きな役割を果たしている.
コードを作る時これらの規則をよく覚えておくと、間違いを避けるのに役立ちます.これらの間違いは今後あなたの時間を費やして、失望させてしまうかもしれません.しかし、あなたが自分でこのすべてをしなければならないと思わないでください.いいツールがコードを整理してくれます.Cleean CSSとCode Beautifeerはいいツールだと思います.私が説明した方法を統合して学習しながら、さらにこれらのツールを使ってコードを整理することもできます.
翻訳全体は原文のルートに沿って行い、翻訳したところ、技術に対する個人的な理解を少し加えました.もし通訳が間違っているところがあれば、同業の友達に教えてもらいたいです.ありがとうございます.
Jekstについて
ニックネームのjekstを常用して、現在北京の1家の情報技術会社に就職して、主に従事します.ネットシリーズの開発は先端を熱愛し、css、jQueryに深い興味を持っています.技術交流活動に参加するのが好きです.交流と勉強を歓迎します.

IE下のarrayのsplice方法のbug