最新の CSS コードを記述するための 20 のヒント

CSS カスケード スタイル シート

CSS (Cascading Style Sheets) は、カスケード スタイル シートです。 これは、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのドキュメント スタイルを表すために使用されるコンピューター言語です。

マージンの崩壊とは何かを理解してください

他の多くのプロパティとは異なり、ボックス モデルの垂直マージンは、接触するとき、つまり、要素の下マージンが別の要素の上マージンと接触するときに折りたたまれます。次の簡単な例から学ぶことができます:

.square {    width: 80px;    height: 80px;
}.red {    background-color: #F44336;    margin-bottom: 40px;
}.blue {    background-color: #2196F3;    margin-top: 30px;
}

上の例では、赤と青の正方形の余白が 70px 加算されていないことがわかります。赤い下のマージンだけが残ります。この動作を回避するにはいくつかの方法を使用できますが、より調和のとれたように見えるように、margin-bottom 属性をできるだけ均一に使用することをお勧めします。

レイアウトに Flexbox を使用する

従来のレイアウトでは、Float または inline-block の使用に慣れていますが、Web サイト全体ではなくドキュメントの書式設定に適しています。 Flexbox はレイアウトに特化したツールです。 Flexbox モデルを使用すると、開発者はレイアウトに多くの便利で拡張可能な属性を使用できます。一度使用すると、もう手放せなくなると考えられています。

.container {    display: flex;    /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}

Tutorialzine では、Flexbox について多くの紹介とヒントを提供しています。知っておくべき 5 つの Flexbox テクニック。

CSS Reset を使用する

長年にわたるブラウザの急速な発展と仕様の統一により、ブラウザ機能の細分化は改善されましたが、依然としてブラウザごとに動作の違いが多くあります。この問題を解決する最善の方法は、CSS リセットを使用してすべての要素に統一されたスタイルを設定し、比較的統一されたきれいなスタイル シートに基づいて作業を開始できるようにすることです。現在一般的なリセット ライブラリには、normalize.css、minireset、ress が含まれており、ブラウザ間の既知の相違点の多くを修正できます。また、外部ライブラリを使用する予定がない場合は、次の基本ルールを使用することをお勧めします:

* {    margin: 0;    padding: 0;    box-sizing: border-box;
}

上記のルールは役に立たないように思えますが、ブラウザーごとにデフォルトで異なる設定が設定されている場合は、マージンのデフォルト値が使用されます。 /padding は依然として非常に面倒な場合があります。

すべてをボーダーボックスにする必要があります

多くの初心者はボックスサイズ属性を理解していませんが、これは確かに非常に重要です。これを理解する最良の方法は、その 2 つの値を確認することです:

デフォルト値は content-box です。つまり、要素の高さ/幅属性を設定すると、そのコンテンツ サイズのみに影響します。たとえば、すべてのパディングとサイドがその上に蓄積され、

タグが幅 100、パディング 10 に設定されている場合、最終要素は 120 (100 + 2*10) ピクセルを占めます。

border-box: パディングとサイドは幅/高さに含まれます。たとえば、幅: 100px の

が設定されている場合、パディングやサイドの長さがどのように設定されていても、それが占めるサイズは次のようになります。 100ピクセル。

要素をボーダーボックスに設定すると、子要素のパディングや側面がこの制限を破ることを心配することなく、親要素に高さと幅の制​​限を設定でき、スタイルやレイアウトを行うのに非常に便利です。

画像を背景画像として使用する

如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个

的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

img {    width: 300px;    height: 200px;
}div {    width: 300px;    height: 200px;    
background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');    
background-position: center center;    background-size: cover;
}section{    float: left;    margin: 15px;
}

不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。

Better Table Borders

HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:

table {    width: 600px;    border: 1px solid #505050;    margin-bottom: 15px;    color:#505050;
}td{    border: 1px solid #505050;    padding: 10px;
}

这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:

注释格式优化

CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：

/*---------------
    #Header
---------------*/header { }header nav { }/*---------------
    #Slideshow
---------------*/.slideshow { }

而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:

/*   Footer Buttons   */.footer button { }.footer button:hover { }

