html属性顺序
class
id
data-*,name
src, for, type, href
title, alt
aria-*, role
/*a标签*/
<a class="..." id="..." data-modal="toggle" href="#" title='...' style="...">
Example link
</a>
/*input标签*/
<input class="..." id="..." data-modal="toggle" type="text" name="..." value="..." />
/*img标签 img必须加上alt*/
<img class="..." id="..." src="..." title="..." alt="...' />
htmlcss命名
class命名规范:
class 名称中只能出现小写字符和破折号"-";
class 使用有意义的名称，使用有组织的或目的明确的名称;
class 名称应当尽可能短，并且意义明确，避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思;
BEM命名方法：
/* 块--代表更高级别的抽象或组件 */
.block
/* 元素--代表.block的后代 */
.block_element
/* 修饰符--代表.block的不同状态或不同版本 */
.block--modifier
/* 例如 */
.media{}
.media_img{}
.media_img--rev{}
.media_body{}
<div class="media">
<img src="logo.png" alt="Foo Corp logo" class="media_img--rev">
<div class="media_body">
<h3 class="alpha">Welcome to Foo Corp</h3>
<p class="lede">Foo Corp is the best, seriously!</p>
</div>
</div>
/*.media是一个块，.media_img--rev是一个加了修饰符的.media_img的变体，它是属于.media的元素。而.media_body是一个尚未被改变过的也是属于.media的元素。*/
html常用命名：
/* --base 基本-- */
.header /* --头部-- */
.logo /* --logo-- */
.footer /* --底部-- */
.nav /* --导航-- */
.top-nav /* --顶部导航链接-- */
.main /* --主体内容-- */
.container /* --内容居中-- */
--current /* --默认状态-- */
-title /* --标题-- */
-item /* --列表-- */
-con /* --内容-- */
icon- /* --图标- */
/* --侧边栏-- */
.aside
.aside-nav /* --侧边栏导航-- */
.aside-nav_item /* --侧边栏分类-- */
.aside-nav--current /* --侧边栏当前状态-- */
/* --盒子-- */
.box
.box-title /* --盒子标题-- */
.box-title_txt /* --盒子标题文字-- */
.box-con /* --盒子内容-- */
css编码规范
.selector{
/*显示相关*/
display
float
clear
cursor
content
/*定位等*/
position
top
left
z-index
/*盒模型*/
margin
padding
width
height
border
border-radius
/*排版文字等*/
color
font
vertical-align
line-height
white-space
text-decoration
text-align
/*背景*/
background
opacity
}
如：
.selector {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 100px;
height: 100px;
border: 1px solid #e5e5e5;
border-radius: 3px;
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
background-color: #f5f5f5;
}
cssless规范
/* less嵌套不超过三层 */
.aside-nav{
margin-bottom: 10px;
margin-top: 0;
dt {
cursor: pointer;
background: #fff;
a {
text-decoration: none;
color: @cDark;
}
}
dd {
display: none;
height: 30px;
padding-left: 20px;
line-height: 30px;
}
}
lessless文件命规范
index.less /* --首页样式-- */
header.less /* --头部样式-- */
footer.less /* --底部样式-- */
bass.less /* --基本样式-- */
box.less /* --盒子样式-- */
table.less /* --表格样式-- */
buttom.less /* --按钮样式-- */
icon.less /* --图标样式-- */
iconfont.less /* --图标字体样式-- */
variable.less /* --less变量样式-- */
forms.less /* --表单样式-- */
aside.less /* --侧边样式-- */
normalize.less /* --重置样式-- */
paginator.less /* --分页样式-- */
login.less /* --登录样式-- */
reg.less /* --注册样式-- */
ul***.less /* --以ui开头是插件样式-- */
特别注意
html和css/less都用两个空格代替制表符（tab）进行缩进
以组件为单位组织代码段
制定一致的注释规范
使用一致的空白符将代码分隔成块
为选择器分组时，将单独的选择器单独放在一行
声明块的右花括号应当单独成行
每条声明都应该独占一行，所有声明语句都应当以分号结尾
尽量使用简写形式的十六进制，十六进制值应该全部小写，例如，#fff
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
/* selector */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
box-shadow: 0px 1px 2px #ccc;
background-color: rgba(0,0,0,.5);
}
/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background-image: url(../img/sprite.png);
}
css本文转载于:猿2048⇨https://www.mk2048.com/blog/blog.php?id=hiajab0ibaa