zoukankan      html  css  js  c++  java
  • 122.CSS书写顺序及其好处

    CSS的顺序有多种排列组合;一堆零散的无序的东西,往往是不好记忆的。有序的东西方便记忆、检查。

    今天来讲讲css顺序。它重要吗?
    对于提升多人协作的效率,是重要的。
    哪怕对于个人来说,有一个合理的顺序,是方便记忆、检查纠错的。

    很多人一起工作,总要遵守某些规则。

    军队、公司,纪律是第一的;对于代码上来说,大家代码看起来都尽可能像是自己写的,看起来亲切。

    对于自己来说,其实也是一种效率上的提高。

    软件开发并不只有开发的过程,很多时候,是在维护;自己都看不懂自己以前写的是什么的大有人在。

    那么,这个世界上有那么多元的顺序,我们怎么去排序就是下一个问题了。

    css的元素太多了,直接排序,对于普通人类的大脑来说也是不好记忆的。

    排序之前,我们先分个类。

    如何分类?

    下面两者有时候是矛盾的,正确的选择,需要权衡利弊:

    • 它要是方便记忆的,它们的分类便于区分
    • 它要是还能提升运行的效率,那就更好不过了

    浏览器的加载顺序(仅写出和css相关的)

    • 1、解析html -> 生成dom树
    • 2、针对每个dom节点,样式计算:将dom和其对应的css样式的 配置项绑定起来
    • 3、针对整个页面,布局(施工了):从上到下、从左到右,开始铺设每个dom节点。

    根据上述的渲染原理,我们可以思考来如何优化我们的顺序。

    网上给出了解答:

    • 1、位置相关:z-index/position/top/left/bottom/right
    • 2、大小:width/height/padding/margin
    • 3、文字:font-size/font-family/letter-spacing/white-space
    • 4、背景:background/border
    • 5、其他(特效、透明度):transition、opacity

    以下是我个人的一些思考

    对于大小部分,我们还可以继续细化。

    对外的,先写;对内的,后写。
    示例代码:

    .test {
      margin-top: 10px;
       100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    

    参考文档:


    complete.

  • 相关阅读:
    [Z]芯片设计经验
    ADF4350初始化程序(verilog)
    基于Altera FPGA的LVDS配置应用一例
    M4K使用率
    榨干FPGA片上存储资源
    ios通讯录复制出来的电话号码两端有隐藏字符串
    PHP做APP接口时,如何保证接口的安全性
    【PHP】微信开放平台---消息加解密-php7.1 使用openssl代替Mcrypt
    Gram矩阵(pytorch)
    数据库范式
  • 原文地址:https://www.cnblogs.com/can-i-do/p/13172475.html
Copyright © 2011-2022 走看看