一、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等)
细节:
1.CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
2.去掉小数点前的“0”,如0.1rem .1rem
3.长名称或词组可以使用中横线来为选择器命名。
4.不建议使用“_”下划线来命名CSS选择器,为什么呢?
4.1输入的时候少按一个shift键;
4.2浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
4.3能良好区分JavaScript变量命名(JS变量命名是用“_”)
5.不要随意使用Id
二、OOcss规范
主要的两个设计原则:1、分离结构和外观 2、分离容器和内容
<div class="toggle simple">
<div class="toggle-control open">
<h1 class="toggle-title">title</h1>
</div>
<div class="toggle-details open">...</div>
</div>
三、SMAcss规范
模块化架构的可扩展css方法
<div class="toggle toggle-simple">
<div class="toggle-control is-active">
<h1 class="toggle-title">title</h1>
</div>
<div class="toggle-details is-active">...</div>
</div>
四、BEMcss规范
BEM(block Element Modifier)快元素修饰符
块名 所属组件的名称
元素 元素在块里面的名称
修饰符 任何与块或元素相关联的修饰符
<div class="toggle toggle--simple">
<div class="toggle_control toggle_control--active">
<h1 class="toggle_title">title</h1>
</div>
<div class="toggle_details toggle_details--active">...</div>
</div>
使用双横杆是为了避免块名被混淆为修饰符
五、常用命名单词
头: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
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
参考:网易规范:http://nec.netease.com/