css 书写顺序

定位属性：

text

position display float left top right bottom overflow clear z-index

自身属性：

text

width height padding border margin background

文字样式：

text

font-family font-size font-style font-weight font-varient color

文本属性：

text

text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

css3 中新增属性：

text

content box-shadow border-radius transform

class 类名的顺序：

自定义的 class 类名(遵循 BEM 命名法)
css 插件提供的类名按照以上的 css 属性对应的顺序

例如：自定义类名结合 UnoCss

html


<div
	class="demo-container absolute flex justify-center items-center left-10px top-12px overflow-hidden wh-full p-10px border-1 px border-[#f00] m-24px bg-[#fff]text-32px text-[# 0f0]"></div>
<style>
	.demo-container {
		box-shadow: 2px 0 8px 0 rgb(29, 35, 41, 0.05);
	}
</style>

关于样式命名规范

合理的样式命名规范对项目开发有很大的帮助，主要体现在以下方面：（1）避免因样式名重复导致的污染。

（2）从命名上可直观区分“组件样式”、“页面样式”（用于给在此页面的组件样式做定制调整）、“全局样式”。

（3）快速定位模块，便于查找问题。

G-xx：表示全局样式，用来定义公用样式。 P-xx: 表示页面样式，用来设置页面的背景色、尺寸、定制化调整在此页面的组件样式。 M-xx: 表示组件样式，专注组件本身样式。

Contributors

作者:Long Mo

字数统计:360 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo

css 书写顺序 ​

class 类名的顺序： ​

关于样式命名规范 ​

Contributors ​

css 书写顺序

class 类名的顺序：

关于样式命名规范

Contributors