<html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> head> .... html>
<link rel="stylesheet" href="core.css">
<style>
@import url("more.css");
style>
<link rel="stylesheet" href="code-guide.css"> <style> /* ... */ style> <script src="code-guide.js">script>
eg:
为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。
为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要换行。CSS、JS注释亦然。 <span class="avatar"> <img src="..."> span> <img class="avatar" src="...">
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1option> select>
[强制]使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
[建议] 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
eg:
/* good */ #error, .danger-message { font-color: #c00; } #username input {} .comment .avatar {} /* bad */ dialog#error, p.danger-message { font-color: #c00; } .page .header .login #username input {} .comment div * {}
/* Bad CSS */ main>nav { padding: 10px; } .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } .selector, .selector-secondary, .selector[type=text] {padding:15px;margin:0px 0px 15px;} /* Good CSS */ main > nav { padding: 10px; } .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }
eg: /* S 注释内容 */
为书写规范,最好每一个需要注释都需要开头和结尾,减少后续麻烦和错误。不要翻行。CSS、JS注释亦然。
/* E 注释内容 */
在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... } //不要超过3个
.tweet .avatar { ... }
* Positioning
* Box model
* Typographic
* Visual
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。 eg:
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */ display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
注意兼容性写法(纯属个人习惯)
每个范围可由首字母开头为排序:
eg:盒子模型中的第2条中,可由background,border,color等首字母为先排序; 但有些例外,如position肯定排先,后定义left等方向位属性
ps:需要用到媒体查询,将媒体查询放在尽可能相关规则的附近
eg:
.declaration-order {
display: block;
float: right;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
color: #333;
font: normal 13px "Helvetica Neue", sans-serif;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 0 auto;
padding: 10px 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
opacity: 1;
transtion: all .5s ease 0s;
animation: name initial 2s;
}
@keyframes name{
0%{}
100{}
///
from{}
to{}
}
@media screen and (min-width) and (max-width){
and左右之间要留空格
}
当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。
在 Textmate 中,使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。
Prefixed properties */ lector { webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15);
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// With nesting
.table > thead > tr {
> th { … }
> td { … }
}
了解更多请点击,本文更多参照此文章
头:header
内容:content/container
尾: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
1)页面结构
容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center
(2)导航
导航:nav 主导航:mainnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary
(3)功能
标志: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
主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
项目命名 全部采用小写方式,以下划线分隔 例:my_project_name 目录命名
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts, styles, images, data_models JS文件命名
参照项目命名规则。
例:account_model.js CSS, SCSS文件命名
参照项目命名规则。
例:retina_sprites.scss HTML文件命名
参照项目命名规则。
例:error_report.html
已抢186635个
抢已抢67304个
抢已抢353054个
抢已抢667277个
抢已抢122447个
抢已抢23806个
抢