css 属性书写顺序推荐

elliott_hu 发布于2019-08-29 11:31 / 3440人阅读

转自自己的 Github/Wizard67

根据 MDN 中 CSS参考归纳整理。

summary

    ┌── 布局定位
    |   ├── 元素定位
    |   |   └── position...
    |   └── 元素浮动
    |       └── float...
    |—— 盒子模型
    |   ├── 盒子类型
    |   |   ├── display
    |   |   ├── 弹性盒子
    |   |   |   └── flex...
    |   |   ├── 网格系统
    |   |   |   └── grid...
    |   |   ├── 表格模型
    |   |   |   └── table-layout...
    |   |   ├── 列表盒子
    |   |   |   └── list-style...
    |   |   └── 标注模型
    |   |       └── ruby-align...
    |   ├── 盒子属性
    |   |   ├── box-sizing
    |   |   ├── 盒子尺寸
    |   |   |   ├── width...
    |   |   |   ├── height...
    |   |   |   ├── padding...
    |   |   |   ├── border...
    |   |   |   ├── outline...
    |   |   |   └── margin...
    |   |   └── 盒子样式
    |   |       ├── color
    |   |       ├── background...
    |   |       ├── background-blend-mode...
    |   |       ├── clip-path
    |   |       ├── mask...
    |   |       ├── filter
    |   |       ├── box-shadow
    |   |       ├── opacity
    |   |       └── visibility
    |   └── 盒子内容
    |       ├── 溢出处理
    |       |   └── overflow...
    |       ├── 垂直对齐
    |       |   └── vertical-align
    |       ├── 内容分列
    |       |   └── columns...
    |       ├── 文本渲染
    |       |   ├── 排版模式
    |       |   |   └── writing-mode...
    |       |   ├── 文本样式
    |       |   |   ├── text-rendering
    |       |   |   ├── font-feature-settings...
    |       |   |   └── font...
    |       |   ├── 文本控制
    |       |   |   ├── text-overflow
    |       |   |   ├── white-space
    |       |   |   ├── overflow-wrap...
    |       |   |   ├── word-break...
    |       |   |   ├── text-align...
    |       |   |   ├── font-synthesis
    |       |   |   ├── font-size-adjust
    |       |   |   ├── letter-spacing...
    |       |   |   └── text-transform...
    |       |   └── 文本装饰
    |       |       ├── quotes
    |       |       ├── tab-size
    |       |       ├── text-indent
    |       |       ├── text-emphasis...
    |       |       ├── text-decoration...
    |       |       └── text-shadow
    |       └── 图片元素
    |           ├── image-rendering...
    |           └── shape-image-threshold...
    |—— 盒子变形
    |   ├── transform-style...
    |   ├── perspective...
    |   └── backface-visibility
    |—— 动态效果
    |   ├── 过渡动画
    |   |   ├── transition...
    |   |   └── animation...
    |   └── 滚动效果
    |       └── scroll-behavior...
    └── 其他属性
        ├── 用户行为
        |   ├── resize
        |   ├── cursorresize...
        |   ├── touch-action
        |   ├── caret-color
        |   └── ime-mode
        ├── 元素属性
        |   └── object-fit
        |   ├── object-position
        |   ├── content
        |   ├── counter-reset...
        |   ├── will-change
        |   ├── pointer-events
        |   ├── z-index
        |   └── all
        ├── 定义变量
        |   └── --*
        └── 页面打印
            ├── page-break-before...
            └── widows

详细的属性和参数请见 note-css-order

GPU云服务器云服务器书写顺序设置属性顺序 css属性访问CSS属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111701.html

推荐大家使用的CSS书写规范、顺序

摘要：书写顺序位置属性等大小文字系列等背景等其他等书写规范使用缩写属性有些属性是可以缩写的，比如等等，这样精简代码同时又能提高用户的阅读体验。CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, le...

王军 2019-04-23 13:39 评论0 收藏0
【整理】18种推荐的CSS命名和书写规范

摘要：翻译自选择器的命名规范模块化命名例如与布局相关的样式以为开头。推荐的写法不推荐的写法规范注释在单列注释中，星号与内容之间留一个半角空格。翻译自《CSS Naming and Writing Specification》选择器的命名规范1.模块化命名例如：与布局相关的样式以g为开头。如g-content和g-header；与挂钩相关的样式以j为开头。如j-open和j-request；与元件相...

kgbook 2019-05-23 16:24 评论0 收藏0
【整理】18种推荐的CSS命名和书写规范

摘要：推荐的写法不推荐的写法注意标点符号每个属性独占一列。推荐的写法不推荐的写法将过长的内容折为若干列同一属性的值不止一个或值过长时，以逗号分割这些值，每个逗号后添加一个空格，过长的值可以另起一列。选择器的命名规范 1.模块化命名例如：与布局相关的样式以g为开头。如g-content和g-header；与挂钩相关的样式以j为开头。如j-open和j-request；与元件相关的样...

MonoLog 2019-08-26 13:53 评论0 收藏0
【整理】18种推荐的CSS命名和书写规范

摘要：推荐的写法不推荐的写法注意标点符号每个属性独占一列。推荐的写法不推荐的写法将过长的内容折为若干列同一属性的值不止一个或值过长时，以逗号分割这些值，每个逗号后添加一个空格，过长的值可以另起一列。选择器的命名规范 1.模块化命名例如：与布局相关的样式以g为开头。如g-content和g-header；与挂钩相关的样式以j为开头。如j-open和j-request；与元件相关的样...

TwIStOy 2019-08-30 10:58 评论0 收藏0
【整理】18种推荐的CSS命名和书写规范

摘要：推荐的写法不推荐的写法注意标点符号每个属性独占一列。推荐的写法不推荐的写法将过长的内容折为若干列同一属性的值不止一个或值过长时，以逗号分割这些值，每个逗号后添加一个空格，过长的值可以另起一列。选择器的命名规范 1.模块化命名例如：与布局相关的样式以g为开头。如g-content和g-header；与挂钩相关的样式以j为开头。如j-open和j-request；与元件相关的样...

lily_wang 2019-08-02 15:07 评论0 收藏0