フロントエンドの実践プロジェクトで CSS コードを使用する際の 20 の注意点-CSSチュートリアル-php.cn

今回は、フロントエンドの実践プロジェクトで CSS コードを使用する際の 20 の注意事項をお届けします。以下は実践的なケースです。

01. margin 属性は注意して使用してください

他の属性と異なり、縦方向の余白が重なると崩れてしまいます。これは、ある要素の下マージンが別の要素の上マージンと接触する場合、2 つの要素のうち大きい方がそのまま残されることを意味します。以下に簡単な例を示します。

 <p class="square red"></p>
    <p class="square blue"></p>
    .square {
        width: 80px;
        height: 80px;
    }
    .red {
        background-color: #F44336;
        margin-bottom: 40px;
    }
    .blue {
        background-color: #2196F3;
        margin-top: 30px;
    }

ログイン後にコピー

実際には、上記2つの要素間の垂直方向の距離は70pxではなく40pxであり、青い正方形のマージンは計算されていません。このデフォルトの動作を排除する方法はたくさんありますが、最善の方法は、margin-bottom などの一方向の margin プロパティのみを使用することです。

02. ボックスモデルのレイアウトを使用する

ボックスモデルには当然存在理由があります。 float と inline-block は確かに機能しますが、これらはドキュメントのスタイルを設定するための基本的なツールであり、Web サイト全体ではありません。ある意味、Flexbox は、必要なレイアウトをより簡単かつ正確に作成できるように設計されています。

Flexbox モデルによって提供される一連のプロパティは、開発者に大きな柔軟性を与え、一度慣れてしまえば、レスポンシブレイアウトの作成は簡単です。ブラウザによる Flexbox のサポートも完璧に近いため、Flexbox の使用を妨げる理由はありません。

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

ログイン後にコピー

03. CSS リセットを実行します

状況は長年にわたって改善されてきましたが、さまざまなブラウザーのデフォルトの動作には依然として多くの違いがあります。この問題を解決する最善の方法は、CSS リセットファイルを使用して、すべての要素のデフォルトスタイルをリセットすることです。これにより、純粋なスタイル環境で作業し、すべてのブラウザで同じ結果を生成することができます。

normalize.css、minireset、ress など、ブラウザ間の不一致を修正する、この仕事をうまく行うライブラリがたくさんあります。ライブラリを使用したくない場合は、以下のように簡単な CSS リセットを自分で行うこともできます。

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

ログイン後にコピー

これは厳しいように思えるかもしれませんが、デフォルトのマージンとパディングを削除することで、要素が余分なスペースを取ることを心配することなく、要素を配置するのが簡単になります。 box-sizing: border-box は非常に便利なプロパティです。これについては以下で紹介します。

04. すべての要素に Border-box を使用する

多くの初心者は box-sizing 属性を知りませんが、これは確かに重要です。これを理解する最良の方法は、その 2 つのオプションの値を確認することです。

content-box(デフォルト) - 要素の幅と高さを設定しますが、それはコンテンツのサイズのみです。すべてのパディングと境界線はコンテンツには含まれません。つまり、コンテンツの外側にあります。

たとえば、幅 100 ピクセル、パディング 10 ピクセルの p がある場合、実際の幅は 120 ピクセルです。

ボーダーボックス - パディングとボーダーは幅と高さに含まれます。 p の幅が 100px で、box-sizing: border-box が設定されている場合、パディングとボーダーをどれだけ追加しても、その幅は常に 100px になります。

すべての要素にボーダーボックスを設定すると、スタイル設定が容易になり、面倒な計算を行う必要がなくなります。

05. 背景としての画像サイトに画像を追加するとき、特にレスポンシブデザインを行う場合は、要素を使用する代わりに、p タグを使用して背景属性を設定します。

追加の作業は何も変わらないように思えるかもしれませんが、実際には、元のサイズを維持したり、比率に応じて変更したりするために画像のスタイルを設定するのが簡単になります。これには、background-size、background- の助けが必要です。サイズとその他のいくつかのプロパティ。

 <section>
        <p>Img element</p>
        <img src="" alt="bicycle">
    </section>
    <section>
        <p>p with background image</p>
        <p></p>
    </section>
    img {
        width: 300px;
        height: 200px;
    }
    p {
        width: 300px;
        height: 200px;
        background: url('');
        background-position: center center;
        background-size: cover;
    }
    section{
        float: left;
        margin: 15px;
    }

ログイン後にコピー

この手法の欠点の 1 つは、画像がスクリーンリーダーやエンジンによって適切にクロールされないため、ページのアクセシビリティに若干の影響を受ける可能性があることです。この問題は object-fit によって解決できますが、すべてのブラウザーでサポートされているわけではありません。

06. テーブルの境界線の改善 HTML の

テーブルは面白くありません。これらは非常に風変わりで、応答性を高めるようにデザインするのが難しく、全体のスタイルに合わせるのが困難です。たとえば、表とその中の要素に上枠を追加すると、次の結果が得られる可能性があります。

