20 choses à noter lors de l'utilisation du code CSS dans des projets pratiques front-end

Cette fois, je vous présente 20 précautions pour utiliser le code CSS dans des projets pratiques front-end. Ce qui suit est un cas pratique, jetons un coup d'œil.

01. Utilisez les attributs de marge avec prudence

Contrairement à d'autres attributs, lorsque les marges dans la direction verticale se rencontrent, elles s'effondrent. Cela signifie que si la marge inférieure d'un élément rencontre la marge supérieure d'un autre élément, la plus grande des deux sera laissée seule. Vous trouverez ci-dessous un exemple simple.

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

En fait, la distance entre les deux éléments ci-dessus dans le sens vertical n'est pas de 70px, mais de 40px, et la marge du carré bleu n'est pas calculée. Il existe de nombreuses façons d'éliminer ce comportement par défaut, mais la meilleure consiste à utiliser la propriété margin uniquement dans une seule direction, par exemple margin-bottom.

02. Utiliser la disposition du modèle de boîte

Le modèle de boîte a naturellement ses raisons d'exister. float et inline-block fonctionnent certainement, mais ce sont des outils de base pour styliser des documents, pas des sites Web entiers. Dans un sens, Flexbox est conçu pour rendre plus facile et plus précise la création de la mise en page souhaitée.

La série de propriétés fournies par le modèle Flexbox offre aux développeurs une plus grande flexibilité, et une fois que vous les connaissez, créer une mise en page réactive est un jeu d'enfant. La prise en charge de Flexbox par le navigateur est également proche de la perfection, il n'y a donc aucune raison de vous empêcher d'utiliser Flexbox.

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

03. Effectuer une réinitialisation CSS

Bien que la situation se soit améliorée au fil des années, le comportement par défaut de chaque navigateur est toujours le même. Il y a beaucoup de désaccords. La meilleure façon de résoudre ce problème consiste à utiliser un fichier de réinitialisation CSS pour réinitialiser les styles par défaut de tous les éléments. Cela vous permet de travailler dans un environnement de style pur et de produire les mêmes résultats dans tous les navigateurs.

Il existe de nombreuses bibliothèques qui font très bien ce travail, comme normalize.css, minireset et ress, en corrigeant les incohérences entre les navigateurs. Si vous ne souhaitez pas utiliser de bibliothèque, vous pouvez également effectuer vous-même une simple réinitialisation CSS, comme ci-dessous.

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

Cela peut sembler dur, mais en éliminant la marge et le remplissage par défaut, nous aurons plus de facilité à placer nos éléments sans nous soucier que cela prenne de l'espace supplémentaire. box-sizing : border-box est une propriété très utile que nous présenterons ci-dessous.

04. Utilisez Border-box pour tous les éléments

Beaucoup de débutants ne connaissent pas l'attribut box-sizing, mais il est effectivement important. . La meilleure façon de le comprendre est d’examiner ses deux valeurs facultatives.

content-box(default) - Lorsque nous définissons la largeur et la hauteur de l'élément, mais ce n'est que la taille du contenu. Tous les remplissages et bordures ne sont pas inclus dans le contenu, c'est-à-dire en dehors du contenu.

Par exemple, si nous avons un p avec une largeur de 100 px et un remplissage de 10 px, alors sa largeur réelle est de 120 px.

border-box - le rembourrage et la bordure sont inclus dans la largeur et la hauteur. Si un p a une largeur de 100 px et que box-sizing: border-box est défini, sa largeur sera toujours de 100 px, peu importe la quantité de remplissage et de bordure que vous ajoutez.

Définir une bordure pour tous les éléments vous aidera avec le style et vous n'aurez pas à faire de calculs fastidieux.

05. Image comme arrière-plan Lorsque vous ajoutez une image à votre site, surtout si vous souhaitez créer un design réactif, utilisez une balise p et définissez l'attribut d'arrière-plan au lieu d'utiliser l'élément

Il semble que le travail supplémentaire n'ait aucun effet, mais en fait il est plus pratique pour vous de styliser les images, de conserver leur taille d'origine ou de les modifier en fonction des proportions, ce qui nécessite l'aide de l'arrière-plan. size, background-size Il existe d'autres propriétés.

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

L'un des inconvénients de cette technique est que l'accessibilité de votre page peut en prendre un léger coup car vos images ne seront pas explorées correctement par les lecteurs d'écran et les moteurs. Ce problème peut être résolu par l'ajustement d'objet, mais il n'est pas pris en charge par tous les navigateurs.

06. De meilleures bordures de tableau

Le tableau en HTML n'est pas intéressant. Ils sont très originaux, difficiles à concevoir pour être réactifs et difficiles à intégrer dans le style général. Par exemple, si vous souhaitez ajouter une bordure supérieure à un tableau et aux éléments qu'il contient, vous pourriez obtenir le résultat suivant.

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

En fonction de votre flux de travail, vous pouvez choisir d'utiliser l'une des options ci-dessus, mais il est recommandé de toujours automatiser ce processus d'une manière ou d'une autre.

19. Puis-je utiliser

Différents navigateurs ont encore de nombreux problèmes de compatibilité incohérents, utilisez Caniuse ou d'autres services similaires. Vérifiez si l'attribut que vous utilisez est l'utilisation est largement prise en charge, si un préfixe doit être ajouté ou si un bug apparaîtra sur une certaine plate-forme

Il suffit de vérifier si cela ne suffit toujours pas, vous devez toujours tester si la mise en page sera cassée. sans raison de crash, une bonne compréhension des navigateurs que les utilisateurs utilisent fréquemment sera également d'une grande aide, vous pouvez donc voir qu'un bon support est essentiel

Valider .

La validation du code CSS n'est peut-être pas aussi importante que la validation du code HTML ou JavaScript, mais il peut quand même être utile d'exécuter votre code sur un validateur CSS, qui vous dira si vous avez écrit des erreurs ou si vous avez un mauvais résultat. code , et vous donnera même quelques suggestions pertinentes pour vous aider à améliorer votre code.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment envoyer une requête POST en utilisant le format JSON

Retour à la page d'accueil après avoir partagé le développement de l'applet page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!