Css 书写规范

专属标记

本框架叫做ax斧子框架，为了避免跟其他框架冲突，本框架核心文件的样式均以ax-开头。

命名规律

本框架css样式基本命名规则是：专属标记-属性-值，比如ax-color-primary表示主要颜色。

组合定义样式

本框架中有一类样式不建议单独定义，他们通常是组合使用，举例如下：

ax-icon 图标
ax-title 标题
ax-head 头部
ax-img 图像
ax-image 图像
ax-figure 图形（包括图片、图标、字体等）
ax-des 简介
ax-time 时间
ax-from 来源
ax-bone 骨架
ax-selected 被选中
ax-disabled 取消
ax-active 活动的
ax-operate 操作
ax-option 选项
ax-arrow 角标
ax-more 更多
ax-view 选项
ax-gallery 图集
ax-num 数字
ax-child 子元素
ax-adorn 装饰点缀
ax-bar 小块
ax-light 轻便简约
ax-dark 黑暗厚重
ax-white 深底白字
ax-black 白底黑字
ax-mask 背景遮罩
ax-focus 聚焦
ax-done 已做

使用方法如下：

                            <div class="ax-article-block">
                                <img src="" class="ax-img" />
                                <div class="ax-title">标题</div>
                                <div class="ax-des">简介</div>
                            </div>

                            <style>
                            .ax-article-block .ax-img{}
                            .ax-article-block .ax-title{}
                            .ax-article-block .ax-des{}
                            </style>

Hack兼容

本框架使用html5+css3编写，所以hack就不考虑ie8及以下浏览器，由于opera和safafi浏览器均使用webkit引擎，hack主要是针对chrome、firefox以及ie9/10/11/edge浏览器。

<style>
.ax-nav{/*默认样式，大部分浏览器支持*/}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.ax-nav{/*chrome的hack样式*/}
}
@-moz-document url-prefix() {
.ax-nav{/*firefox的hack样式*/}
}
@supports (not (-ms-accelerator:true)) {
.ax-nav{/*非ie的hack样式*/}
}
@media screen {
.ax-nav{/*ie9/10/11的hack样式*/}
}
@supports (-ms-accelerator:true) {
.ax-nav{/*edge的hack样式*/}
}
</style>

因为浏览器也在不断更新，为了兼容chrome、firefox和ie老版本的写法，可以如下顺序编写css。-ms-开头的样式仅ie系列支持，-moz-开头的样式仅firefox支持，-webkit-开头的样式仅chrome、opera和safari支持。

                        <style>
                        transform:rotate(180deg);
                        -ms-transform:rotate(180deg);
                        -moz-transform:rotate(180deg);
                        -webkit-transform:rotate(180deg);
                        </style>

不同级别的css是以高级别的为准，其中以直接在html标签中写入style为最高；同级别的css是以最后一个为准；有时候为了保持代码书写统一，需要打破先后顺序，可以使用!important来提高级别（最高）。以下例子，如果没有使用!important的话，他们是同级别的css，最终结果是green，但是使用!important之后打破了先后顺序，实际结果是red。

                        <style>
                        .ax-nav{color:red!important;}
                        .ax-nav{color:green;}
                        </style>

代码顺序

css属性较多，按什么顺序书写才够规律和美观？本框架书写css的顺序尊从“由小及大”的原则，即从一个字的字号颜色逐渐扩展到容器的边框属性，以下是书写顺序详细。

级别	类型	标签举例	常用属性
一级	单文字	span,i,a	color font-family font-size font-weight text-shadow
二级	文字块	div,ul,section,img	text-align width height line-height max-width max-height
三级	边框	div,ul	margin padding border border-radius box-shadow background-color background-position background-repeat box-sizing
四级	定位	div,ul	float postion left top z-index
五级	动画	div,ul,a	transform transition
六级	整体	div,ul,a	display overflow opacity