正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table.

这样看起来就好多了。

07、更好的注释方式

CSS 可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！

对于 CSS 中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。

    /*---------------
        #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;  
    }

ログイン後にコピー

08、命名连接

当 class 或者 id 不止一个单词的时候，需要使用 - 符号连接， CSS 对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认约定。

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

ログイン後にコピー

09、不要重复设置

CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点，你不需要为页面中的每一个元素设置该属性。

你只需要为或者设置 font 样式，然后让它一级一级流传下去就可以了。下面是一个很好的例子。

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

ログイン後にコピー

当然，在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。

10、CSS 动画与变换

不要通过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。

下面是一个例子，我们想动画一个 ball，让它往右滑动。不要去改变 left 的值，最好是使用 translateX() 。

 .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 等）拥有几乎一致的浏览器兼容性，你可以自由使用它们。

11、不要 DIY, 使用库

CSS 社区非常的庞大而且不断出现新的库。库被提供于各种用途，从小片段到完善的框架，用于构建响应式程序，而且它们当中大部分都是开源的。

所以下次当你碰到 CSS 问题的时候，在你想自己动手去解决问题的时候，最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。

12、保持选择器的特指度低

不是所有 CSS 选择器都是生而相等的，当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。但是事情并不总像我们想的那样，就像下面这个例子：

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

ログイン後にコピー

我们想为所有按钮添加 .active 类使其变为红色，但这是不起作用的，因为按钮已经被一个 id 选择器设置了 background-color，而 id 选择器具有更高的特指度。它们之间的规则就像下面这样：

ID (#id) > Class (.class) > Type (比如 header)。

特指度是可以堆叠的，所以 a#button.active 的特指度是高于 a#button 的。使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器，这将最终导致 !important 效果。

13、不要使用 !important

很认真的告诉你，不要使用 !important。即时的一个快速修复在将来可能导致大量的重写。相反，找出你 CSS 选择器不工作的原因，并且尝试去修复它。

只有在一种情景中使用 !important 是可以接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议停止使用。

14、使用 text-transform

在 HTML 中，当你使用大写字母的时候可能是出于某种语义目的，比如说你想强调一个单词的重要性。

 <h3>Employees MUST wear a helmet!</h3>

ログイン後にコピー

如果出于某种目的你将一组文本都设置成大写，可以在 HTML 中正常书写文本，然后利用 CSS 转换其大小写。它们看起来都是一样的，但是如果不在上下文中，你的内容将更有意义。

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

ログイン後にコピー

这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。

15、Em， Rem 和 Pixel

人们在对元素和文本设置尺寸应该用 em，rem 还是 px 有很多的争论。事实是，这三者都是可行的，有自己的优点和缺点。

所有的开发者和项目都是不同的，所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法：

em - 1 em 的大小与直接父元素的字体大小有关。通常用于媒体查询，em 对响应式设计而言是非常棒的，但是将每个元素的 em 值转换为 px 的比例是非常难以计算的，因为你可能要在 DOM 树上逐级跟踪元素。

rem - 以元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持中默认的 font-size 并且为其它的元素设置 rem 是一种非常棒的方法。

px - 像素是最精确的控制方式，但是在响应式设计中它并不友好，因为它不会随屏幕大小变化而自动缩放。它们是可靠的，易于理解的，并且在值和实际结果之间呈现出良好的视觉联系。

下面我要说的是，不要害怕尝试。去使用它们并且找出哪一种是你最喜欢的。有时候 em 和 rem 很省事，尤其对于响应式界面。

16、在大项目中使用预处理器

你可能已经听说过它们了 - Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。它们提供的功能诸如变量， CSS 函数，选择器嵌套以及其它一些非常酷的东西。这使得 CSS 代码非常易于管理，尤其在大项目中。

举个简单的例子，下面是使用了 CSS 变量和函数的 Sass 代码片段。

$accent-color: #2196F3;
    a {
        padding: 10px 15px;
        background-color: $accent-color;
    }
    a:hover {
        background-color: darken($accent-color,10%);
    }

ログイン後にコピー

使用 CSS 预处理器的唯一缺点是，它们需要编译成真正的 CSS 代码，但是如果你已经决定在你的项目中使用一个构建脚本，那么这就不再是你应该烦恼的问题了。

17、Autoprefixers

为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远无法精确的你需要哪一个，而且如果你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。

感谢上天，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器：

在线工具： Autoprefixer 文本编辑器插件 - Sublime Text, Atom 库 - Autoprefixer

18、在项目中使用精简代码

为了提高网站或app的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.

有很多不同的方法去精简 CSS 代码 :

在线工具 - CSS Minifier, CSS Compressor 文本编辑插件 - Sublime Text, Atom 库 - Minfiy , CSSO 和 CSSNano

ワークフローに応じて、上記のオプションのいずれかを選択できますが、常に何らかの方法でこのプロセスを自動化することをお勧めします。

19. 使用できますか