css规范

一、CSS书写顺序

• 1.位置属性(position, top, right,z-index, display, float等)
• 2.大小(width, height, padding,margin)
• 3.文字系列(font, line-height,letter-spacing, color- text-align等)
• 4.背景(background, border等)
• 5.其他(animation, transition等)

二、CSS书写规范

1.使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

2.去掉小数点前的“0”

font-size:.8em

3.简写命名

4.16进制颜色代码缩写

color:#eba

三、常用的CSS命名规则

类别	命名	类别	命名
头	header	内容	content
尾	footer	导航	nav
侧栏	sidebar	栏目	column
页面外围	wrapper	左	left
右	right	中	center
登录条	loginbar	标志	logo
广告	banner	页面主体	main
热点	hot	新闻	news
下载	download	子导航	subnav
菜单	menu	子菜单	submenu
搜索	search	友情链接	friendlink
页脚	footer	版权	copyright
滚动	scroll	内容	content
标签	tags	文章列表	list
提示信息	msg	小技巧	tips
栏目标题	title	加入	joinus
指南	guide	服务	service
注册	regsiter	状态	status
投票	vote	合作伙伴	partner

ID的命名-页面结构

类别	命名	类别	命名
容器	container	页面头部	header
内容	content/container	页面主体	main
页面底部	footer	导航	nav
侧栏	sidebar	栏目	column
页面外围控制整体布局宽度	wrapper	左	left
右	right	中	center

ID的命名-导航

类别	命名	类别	命名
导航	nav	主导航	mainnav
子导航	subnav	顶导航	topnav
边导航	sidebar	左导航	leftsidebar
右导航	rightsidebar	菜单	menu
子菜单	submenu	标题	title
摘要	summary

 ID的命名-功能

类别	命名	类别	命名
标志	logo	广告	banner
登陆	login	登录条	loginbar
注册	register	搜索	search
功能区	shop	标题	title
加入	joinus	状态	status
按钮	btn	滚动	scroll
标签页	tab	文章列表	list
提示信息	msg	当前	current
小技巧	tips	图标	icon
注释	note	指南	guild
服务	service	热点	hot
新闻	news	下载	download
投票	vote	合作伙伴	partner
友情链接	link	版权	copyright

CSS样式表文件命名 

类别	文件	类别	文件
主要	master.css	模块	module.css
基本共用	base.css	布局	layout.css
主题	themes.css	专栏	columns.css
文字	font.css	表单	forms.css
补丁	mend.css	打印	print.css

四、命名空间规范

• 布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
• 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
• 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
• 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
• 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

公共：

/* Reset styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* Heading styles */
h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

/* Paragraph styles */
p {
    margin-bottom: 1em;
}

/* Link styles */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Button styles */
.button {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

网站相关：

/* Navigation styles */
.navbar {
    background-color: #333;
    padding: 1em;
}

.navbar ul {
    list-style-type: none;
}

.navbar li {
    display: inline-block;
    margin-right: 1em;
}

.navbar li:last-child {
    margin-right: 0;
}

.navbar a {
    color: #fff;
    text-decoration: none;
}

.navbar a:hover {
    text-decoration: underline;
}

/* Footer styles */
.footer {
    background-color: #f4f4f4;
    padding: 2em 0;
    text-align: center;
    font-size: 0.9em;
    color: #777;
}

/* Form styles */
.form-group {
    margin-bottom: 1.5em;
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.5em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Card styles */
.card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 1em;
    margin-bottom: 1.5em;
}

.card h3 {
    margin-bottom: 0.5em;
}

.card p {
    margin-bottom: 1em;
}

.card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}