初谈怎样更好的去规划CSS -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 初谈怎样更好的去规划CSS

初谈怎样更好的去规划CSS

浏览:896次出处信息

我是个什么都谈不上的不合格的前端~但还算是个有点追求、不断前进的前端，我希望自己的代码更合理、更高效、更优美。为了照顾一下基础稍微薄弱一些的人，我会从浅到深的逐步去说这个事儿。

学习前端技术，基本上都要从html、css、js这么一条线走过来，那么最先写的就是html了，没有结构和内容，网页就是一片空白，就无从谈起它长什么样子(css)，初学时，不会去写整个页面，而是从一个个能实现效果的小例子去写，每当这些小例子乖乖的呈现在网页中的时候，新童鞋都会兴奋异常是吧~什么各种粗体的，斜体的，居中的，大小写字母的，换行的，水平线，跑马灯的，背景音乐的，都想去试试(其实都差不多~)，到后来可能会知道这样不好是吧，不符合结构和表现分离的原则，

然后就跟着某些初级教程去类似的这样写

这种叫内联式，这个时候，其他的方法相对比较遥远，初学者眼里的安全区就是<title></title>和<body></body>,一个负责在浏览器的头部显示标题，一个负责在网页内容区填充。其他地方似乎都不敢动，随着学习的深入，会接触到内嵌式

就是把样式表整个用<style></style>包裹起来放在<head></head>里：

这里就开始接触到“为标签设置样式”、“定义类”、“定义ID”等等，这个后面谈。学完了这部分可能觉得这种方法不错嘛，比内联的好(也可能需要适应一段时间)，同时，这些也都还不太符合分离的原则，一看还有外联的。。。额，怎么这么多，人一般会问个“为什么”，这样的好处是啥啊，好吧，外联的好处就是你用在网页里的时候用上这么一句话就可以了，

相同的样式表只要写一次可以用在不同的文件当中，这不论在简单还是复杂的网站中好处都是很大的，也实现了结构和表现的完全分离，当然，这么一来就要注意到类或者id的命名和避免层叠覆盖等等，后面讲。既然有这么好的，这下总可以了吧，当时我就是这么想的，但后来，你懂的，人总是要为自己的无知付出代价，还有一种就是在样式表中引入外部样式文件@import，使用方法如：

也是一种引入样式表的方式，但跟link不同，它专为css而生，link却能做比较多的事情。不过，，随便请一个高手都能说出使用这种方法的一些不利，比如必须写在所有样式上面，加载速度慢，js的dom操作不了，等等。总之这种方法使用不多，在此先不详述。

顺带说一下优先级的事儿吧，如果你定义的是同一个东西的样式，那么对它起作用的样式优先特点就是，距离最近的起作用，比如，内嵌大于外联，内联大于外嵌，当然，这里所说的只是以程序作者所写样式范围，客户端设置和代理、默认样式就不说了。特殊性则另当别论，怎样去增加特殊性呢，比如定义了一个标签的样式，那么就是指定了这个标签，如果有多个同类的标签，你为其中一个定义了“类”，那么定义的类规则就只对这一个起作用，定义“id”同样，但不同的是，一个页面同样名称的“id”只能出现一次，类可以多处出现，除了这些单一定义，一个元素也可以同时定义类和“id”，也就是说，不管是标签也好，类也好，“id”也好，都是我们对一个元素附加样式能用到的工具，只不过特点稍有不同，这个不同也是为我们定义样式提供方便的，当然，这些是一层的情况，还能运用包含关系去多层设置，这样可以在定义了标签和类之后去增加特殊性的方法，毕竟范围越小越有针对性，还是比较合理且容易理解的。除了这些，还有比较多的其他方式，比如伪类，子节点选择器，兄弟节点选择器，属性选择器，css3也提供了更丰富的选择器，说了这么多，如果你都还没了解到，可能会觉得怎么那么麻烦，你要明白一点，定那些标准的人不是傻子，程序员也不是傻子，去找麻烦，这些功能特殊的选择器只会给你带去便利。只有把这些方法利用好各自的特点，巧妙的结合起来，你才能写出更精简，高效的代码，而不用到处的定义类，或者多层嵌套的去定义后代样式。有些书籍会去根据标签，id，类这些去解释权重这个概念，并且教你怎么计算权重，或许你绕来绕去也绕不明白，那些东西也不用去死记，去计算，多实践，有了经验之后，你所理解的和掌握的其实和按照权重计算出来的是一样的。好了，这些只是出于单纯的css方法方面考虑，具体到一个网站来说，该怎么去规划呢？

