一、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;
}