项目规范之CSS篇

css之模块化

像这种状态的class，不要单独使用、直接在里面编写样式！！ /* 可以嵌套用 */ .am-menu .active {...}



/* 可以堆叠用 */ .am-btn.active {...}


/* 绝不要单独用！！！ */ .active {color: red; }



返回
css之书写顺序

举个栗子： .bor1 {


border-radius: 30px 10px;
-webkit-border-radius: 30px 10px; } .bor2 { -webkit-border-radius: 30px 10px;





border-radius: 30px 10px;



background-color: #CCC;
} .am-box .am-box-bd {margin: 10px;}



但是，这种写法是不推荐的！！！
css之模块化

3.避免不必要的 CSS 选择符嵌套 Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也 不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染 效率。特殊情况可以嵌套（如提高权重、主题之间代码隔离），但应避免过多层级 /* 推荐写法 */ .am-box {border: 1px solid #333;} .am-box-hd { margin: 0; padding: 5px 10px;

css之模块化

<div class="am-box"> <h3 class="am-box-title"></h3> <p class="am-box-content"></p>



</div>

如果我们想写两种样式，通过按钮点击进行改变，让标题和内容的颜色改变，应该 怎么做？例子四：

html可以这样写： <div class="am-box am-box-active">


返回
css之设计模式

如图，我们想要做一个按钮，例子五

html如下： <button class="am-btn-simple">按钮</button> css代码： .am-btn-simple { margin:0 5px; padding:4px;






border: none;border-radius: 4px;








例如：am-box，am-tab，am-nav
css之命名规则

举例： 页面布局：wrapper 头部：header 正文：content 尾部：footer

பைடு நூலகம்



查看其他详细命名
css之命名规则


文件命名
主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css







border-bottom: 1px solid #333;
background-color: #CCC; }



.am-box-bd {margin: 10px;}
css之模块化

那什么情况下会用到嵌套呢？例子三 html代码： <ul class="am-menu"> <li class="active">菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul>







css代码：
.am-menu{} .am-menu li{float:left; margin:5px; padding:5px; border:1px solid #eee;border-radius:4px;} .am-menu li:hover{background-color:#66D9FF;} .am-menu .active{background-color:#66D9FF;}



<p class="am-box-content am-box-content-active"></p>
</div>


4.与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元 素单独添加元素。 给最外层添加状态类以后，整个模块的样式都能控制，减少操作，提高性能。 这样我们在写js时会简洁很多 $("#box").attr("class","am-box am-box-active"); $("#box").attr("class","am-box am-box-success");


子模块： {命名空间}-{模块名}-{子模块名}
常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)， title，item，cell 等， 词义表达组件要实现的功能。


统一命名风格
（使用相同名词命名不同组件的子元素）：如 am-tab-hd, am-modal-hd，便于理解




css之书写规范


不要滥用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id 的优先级优先于class，所以id应该按需使用，而不能滥用。
css之书写规范


为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了 “.is-”前缀。


5.其他
animation,transition等
css之书写顺序

书写顺序例子：

查看详细
返回

css之书写规范


使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又 能提高用户的阅读体验。
css之书写规范

去掉小数点前的“0”




css之模块化

命名注意事项
语义化，望文见义
如 am-tab、am-nav，不要使用 red、left 等表象的词命名。



模块状态： {命名空间}-{模块名}-{状态描述}
常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等


2.模块内部的类名继承自父级 例子二：
<div class="am-box"> <h2 class="am-box-hd">标题</h2> <p class="am-box-bd">正文</p> </div> 上面的代码中，模块的名为 box，模块最外层使用 {命名空间}-{模块名} 的方式 命名 Class。模块子元素以在此基础上进行命名。如果不继承父级的类名，很容易 造成命名冲突
前端开发之
《CSS篇》
CSS规范

1.css之reset 2.css之书写顺序


3.css之书写规范
4.css之命名规则 4.css之模块化 5.css之设计模式



css之reset


打造适合自己的reset
不要去网上拷贝别人，直接拿个现成的reset.css过来将导致后期各种离奇bug的发 生。 注意：永远不要使用 * { margin: 0; padding: 0; },这样会清除所有元素的 margin和padding，问题很多！ 书写合适的reset，如下结构：


<h3 class="am-box-title"></h3>
<p class="am-box-content"></p> </div>


css之模块化

但不要这样写（效率低）： <div class="am-box"> <h3 class="am-box-title am-box-title-active"></h3>
css之书写规范


简写命名
很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
css之书写规范


16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。