如何写好css

我们为什么要写好css？什么样的css才是好得css ？

我们在平时开发过程中，一直集中精力在js 上 却忽略了css的问题 写的css  五花八门  到处都是（css嵌套乱，行内样式）导致改的时候  牵一发而动全身，那我们应该怎么去组织 和书写css呢？

　　1.要想写好css 首先得知道  什么样得css 是好得css 。

　　　　1.1 有好的注释的css  注释内容应该包括

• 文件内容
• 选择器的依赖，用法等
• 使用特定声明的原因（eg: 因为浏览器怪癖，而做出的特殊处理）
• 正在被重构，不应该被使用的废弃样式

 　下面对以上面做出相对应的例子

/* 
    主导航的样式 
*/
.nav-lin{
 ***
}
.nav-link::hover{
 border-botton:4px solid #e56e6e6;
 /*
   防止因为增加了4px下边框而导致元素移动
 */
 padding-bottom: 0; 
}

2.结构一致的规则集

　整齐的格式 有助于我们浏览 修改  甚至我们可以在写的时候按照字母顺序去写每个属性名称

/* 跨一行的css代码*/

 selector { property1: value; property2: value; property3: value; }

/* 跨多行的css代码*/

 selector {     
    property1: value;
    property2: value;
    property3: value;
 }

　　

3.简单的选择器

　　比较下面几个选择器

　　/*选择器1*/
　　 div > nav > ul > li > a {
　　　　color: #1200FF;
     }
　　/*选择器2*/
　　  a.nav-link {
　　 　　color: #1200FF;
     }

　　/*选择器2*/
　　  .nav-link {
　　 　　color: #1200FF;
     }

　　对于相同的html结构两种不同的css  不同选择器对我们来说 维护成本也会有很大不同

　　第一种 1.过分依赖html 结构  html 结构的变化会引起css的不生效  与html  耦合度太大

　　　　     2.修改起来比较麻烦

　　第二种 过于精确的选择器，没有了复用的价值

　　第三种 简化过后的选择器   既没有高的耦合度 也不至于过于精确 而且也能实现第二种类似效果 对他进行扩展 比如

　　a.nav-link{
       cursor: pointer;
　　}

4.分离css 和 js

　　 由于css和js都依赖与类名和 id，所以混乱使用他们 会导致我们的代码很乱  所以我们把处理css 和 类 和js 要使用的类  在名字上加以区分  比如 在js 要使用的类名上 使用 js-***  加上以js 开头的前缀 而不为他们增加样式。其次js 尽可能的使用 id  或者和 css 使用类名区分的类名   css 和js 不要混合使用  其次 我们用js 为元素添加样式时  不要直接使用 style  给他添加样式，因为js style添加的样式 是行内样式，权重最高。 我们尽量通过用js 给元素添加类的方式去改变元素样式。 这样也有助于避免重绘。

5.类名要有意义

　　至于名字要有意义，其实和js 一样 要做到见名知意， 不能太模糊 也不能太精确  比如现在给一个 白色英短猫 命名  这时我们能想到的名字 有 cat animal   while-english-cat   这时候  我们不能用 while-english-cat 因为他太精确了  以至于我们不能复用 其他小猫也有可能用这个类名 所以放弃  但是  animal 又太泛指   所以我们使用cat 这个来命名。

6.避免使用过于模块化的类

　　比如说 为 h1 添加   font-bold   blue-text bottom-large    text-right  这么多类   这样的书写类的方式  其实和行内样式  并没有多大区别，我们应该  把他提炼一次， 放在一个类里。把过于模块化的类组织到一起

.section-title {   
　color: #1200FF; 
  font-weight: bold; 
  margin-bottom: 20px; 
  padding: 0;  
 text-transform: uppercase;
 }

　　

（未完待续）