CSS编码规范之属性顺序

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS编码规范之属性顺序

        写css代码的时候有一个好的书写顺序能够帮你节省很多时间,本文整理了被广大前端er接受的CSS书写顺序,如果你有更好的意见,不妨留言告知我们。

CSS书写顺序

CSS书写顺序一般遵从以下规则:


 1. Display & Flow(显示与流)
 2. Positioning(位置)
 3. Dimensions(尺寸)
 4. Padding, Borders,Margins,Outline(填充、边界、边缘、轮廓)
 5. Typographic Styles (排版样式)
 6. Backgrounds (背景)
 7. Opacity, Cursors, Generated Content(不透明度、光标、生成内容)

更具体的代码请参考:


el {
     /* 显示与流 */
    display: ;
    visibility: ;
    float: ;
    clear: ;
     /* 位置 */
    position: ;
    top: ;
    right: ;
    bottom: ;
    left: ;
    z-index: ;
     /*  尺寸 */
    width: ;
    min-width: ;
    max-width: ;
    height: ;
    min-height: ;
    max-height: ;
    overflow: ;
     /* 填充 */
    padding: ;
    padding-top: ;
    padding-right: ;
    padding-bottom: ;
    padding-left: ;
     /* 边界 */
    border: ;
    border-top: ;
    border-right: ;
    border-bottom: ;
    border-left: ;
    border-width: ;
    border-top-width: ;
    border-right-width: ;
    border-bottom-width: ;
    border-left-width: ;
    border-style: ;
    border-top-style: ;
    border-right-style: ;
    border-bottom-style: ;
    border-left-style: ;
    border-color: ;
    border-top-color: ;
    border-right-color: ;
    border-bottom-color: ;
    border-left-color: ;
    /* 边缘 */
    margin: ;
    margin-top: ;
    margin-right: ;
    margin-bottom: ;
    margin-left: ;
    /* 轮廓 */
    outline: ;
    list-style: ;
    table-layout: ;
    caption-side: ;
    border-collapse: ;
    border-spacing: ;
    empty-cells: ;
    /* 排版样式 */
    font: ;
    font-family: ;
    font-size: ;
    line-height: ;
    font-weight: ;
    text-align: ;
    text-indent: ;
    text-transform: ;
    text-decoration: ;
    letter-spacing: ;
    word-spacing: ;
    white-space: ;
    vertical-align: ;
    color: ;
    /* 背景 */
    background: ;
    background-color: ;
    background-image: ;
    background-repeat: ;
    background-position: ;
    /* 不透明度、光标、生成内容 */
    opacity: ;
    cursor: ;
    content: ;
    quotes: ;
}

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS编码规范之属性顺序


 上一篇
10个Chrome基础使用技巧 10个Chrome基础使用技巧
Chrome是前端开发中最常用到的一个浏览器,本文整理了Chrome的10个基础使用技巧(Chrome中有很多和Sublime Text2类似的快捷键)。如果有其它本文未提及的实用的小技巧,也可以留言告诉我们。 当项目中文件很多时,可以在控
2021-04-05
下一篇 
CSS基础-footer元素始终粘在浏览器底部的四种方法 CSS基础-footer元素始终粘在浏览器底部的四种方法
本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候,底部footer紧跟在内容container后边;而内容container不够多、不足以撑开一屏到达浏览器底部时,底部footer仍然在
2021-04-05