莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范
html属性顺序
classiddata-*,namesrc, for, type, hreftitle, altaria-*, role/a标签/
Example link
/input标签/
/img标签 img必须加上alt/
html
css命名
class命名规范:
class 名称中只能出现小写字符和破折号"-";
class 使用有意义的名称，使用有组织的或目的明确的名称;
class 名称应当尽可能短，并且意义明确，避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思;
BEM命名方法：
/* 块--代表更高级别的抽象或组件 */.block/* 元素--代表.block的后代 */.block_element/* 修饰符--代表.block的不同状态或不同版本 */.block--modifier/* 例如 */.media{}.media_img{}.media_img--rev{}.media_body{}Welcome to Foo CorpFoo Corp is the best, seriously!/.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;
}
css
less规范
/ 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;
}
}
less
less文件命规范
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
关键字：css, html, html5, markdown
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
