13 conseils pour rédiger un bon code CSS

CSS n'est pas difficile à apprendre, mais dans les grands projets, cela devient difficile à gérer. Surtout lorsque différentes personnes ont des styles d'écriture légèrement différents en CSS, il devient encore plus difficile de communiquer au sein de l'équipe. pour obtenir des méthodes efficaces et propres, les principes du code CSS :

1. Utilisez la réinitialisation mais pas la réinitialisation globale

Les attributs par défaut des différents éléments du navigateur sont différents. Utilisez Réinitialiser pour réinitialiser certains attributs par défaut des éléments du navigateur afin d'assurer la compatibilité du navigateur. Mais il convient de noter que merci de ne pas utiliser la réinitialisation globale :

*{ margin:0; padding:0; }

Non seulement cela est lent et inefficace, mais cela entraîne également la réinitialisation des marges et du remplissage des éléments inutiles. Il est recommandé de se référer aux pratiques de YUI Reset et d'Eric Meyer. Je partage le même point de vue qu'Eric Meyer. La réinitialisation n'est pas statique. Des modifications appropriées doivent être apportées en fonction des différents besoins du projet pour assurer la compatibilité du navigateur et la commodité opérationnelle. La réinitialisation que j'utilise est la suivante :

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, 
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{ 
  border:medium none; 
  margin: 0; 
  padding: 0; 
} 
/** 设置默认字体 **/
body,button, input, select, textarea { 
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
em{font-style:normal;} 
/** 重置列表元素 **/
ul, ol { list-style: none; } 
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;} 
a:hover { text-decoration: underline; color:#F40; } 
/** 重置图片元素 **/
img{ border:0px;} 
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. Bonnes habitudes de dénomination

Il ne fait aucun doute qu’un code désordonné ou dont le nom est peu sémantique rendra fou n’importe qui. Codez comme ceci :

.aaabb{margin:2px;color:red;}

Je pense que même un débutant ne nommerait pas une classe comme celle-ci dans un projet réel, mais avez-vous déjà pensé qu'un tel code est également très problématique :

<h1>My name is <span class="red blod">Wiky</span></h1>

Le problème est que si vous devez changer toutes les polices rouges d'origine en bleues, alors le style deviendra :

.red{color:bule;}

Une telle dénomination sera très déroutante, et elle sera également très gênante si la barre latérale nommée .leftBar doit être modifiée en barre latérale droite. Par conséquent, veuillez ne pas utiliser les caractéristiques de l'élément (couleur, position, taille, etc.) pour nommer une classe ou un identifiant. Vous pouvez choisir un nom significatif tel que : #navigation{...}, .sidebar{.... }, .postwrap{ ...}

De cette façon, quelle que soit la manière dont vous modifiez les styles qui définissent ces classes ou identifiants, la connexion entre eux et les éléments HTML ne sera pas affectée.

Il existe une autre situation dans laquelle certains styles fixes ne peuvent pas être modifiés après avoir été définis. Vous n'avez alors pas à vous soucier de la situation qui vient d'être mentionnée lors de la dénomination, comme

.alignleft{float:left;margin-right:20px;} 
.alignright{float:right;text-align:right;margin-left:20px;} 
.clear{clear:both;text-indent:-9999px;}

. ​Donc pour un tel paragraphe

<p class="alignleft">我是一个段落！</p>

Si vous devez modifier ce paragraphe de l'alignement d'origine à gauche à l'alignement à droite, il vous suffit alors de modifier son nom de classe pour l'aligner à droite.

3. Abréviation du code

Les abréviations de code CSS peuvent augmenter la vitesse d'écriture du code et simplifier la quantité de code. De nombreuses propriétés peuvent être abrégées en CSS, notamment les valeurs de marge, de remplissage, de bordure, de police, d'arrière-plan et de couleur, etc. Si vous avez appris l'abréviation du code, le code original ressemblerait à ceci :

li{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 1.2em; 
    line-height: 1.4em; 
    padding-top:5px; 
    padding-bottom:10px; 
    padding-left:5px; 
}

Il peut être abrégé comme suit :

li{ 
    font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
    padding:5px 0 10px 5px; 
}

Si vous souhaitez en savoir plus sur la façon d'abréger ces attributs, vous pouvez vous référer au « Résumé de la syntaxe des abréviations CSS communes » ou télécharger CSS-Shorthand-Cheat-Sheet.pdf.

4. Utiliser l'héritage CSS

Si plusieurs éléments enfants d'un élément parent sur la page utilisent le même style, il est préférable de définir leurs mêmes styles sur leurs éléments parents et de les laisser hériter de ces styles CSS. De cette façon, vous pouvez bien conserver votre code et réduire la quantité de code. Le code original ressemble donc à ceci :

#container li{ font-family:Georgia, serif; } 
#container p{ font-family:Georgia, serif; } 
#container h1{font-family:Georgia, serif; }

Il peut être abrégé comme suit :

#container{ font-family:Georgia, serif; }

5. Utilisez le multi-sélecteur

Vous pouvez combiner plusieurs sélecteurs CSS en un seul s'ils ont un style commun. Cela permet non seulement de garder le code concis, mais vous permet également d'économiser du temps et de l'espace. Tels que :

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

Peut être fusionné avec

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. Commentaires de code appropriés

Les commentaires de code peuvent permettre aux autres de comprendre plus facilement votre code, et une organisation raisonnable des commentaires de code peut rendre la structure plus claire. Vous pouvez choisir d'ajouter un répertoire au début de la feuille de style :

/*------------------------------------ 
    1. Reset 
    2. Header 
    3. Content 
    4. SideBar 
    5. Footer 
  ----------------------------------- */

De cette façon, la structure de votre code est claire en un coup d'œil et vous pouvez facilement trouver et modifier le code.

Le contenu principal du code doit également être divisé de manière appropriée, et le code doit même être commenté si nécessaire, ce qui est également propice au développement de l'équipe :

/***    Header  ***/ 
#header{ height:145px; position:relative; } 
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;} 
  
