css 屬性書寫順序推薦

elliott_hu 發布于2019-08-29 11:31 / 3454人閱讀

轉自自己的 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屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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