CSS 编码技巧
【1】尽量减少代码重复
line-height写倍数
font-size写百分比
当某些值相互依赖时,应该把它们的相互关系用代码表达出来。
比如line-height写倍数、font-size写百分比更利于维护。
font-size:20px;
height:20px;
line-heigth:20px;
换成
font-size: 150%;
height:20px;
line-heigth:1.5;
【2】代码易维护 vs.代码量少
比如:我们不需要左边框
border-width: 1px 1px 1px 0;
border-color: #fff;
border-style: solid;
但下次要把1px改为2px的话要改 3 次,可以直接优化成:
border-width: 1px;
border-left-width: 0;
border-color: #fff;
border-style: solid;
【3】currentColor
p{
color: red;
border: solid 1px currentColor;
// 或直接简化
border: solid 1px;
}
p 标签的边框会直接获取到 color 的颜色。
【4】合理使用简写
background: red;
background-color: red;
这 2 者的差距在后者如果在添加background-image之类的属性就会导致不一样的效果。
文档分析注释
目录注释
/**
* css/base.css--------------引入cssReset
* font-family-config.css----引入配置字体的css
* public.css----------------引入全局公用的css
*/
import './assets/css/base.css';
import './config/font-family-config.css';
import './assets/css/public.css';
复制代码
具体 CSS 文件的注释
/*-------*\
$主框架
\*-------*/
.page{}
/*-------*\
$标题菜单
\*-------*/
.title{}
/*------------*\
$滚动栏样式重置
\*------------*/
::-webkit-scrollbar{}
中间最后留 5 行以后,好在全览时看起来像个段落。
CSS 编写顺序
1.Reset;
2.DOM 元素,如 ul、li;
3.对象和抽象内容;
4.子元素
5.修补异常
CSS 命名
命名规范
下划线( __ )代表子元素; 连字符( - )代表不同状态;
.ul{}
.ul_li{}
.ul_li-display{}
BEM 命名法
块(Block)、元素(Element)、修饰符(Modifier) 例:class=“button button–state-danger”
优先级及优化
优先级
!important
内联
Id
Class
标签
越清楚优先级越高
优化
尽量不要使用!important,下次会使用更多的!important去覆盖它。
CSS 样式继承
文字相关:font-family、color、font-size、font-style等。
列表相关:list-style、list-style-type、list-style-position等。
表格相关:border-spacing。
比如border不能继承是因为不通用,有的得加上,有的加上得删掉。
更多开发中的小细节请点击。