/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;} 
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; } 
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; } 
  
/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;} 
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. Commandez votre code CSS

Si les attributs du code peuvent être triés par ordre alphabétique, il sera plus rapide de les trouver et de les modifier :

/*** 样式属性按字母排序 ***/
p{ 
    background-color:#3399cc; 
    color:#666; 
    font:1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px; 
    margin:10px 5px; 
    padding:5px 0 10px 5px; 
    width:30%; 
    z-index:10; 
}

8. Gardez CSS lisible

L'écriture de CSS lisible facilitera la recherche et la modification des styles. Je pense qu'il va de soi lequel des deux cas suivants est le plus lisible.

/*** 每个样式属性写一行 ***/
p{ 
    background-color:#3399cc; 
    color:#666; 
    font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px; 
    margin:10px 5px; 
    padding:5px 0 10px 5px; 
    width:30%; 
    z-index:10; 
} 
  
/*** 所有的样式属性写在同一行 ***/
p{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

Lorsqu'il s'agit de certains sélecteurs avec moins d'attributs de style, j'écrirai une ligne :

/*** 选择器属性少的写在同一行 ***/
p{ background-color:#3399cc; color:#666;}

Cette règle n’est ni stricte ni rapide, mais quelle que soit la façon dont vous l’écrivez, ma suggestion est de toujours garder le code cohérent. S'il y a plusieurs attributs, écrivez-les sur des lignes séparées. S'il y a moins de 3 attributs, vous pouvez écrire une seule ligne.

9. Choisissez de meilleures valeurs d'attribut de style

Certains attributs CSS utilisent des valeurs d'attribut différentes. Bien que les effets soient similaires, il existe des différences de performances, comme

.

　　区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

　　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

　　同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

　　10. 使用代替@import

　　首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

　　11. 使用外部样式表

　　这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" > 
    #container{ .. } 
    #sidebar{ .. } 
</style>

或

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

　　而是使用导入外部样式表：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

　　12. 避免使用CSS表达式（Expression）

　　CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

　　如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

　　表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

　　如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

　　13. 代码压缩

　　　当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

　　利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

　　14. 总结

　　在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

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!