20 Dinge, die Sie bei der Verwendung von CSS-Code in praktischen Frontend-Projekten beachten sollten

Dieses Mal bringe ich Ihnen 20 Vorsichtsmaßnahmen für die Verwendung von CSS-Code in praktischen Front-End-Projekten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

01. Verwenden Sie Randattribute mit Vorsicht

Im Gegensatz zu anderen Attributen werden Ränder in vertikaler Richtung zusammengebrochen. Das bedeutet, dass, wenn der untere Rand eines Elements den oberen Rand eines anderen Elements trifft, der größere der beiden in Ruhe gelassen wird. Unten finden Sie ein einfaches Beispiel.

 <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;
    }

Tatsächlich beträgt der Abstand zwischen den beiden oben genannten Elementen in vertikaler Richtung nicht 70 Pixel, sondern 40 Pixel, und der Rand des blauen Quadrats wird nicht berechnet. Es gibt viele Möglichkeiten, dieses Standardverhalten zu beseitigen. Die beste Möglichkeit besteht jedoch darin, die Eigenschaft „margin“ nur in eine Richtung zu verwenden, z. B. „margin-bottom“.

02. Box-Modell-Layout verwenden

Das Box-Modell hat natürlich seine Daseinsberechtigung. float und inline-block funktionieren sicherlich, aber sie sind grundlegende Werkzeuge zum Gestalten von Dokumenten, nicht ganzer Websites. In gewissem Sinne ist Flexbox darauf ausgelegt, die Erstellung des gewünschten Layouts einfacher und präziser zu machen.

Die Reihe von Eigenschaften, die das Flexbox-Modell bietet, geben Entwicklern mehr Flexibilität, und sobald Sie mit ihnen vertraut sind, ist die Erstellung eines responsiven Layouts ein Kinderspiel. Auch die Browser-Unterstützung für Flexbox ist nahezu perfekt, es gibt also keinen Grund, Sie von der Nutzung von Flexbox abzuhalten.

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

03. CSS-Reset durchführen

Obwohl sich die Situation im Laufe der Jahre verbessert hat, gibt es immer noch viele Unstimmigkeiten im Standardverhalten jedes Browsers. Der beste Weg, dieses Problem zu lösen, besteht darin, eine CSS-Reset-Datei zu verwenden, um die Standardstile für alle Elemente zurückzusetzen. Dadurch können Sie in einer reinen Stilumgebung arbeiten und in allen Browsern die gleichen Ergebnisse erzielen.

Es gibt viele Bibliotheken, die diese Aufgabe sehr gut erledigen, wie zum Beispiel normalize.css, minireset und ress, die Inkonsistenzen zwischen Browsern korrigieren. Wenn Sie keine Bibliothek verwenden möchten, können Sie auch selbst einen einfachen CSS-Reset durchführen, wie unten beschrieben.

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

Das mag hart klingen, aber durch die Eliminierung des Standardrands und der Standardabstände können wir unsere Elemente einfacher platzieren, ohne uns Sorgen machen zu müssen, dass sie zusätzlichen Platz beanspruchen. box-sizing: border-box ist eine sehr nützliche Eigenschaft, die wir im Folgenden vorstellen werden.

04. Verwenden Sie die Rahmengröße für alle Elemente

Viele Anfänger kennen das Attribut der Boxgröße nicht, aber es ist in der Tat wichtig . Der beste Weg, es zu verstehen, besteht darin, sich die beiden optionalen Werte anzusehen.

content-box(default) – Wenn wir die Breite und Höhe für das Element festlegen, ist das jedoch nur die Größe des Inhalts. Alle Abstände und Ränder sind nicht im Inhalt enthalten, d. h. außerhalb des Inhalts.

Wenn wir beispielsweise ein p mit einer Breite von 100 Pixel und einem Abstand von 10 Pixel haben, beträgt seine tatsächliche Breite 120 Pixel.

border-box – Polsterung und Rand sind in der Breite und Höhe enthalten. Wenn ein p eine Breite von 100 Pixel hat und box-sizing: border-box festgelegt ist, beträgt seine Breite immer 100 Pixel, unabhängig davon, wie viel Abstand und Rand Sie hinzufügen.

Das Festlegen eines Rahmenrahmens für alle Elemente hilft beim Styling und Sie müssen keine mühsamen Berechnungen anstellen.

05. Bild als Hintergrund Wenn Sie ein Bild zu Ihrer Website hinzufügen, insbesondere wenn Sie ein responsives Design erstellen möchten, verwenden Sie ein p-Tag und legen Sie das Hintergrundattribut dafür fest, anstatt das -Element zu verwenden.

Es scheint, dass die zusätzliche Arbeit keine Wirkung hat, aber tatsächlich ist es für Sie bequemer, die Bilder zu formatieren, ihre Originalgröße beizubehalten oder sie entsprechend den Proportionen zu ändern, was die Hilfe von Hintergrund- Größe, Hintergrundgröße Es gibt noch einige andere Eigenschaften.

 <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;
    }

Ein Nachteil dieser Technik besteht darin, dass die Zugänglichkeit Ihrer Seite möglicherweise leicht beeinträchtigt wird, da Ihre Bilder von Screenreadern und Engines nicht richtig gecrawlt werden. Dieses Problem kann durch Object-Fit gelöst werden, es wird jedoch nicht von allen Browsern unterstützt.

06. Bessere Tabellenränder

Die Tabelle in HTML ist nicht interessant. Sie sind sehr eigenartig, lassen sich nur schwer responsiv gestalten und lassen sich nur schwer in den Gesamtstil einfügen. Wenn Sie beispielsweise einer Tabelle und den darin enthaltenen Elementen einen oberen Rahmen hinzufügen möchten, erhalten Sie möglicherweise das folgende Ergebnis.

正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 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

Abhängig von Ihrem Arbeitsablauf können Sie sich für eine der oben genannten Optionen entscheiden, es wird jedoch empfohlen, diesen Prozess immer auf irgendeine Weise zu automatisieren.

19. Kann ich

Verschiedene Browser haben immer noch viele inkonsistente Kompatibilitätsprobleme? Überprüfen Sie, ob das Attribut für Sie geeignet ist Die Verwendung wird weitgehend unterstützt, unabhängig davon, ob ein Präfix hinzugefügt werden muss oder ob auf einer bestimmten Plattform ein Fehler auftritt.

Überprüfen Sie einfach, ob dies immer noch nicht ausreicht. Sie müssen noch testen, ob das Layout beschädigt wird Da es nicht zu Abstürzen kommt, ist ein gutes Verständnis der von Benutzern häufig verwendeten Browser von entscheidender Bedeutung.

20

Die Validierung von CSS-Code ist vielleicht nicht so wichtig wie die Validierung von HTML- oder JavaScript-Code, aber es kann trotzdem hilfreich sein, Ihren Code mit einem CSS-Validator laufen zu lassen, der Ihnen sagt, ob Sie Fehler geschrieben haben oder fehlerhaft sind Code und gibt Ihnen sogar einige relevante Vorschläge, die Ihnen bei der Verbesserung Ihres Codes helfen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So senden Sie eine POST-Anfrage im JSON-Format

Kehren Sie zur Startseite zurück, nachdem Sie die Applet-Entwicklung geteilt haben Seite

Das obige ist der detaillierte Inhalt von20 Dinge, die Sie bei der Verwendung von CSS-Code in praktischen Frontend-Projekten beachten sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!