• 技术文章 >web前端 >css教程

    css写法怎么优化

    青灯夜游青灯夜游2021-07-22 11:40:26原创94

    css写法优化:1、层级嵌套不能太深,一般不超过4层;2、避免使用元素选择器,不利于后期修改;3、避免使用群组选择器,可以提取一个公用类,定义同一样式,更加方便;4、减少文件引入的数量,内容显示要有优先顺序。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    写css关于id,class等的命名,文件的结构,共同模块的提取,代码的复用性,可读性,扩展性,维护性都要考虑,不然后期可以会需要花大力气去进行维护修改。考虑写出足够科学的css,需要考虑下面几个方面。

    首先分析需求,根据需要分出头部、导航、侧边栏、banner区,主要内容区,底部等。由于需要东西的复用度很高,不好归于任何一个固定模块,比如分页,弹窗等,他们需要单独分出一段专属的css和js,即组件化。有了清晰的结构后,便于维护。

    然后在细化,发现一些复用度高的小的部分,比如边框,背景,图标,字体,边距,布局方式等。这些用的次数很多,造成代码冗余和维护困难。因此需要对这部分进行统一维护修改。

    同时,代码的排序也很重要,便于维护和继承或者层叠覆盖。除了这些意外,通过注释在代码段前面添加目录或者名称也有利于维护。

    然后从结论来看,应该注意:

    1、层级嵌套不能太深,这样会增加渲染时间。一般不超过4层最好。

    2、避免使用元素选择器。

    原因:

    3、避免使用群组选择器。

    如:

    .header ul li,.content ul li,.footer ul li{border-left:1px solid red};

    这种情况应该提取一个公用类,然后定义同一样式,更加方便。

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

    文件请求的次数应该尽量少,内容显示有优先顺序,文件加载有先后顺序,让用户先看到更重要的。

    从矛盾上考虑,对一个样式进行命名,在设计稿上样式相似的两个不同功能的模块,我们在命名的时候就不能考虑通过内容来命名,比如“news”“about”等,而是从所属类别,功能,页面上来考虑。让人比较容易的在名称和结构间建立联系。在能把css写的比较熟练后,可以使用css预处理器来提高效率。

    (学习视频分享:css视频教程

    以上就是css写法怎么优化的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:深入了解CSS中的选择器 下一篇:css怎么实现不透明度渐变
    VIP会员

    相关文章推荐

    • css怎么设置文本左对齐• 8个值得了解的纯CSS布局排版技巧• 深入了解CSS中的选择器• css怎么实现多边形• css怎么设置标签属性• js怎么替换css样式

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网