zoukankan      html  css  js  c++  java
  • css写法优化

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

      首先分析需求,根据需要分出头部、导航、侧边栏、banner区,主要内容区,底部等。由于需要东西的复用度很高,不好归于任何一个固定模块,比如分页,弹窗等,他们需要单独分出一段专属的css和js,即组件化。有了清晰的结构后,便于维护。然后在细化,发现一些复用度高的小的部分,比如边框,背景,图标,字体,边距,布局方式等。这些用的次数很多,造成代码冗余和维护困难。因此需要对这部分进行统一维护修改。同时,代码的排序也很重要,便于维护和继承或者层叠覆盖。除了这些意外,通过注释在代码段前面添加目录或者名称也有利于维护。

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

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

    2.避免使用元素选择器。原因a.同一个元素可能使用很多次,在浏览器遍历的时候会遍历所有该元素,这是没必要的。b.需求和代码结构是随时可能发生变化,有可能会复用到其他页面,或者在该页面增加内容,因此使用元素选择器定死某个东西,不利于后期修改。

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

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

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

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

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

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

  • 相关阅读:
    POJ 1401 Factorial
    POJ 2407 Relatives(欧拉函数)
    POJ 1730 Perfect Pth Powers(唯一分解定理)
    POJ 2262 Goldbach's Conjecture(Eratosthenes筛法)
    POJ 2551 Ones
    POJ 1163 The Triangle
    POJ 3356 AGTC
    POJ 2192 Zipper
    POJ 1080 Human Gene Functions
    POJ 1159 Palindrome(最长公共子序列)
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/5983937.html
Copyright © 2011-2022 走看看