荐 从零教你一些CSS架构思想

从零教你一些CSS架构思想

我们为什么需要CSS架构?

众所周知，一个前端项目主要由HTML/CSS/JS组成，css作为前端项目的样式，绝对是很重要的。有一个良好的开发习惯，不仅可以避免很多冗余代码，而且还可以方便开发，也有利于后期的维护。
相信很多新手在写样式的时候大多都会遇到这样的一些问题：

• 从零开始写一个页面，样式不知道从何开始写起。
• 好不容易写好了一个页面，样式和高保真一样，但是用户换个浏览器样式就全乱了。
• 发现项目中有好几个页面样式都大同小异，但又不是完全相同，怎么办？复制粘贴？
• 领导说这个样式要改，可是这里样式一动，其它地方也变了，很难维护。

以上问题相信很多人都遇到过，甚至一些老鸟平时也没有太注意css架构的问题，觉得反正样式嘛，能写出来，还原高保真就行，殊不知增加了很多后期维护成本，导致本来三五十行的样式代码，变成了三五百行。
所以今天我就来教大家一些，我本人在项目中常用的一些CSS架构和我个人的设计模式，设计思想，给大家参考。接下来我们就一个个问题开始说。

如何从零开始写样式

首先我们需要拿到设计稿，一般是由UI所提供的高保真图，有的公司可能没有高保真图，而是草图，这个时候也要问清楚一些架构层级，比如哪些是在第一层，哪些第二层。我们以CSDN官网为例：

这是原图，我先从架构角度上把它切割下，分为三块，用红绿蓝表示：

大家可以看到，这个头部是占全屏的，而底下内容并不是全屏，而是居中的，所以第一层我用红色的框先把它分为上下两大块，然后上面一块header部分拿来写头部，底下内容部分，先让其内容居中，然后再将内容分为两大块，这里我用绿色框出来，分为左右，左边是左侧菜单栏，右边是内容。然后第三步，除了左菜单栏，右边的内容部分再分为两块，我用蓝色框出来，左边是内容，右边是右侧菜单栏。
有人会问为什么底下内容不直接分成左中右？而是要分两次？因为我看了下结构，虽然底下部分都属于内容，但是当点击左侧菜单栏的时候，中间内容和右侧菜单栏内容会跟着变化，而左侧菜单栏不会，所以我在这里把它分为两大块。如果项目有更细分的话，还可以用这个方法继续分下去，这样内容之前不会相互影响，代码结构上大概就是这样：

.header {
  // 最外层头部
}
.main {
  // 下方主内容
  .left-aside {
    // 左侧菜单栏
  }
  .right-main {
    // 中间部分
    .midden-main {
      // 内容
    }
    .right-aside {
      // 右侧菜单栏
    }
  }
}

这样的样式代码就是一个很好的开头了，我采用的是sass写法，大家可以作为参考。

为什么不同浏览器样式会错乱

除了一些比较老的IE浏览器，对于一些css3的高级写法不兼容外，最主要的原因就是代码样式没有初始化。什么意思？比如说h1到h6标签，在谷歌浏览器里有个20的外下边距，在老的IE浏览器里没有。还有一些比如ul和li这样的标签，也会出现这类的问题，可能会出现谷歌浏览器下和火狐浏览器自带的初始样式不同，包括一些其它浏览器，千奇百怪的，不单单是这些边距问题，有一些初始的网站初始的字体，颜色以及样式都不是我们想要的。所以为了避免这些问题，我们就要对项目css先做一个初始化，将所有元素的内外边距都设置为0，然后字体大小和颜色样式也设置一个初始样式。关于字体和颜色这些都是会继承的，所以可以按照项目标准来，有遇到特殊的可以再修改。一般常见的写法：

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

或者是:

body, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dt, dd, p, span, div, object, iframe, pre, a, abbr, cite, input, button, select, option {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

比较推荐第二种写法，尽量不适用通配符来匹配所有，而是把我们需要的写进去。

面对相似页面的处理

面对有一些页面，或者一部分长得很像的，但是又不完全一样的，项目做的多的，大家肯定会遇到过这种情况，那么通常你又是怎么做的呢？有的人是直接使用复制粘贴，然后再将不同的地方改改改，这样一来，如果页面多了，比如有二十个页面都有相似部分，那么就要复制二十遍，然后再进行修改。还有人用的是写一个公共文件，引入，然后不同的部分在这个文件里再写新的样式，然后覆盖旧的。这两种方法我觉得都不好，虽然说都能实现效果，但是无疑会增加开发成本，加大维护难度。
所以我的推荐是，先新增一个公共文件，然后根据项目的需求，写一些符合当前项目的样式。按照one style one class原则，可以一个class只对应一种样式。根据我的经验来看，绝大多数网站，都会有自己的主配色，基本上是1~3种颜色搭配。比如说现在的CSDN网站，它的主配色就是红白灰三种颜色，还有它这个网站各元素的边距通常都是20px，普通字体为14px等等。具体的细节大家根据自己项目高保真来总结，然后我将这些样式写在通用css中：

.my-back-color {
  background-color: gray;
}
.my-font-size {
  font-size: 14px;
  color: #333;
}
.my-mragin-right {
  margin-right: 10px;
}
.my-mragin-left {
  margin-left: 10px;
}
.my-mragin-top {
  margin-top: 10px;
}
.my-mragin-bottom {
  margin-bottom: 10px;
}
.my-color {
  color: red;
}

然后在我要用到这些相同的样式的时候，我只需要在元素上写多个class就可以了，这样一来只要前期写上重要的class，后期开发非常方便，也适合多人协作，后期如果要修改觉得这个class不要就去掉，也不容易影响到其它样式。

<div class="my-mragin-bottom my-mragin-top my-color my-font-size"></div>

以上基本上就是我对CSS架构设计的一些理解另外结尾处在和大家分享一些恶技巧和方法：

• 如CSS样式的命名，一般我们规范采取的都是中横线命名方法，如：my-color，之所以不用驼峰和下划线也是为了和js代码更好的区分，然后就是在命名上尽量语义化，名字长一点也没关系，这样便于后期维护，比如home页的头部，class我们可以取名home-header，而不要直接叫header，因为你不知道其它页面会不会也出现一个header。
• 大家在选择器使用上，尽量不要使用id，和内联样式，而用class。
• 样式冲突的情况下，想办法增加权重，去覆盖原来的样式，而不是用important来强制覆盖，因为用了一个important，后期如果还出现需要覆盖的话，你只能再用important，这样也会导致后期代码难以维护。

能想到的暂时就这些了，如果有遗漏的也请各位补充。
本文为原创，如需转载请注明出处，谢谢

本文地址：https://blog.csdn.net/yehuo2003/article/details/107122617