如何使CSS--better（系列二）

上一篇文章(如何使CSS--beter 系列一)中  分析了一下 什么样子的代码是高效的 应该避免什么样子的代码, 那么什么样子的代码是更容易扩展的? 什么代码是更好维护的? 什么代码是更好的?

下边咱们简单的说一下 高效的代码  如果现在在注册 和登录页面的 input类型的样式是一样的  那么该怎么做呢?  注册的外层容器为 reg  登录的外层容器为login 那么相信我

.input-user{这里是属性}通用与 注册和登录  还是
.log .input-user{这里是属性}
.reg .input-user{这里是属性}

相比来说我们更喜欢通用的代码（因为一样啊） 为什么非要写两遍 呢？

这个是更好的代码

那么如果说什么代码是更好维护的 就请出来三个神秘嘉宾（语义化css， 和 注释，最后强大的模块化css）了

简单介绍一下  (1)语义化就是你写的 css要一眼能看出来写的是什么东西  如果你一大堆代码写的都是aaa  bbb  ccc 或者 csdb 之类的  那自己也会感到心烦吧 建议直接 英文字母来写

比如

input-user 他说的就是 填写用户名的那个input标签

input-password 就是说的是填写用户名密码的那个input标签 依此类推  觉得有点长可以采取缩写 但是要让别人能看到你写的这个东西是什么东西  不能缩写为 i-p  最起码也要input-pwd 之类的

下面谈一下(2)注释 大家都知道我们可能把一个网站的一个首页写在了一个index.css中  普通的网站可能也就几百多行  问题不是很大 如果是电商呢？ 上千行呢？ 还是建议写一下注释表明以下代码是放在那里的 这样的话 我们在 css文件中实现了模块化  如果以后要重新构建这个侧边栏 我直接把你的代码删除 或者改写就可以了 就没有必要再去继续再找个页面中写代码  （没准还有样式冲突）

最后就是(3)模块化  模块化就是简单来说就是把你的css分成模块来处理  比如你的reset.css可能十年都不会变  那么 就单独的放到一个地方  在新建一个文件夹来存你的页面css  至于模块化css 我就不多说了  时间有限 大家可以直接百度模块化css 选择适合自己的模块化结构

这个是小弟的模块化 可能有些简单 因为这个项目很小  不能在给更多的图了。。。。 嘿嘿。。。