你至少需要考虑下面几点，当然，是需要你仔细的对设计稿和要实现的效果以及交互去考虑，而不是凭空考虑。

一、全局的定义、继承

这是优化css的第一步，也是很重要的一步，可以为你省去很多事情。这就需要你去仔细的看，哪些地方具有共性，这个共性的范围是多大，是否可以一次定义，多处生效。还要知道哪些是可以继承的，比如，字体类型、大小、颜色(有默认设置的除外，那些需要另外定义去覆盖)，这样做往往已经是必须的了，因为页面内这类的样式不会有太多种，除非设计师那啥了~

三、可重用css

上面两点提到的是针对一个项目里面可以怎样去构思优化，这个就是又多些考虑了，哪些可以重用呢？还真有不少，比如：居中、浮动、清除浮动、清除默认样式，如果更细致一些的话，还可以到字体类型，字体大小，控制元素的显示或隐藏，一段固定高度的空白等等，但我个人认为，也不需要太细，有时候在样式的定义里多加上一个规则的设置或许会比在标签上多加一个类更好，如果一个标签上面有四五个甚至更多的类，至少我是受不了的~

这样做的好处还是很大的，至少你不用再每次写样式的时候都去定义body、一堆hx、ul、ol此类的东东，只需要引入一个事先写好的样式表即可。需要居中的元素你看情况是直接定义还是加上事先定义好的类，只定义宽度，所有这些都是为了代码的简洁和编写效率去考虑，哪种比较好就选哪种。

我现在是这样做的，用一个重置css文件，一个公共css文件，加一个站点css文件，至于很多人采用过的特殊功能或者版块儿单独出来一个文件，我暂时没有去采用，并不是说不好，或许当我觉得有必要或者有好处的时候，也会采用。

另外一点需要提醒，当然，可能是多余的提醒，可重用，并不是说完全的照搬过来，可以根据项目需要进行删减，或者更改，重用文件可以写一份，用到项目里的时候复制一份根据需要设置即可。

三、模块化

刚刚学会写css人，都会有个不大好的习惯吧，怎么形容呢，思维像脱缰的野马？还是荒野游魂？呵呵，反正就是想到哪儿写到哪儿，写着写着觉得不对了，再回头改，觉得缺点什么再往上加，等等诸如此类，这都是缺少事先的规划，没有先动脑后动手的结果。一个网页里面有很多内容，它们各不相同，去区分它们不仅仅能使内容更结构化、具可读性，更是为了之后定义css或者后期做修改的时候去查找提供了很大便利，也牵扯到了命名的语义化，不能只是为了不同而随意命名，如果是新闻，命名个“xw”，你当时倒是知道了，过一段时间你还知道么，别人看的时候知道么，这些东西在没形成习惯或者没有在业界达成共识并普遍运用之前，就不要去用。

四、效果实现

比如一个页面有多处的阴影，或者多处的遮罩层，它们仅仅是存在于不同的内容里，效果和定位方式都一样，大小尺寸不同而已，特别是在现在这种需要顾及多浏览器兼容的情况下，一定义可能就是带着各种前缀的一大坨，这个时候，你何不只定义一个类呢，我称之为“效果类”，把定位方式，效果实现的代码都写好在一个类，如果哪里需要，就在那里加上这个类，另外再利用特殊性去选择它，定义专有尺寸或者位置即可。这种思想有点类似于其他程序语言里面的封装，然后传参，呵呵。想懒省劲儿就多动动脑吧！~

关于这方面还有一个不错的资料推荐给大家，鬼哥写的《页面重构的设计模式》http://www.cssforest.org/blog/index.php?id=218，如果大家想去他博客去看更多资料，我也有加他的博客链接——css前端森林是也！~

以上说的这些都是我个人在工作过程中的体会总结，也不是全部，只涉及一些基本的，对大家都有些用处的方法。别的地方可能也有类似的东西，我也是在不断的学习，借鉴，如果说我这篇文章有什么特别之处，那就是我结合了一些别人问过我的问题和自己遇到过的问题，得到的教训等把从初接触写网页的职场新人到具备了一定css基础的人的情况，较完整的过了一遍吧，比较有顺序和逻辑的去看，会看到更多哦。

其他不多说了，先写这么多，欢迎交流，以后有新的收获或者觉得这篇文章里有不足的地方我会再写一篇加以修正补充！~

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：导航类“不定宽水平居中”的几种思路

后一篇：再谈怎样更好的写css >>

文章信息

作者：灵感_idea 来源：灵感_idea
标签： css
发布时间：2016-02-13 23:06:48

建议继续学习

近3天十大热文