认识达内从这里开始

认真做教育专心促就业

css设计模式的一些设计要求都有哪些

发布：运城达内教育官网
来源：互联网
时间：2020-01-09 09:32

设计模式我们在前几期的文章中给大家介绍过很多次了，而今天我们就一起来了解一下，css设计模式的一些设计要求都有哪些。

css设计模式的一些设计要求都有哪些

1、层级嵌套不要太深

稍微了解一些浏览器渲染原理的都知道，它在解析CSS规则的时候，是从右向左，一层层的去遍历寻找，如果层级太多，必然增加了渲染时间，影响渲染速度。另外，如果选择器层级过多，也就间接反应了，你的HTML结构可能写得不够简洁。

那么具体多少层合适?一般建议是不超过4层，但话又说回来，超过4层会怎样吗?不会有多明显的影响，除非你写到很恐怖的数量，或者项目极其庞杂，可能能看出来影响，其实从我们日常需求来看，4层以内足可以解决绝大多数问题，故而，是合理的。

2、避免使用元素选择器

在HTML中，有很多常用的高频元素，比如，div、p、span、a、ul等，如果，你在多层选择器的内层使用了元素选择器，那么，在开始寻找时，浏览器就会遍历HTML中的所有该元素，显然，这是没有必要的。

我们的需求和代码结构都是存在着潜在变化的，今天写好了一个页面，明天可能就要再加进去一个按钮，再加进去一句话，再加进去一个图标。我们写好的一个结构，也随时可能被复用到别的结构中去，所以，如果，你使用了元素选择器去定死某个东西，不论是新加进来的东西，还是被复用的东西加到别的结构里去，都极有可能产生样式的冲突，这个时候，你又不得不写多余的样式进行覆盖修正，或者重新定义类。

所以，出于以上考虑，在具体的代码模块中，尽量不要使用元素选择器，使用元素选择器的前提是，你完全的确定，不会导致出现问题。注意，我用的限定范围是“具体的代码模块”，那么用于定义通用规则的样式，是可以的，也是推荐使用的，比如，reset。也可以是别的地方，这就需要我们自行考量。

3、文件引入的数量和顺序

对于刚接触网页的朋友来说，这两点也是容易忽视的，因为它们看起来没什么大影响，多几次请求，样式是否已经加载，都没那么容易把人逼疯，但是出于对用户体验的极致追求，我们还是希望文件请求次数尽量少，内容的显示有个优先顺序，文件加载有个先后顺序，这样，在实在难以缩减文件大小的时候，让用户先看到更重要的，正常展示的内容。

4、CSS和预处理器

前面我有文章详细的谈过CSS预处理器，我曾经对它也是排斥的，因为学习成本，因为觉得应用起来没有必要，可是一旦你决定去学习使用它，就会觉得不是那样，预处理器在向你介绍它自己的时候，就有特意强调过，它的语法是和CSS完全兼容的，也就是说，你在LESS或者SASS文件中，直接写CSS代码是没有问题的。除此之外，它能给我们提供很多便利，比如定义统一的变量;使用嵌套而不用一直重复着写一些选择器;可以提取公共的代码块然后很方便的复用等等。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。

< 上一篇：云计算技术应用的成本分析

下一篇：求职面试除了需要了解公司还需要了解哪些产品信息 >