同时，不要忘了CSS中是没有//这种注释方式的:

/*  Do  */p {
    padding: 15px;    /*border: 1px solid #222;*/}/*  Don't  */p {
    padding: 15px;    // border: 1px solid #222;  }

使用Kebab-case命名变量

对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-:

/*  Do     */.footer-column-left { }/*  Don't  */.footerColumnLeft { }.footer_column_left { }

而涉及到具体的变量命名规范时，建议是使用BEM规范，只要遵循一些简单的原则即可以保证基于组件风格的命名一致性。你也可以参考CSS Tricks来获得更多的细节描述。

避免重复代码

大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。我们只需要在html或者body中添加该属性然后使其层次传递下去即可:

html {    font: normal 16px/1.4 sans-serif;
}

使用transform添加CSS Animations

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:

.ball {    left: 50px;    transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out {    left: 500px;
}/* Cool*/.ball.slide-out {    transform: translateX(450px);
}

Transform的几个属性translate、rotate、scale都具有比较好的浏览器兼容性可以放心使用。

不要重复造轮子

现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。

尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

a{    color: #fff;    padding: 15px;
}a#blue-btn {    background-color: blue;
}a.active {    background-color: red;
}

我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

避免使用!important

认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的。

使用text-transform属性设置文本大写

<div class="movie-poster">Star Wars: The Force Awakens</div>.movie-poster {
    text-transform: uppercase;
}

Em, Rem, 以及 Pixel

已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的讨论，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因此并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:

em – 其基本单位即为当前元素的font-size值，经常适用于media-queries中，em是特别适用于响应式开发中。

rem – 其是相对于html属性的单位，可以保证文本段落真正的响应式尺寸特性。

px – Pixels 并没有任何的动态扩展性，它们往往用于描述绝对单位，并且可以在设置值与最终的显示效果之间保留一定的一致性。

在大型项目中使用预处理器

估计你肯定听说过 Sass, Less, PostCSS, Stylus这些预处理器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其他的特性，这里我们以Sass为例:

$accent-color: #2196F3;a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

使用Autoprefixers来提升浏览器兼容性

使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:

Online tools: Autoprefixer

Text editor plugins: Sublime Text, Atom

Libraries: Autoprefixer (PostCSS)

実稼働環境で縮小されたコードを使用する

ページの読み込み速度を向上させるために、実稼働環境ではデフォルトで圧縮されたリソース コードを使用する必要があります。圧縮プロセス中に、ファイル全体のサイズを減らすために、すべての空白と繰り返しが削除されます。もちろん、圧縮されたコードは判読できないため、開発段階では通常バージョンを使用する必要があります。現在、CSS 圧縮には多くのツールがあります:

オンライン ツール – CSS Minifier (API を含む)、CSS Compressor

テキスト エディター プラグイン: Sublime Text、Atom

ライブラリ: Minfiy (PHP)、CSSO および CSSNano (PostCSS、Grunt 、 Gulp)

どのツールを選択するかは、独自のワークフローに依存する必要があります~

Caniuseを参照してください

ブラウザごとに互換性が大きく異なるため、必要なブラウザに適応できれば、Caniuseではブラウザのバージョンの互換性を問い合わせることができます特定の機能について、特定のプレフィックスを追加する必要があるかどうか、特定のプラットフォームにバグがあるかどうかなど。ただし、caniuse を使用するだけでは十分ではありません。検出には追加のサービスも使用する必要があります。

検証: 検証

CSS の検証は、HTML 検証や JavaScript 検証ほど重要ではないかもしれませんが、正式リリース前に Lint ツールを使用して CSS コードを検証することは依然として意味があります。コード内の潜在的なエラーについて通知し、ベスト プラクティスを満たしていないコードについてプロンプトを表示し、コードのパフォーマンスを向上させるための提案をいくつか提供します。 Minifer や Autoprefixers と同様に、利用可能なツールが多数あります:

オンライン ツール: W3 Validator、CSS Lint

テキスト エディター プラグイン: Sublime Text、Atom

ライブラリ: lint (Node.js、PostCSS)、css-validator (Node .js)

上記は、最新の CSS コードを記述するための 20 の提案です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。