如何高效编写css代码

2020-04-12

一、分层组织css

一个项目可能有多个css文件，如何合理组织呢？

常用的一种组织CSS的方法：

base.css + common.css + page.css

base层：css reset功能+通用类

css reset就是对html标签的默认样式进行修改，

例如

1
2
3

html {color:#000;background:#fff;}
body {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}

common层：组件级别的CSS类，提高代码的重用性

我们将页面内的元素拆分成样式和功能相对独立的模块，将大量重复的模块视为一个组件。可以按功能划分为common_form.css，common_menu.css的多个文件。不同的网站有不同的common层，同一个网站只有一个common层。
page层：

页面级别CSS样式，也就是非高度重用的，建议网站内所有的page层统一放在一个page.css文件中，通过页面注释，分块书写，便于维护，如下所示：
1
2
3
4
5
6
7
/*首页*/
.test{}
.test1{}

/*登录页*/
.test2{}
.test3{}

二、 css命名

这里推荐一种在class前加入前缀的方式构建类似于命名空间的概念. 举个例子：

<div class="box">
    <div class="box-hd"></div>
    <div class="box-bd"></div>
    <div class="box-ft"></div>
</div>

1）多用组合，少用继承

也就是一个class里面尽量包含多个选择器而不是，建立多个子class选择器

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

2）css权重

CSS的选择符是有权重的：id选择器的权重是100、class选择器的权重是10、标签选择器的权重是1

当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个。（就近原则指的是定义样式的先后，不是挂class名的先后）

三、编写css的准备工作

当我们需要一些库文件，可以在BootCDN里面去下载或者引用一些库文件。

重置浏览器样式 ：根据项目选择的框架具体而定，一般框架里面都会重置一些浏览器的样式

全局设置一些样式：

指定一个带透明度的背景色rgba（0，0，0，.1) ，这样每个元素之间就会有颜色透明度的差异，可以清晰的看出自己的布局是否符合期望。在网页布局完成之后，要注释掉这条代码。

全局选择器使用box-sizing可以使width包含content、padding、border，布局会更加方便

 * {
/*background: rgba(0, 0, 0, .1);*/
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

可重用的代码

浮动以及去除浮动

.clearf::before,
.clear::after
{
content: "";
clearf: both;
display: block; ///这个还不能少
}

只需要给每个float的父元素添加一个clearf的类名

并列布局， div指定长宽+float 每个页面布局的div下面应该有一个container把内容包起来，对于指定padding和margin在container内指定，因为float为无缝连接，最好用padding

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10 {
position: relative;
min-height: 1px; //一个最小高度
float: left;
}

.col-1 {
width: 10%;
}

.col-2 {
width: 20%;
}

.col-3 {
width: 30%;
}

.col-4 {
width: 40%;
}

.col-5 {
width: 50%;
}

.col-6 {
width: 60%;
}

.col-7 {
width: 70%;
}

.col-8 {
width: 80%;
}

三、重置标签属性

某些元素自身带有一些属性，但是我们为了追求更加好看的样式，往往需要重置这些属性的样式

1 button和input标签

//消除button的默认样式
padding: 0;
border: 1px solid transparent;  //自定义边框
outline: none;    //消除默认点击蓝色边框效果

input标签

 //消除input标签
input {  
    background:none; 
    outline:none;  //蓝色外框
    border:0px;
    padding:0//原padding：1px 0;text-align：start；
 }
 input:focus { outline: none; }

2 消除内联元素(a img span )之间的空隙

在标签之间不添加任何的换行和空格
给父元素的字体大小设置为0px;然后再单独给子元素设置字体大小。

3 防止拖拽文本域

实际开发中，我们文本域右下角是不可以拖拽的。

通过resize属性来实现

1	textarea ｛resize ：none｝

四、异常问题总结

1 去除内联元素（button input）等元素之间的间距

如图

input是内联块状元素(inline-block);内联元素是当做字体来处理的，字体之间是有间隔的，所以内联元素之间也是有间隔的。

父元素font-size为0，重新设置字体大小
去除html代码之间的空格换行
浮动元素包裹性

2 解决图片底部默认空白缝隙问题

图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。主要解决方法有两种:

1.给图片添加vertical-align:middle| top| bottom等。 (提倡使用的)

2.把图片转换为块级元素display: block;

3 溢出的文字省略号显示

单行文本溢出显示省略号

/*1.先强制一行内显示文本*/
white-space: nowrap;(默认normal自动换行)

/*2.超出的部分隐藏*/
overf1ow: hidden;

/*3.文字用省略号替代超出的部分*/

text-overf1ow: ellipsis;

多行文本溢出星示省略号

多行文本溢出示省略号,有较大兼容性何題,适合于webkit浏览器或移动端(移幼端大部分是webkit内核)

overflow: hidden ;

text overflow: ellipsis;

/*弾性伸縮盒子模型示*/

display:-webkit-box;

/*限制在一个块元索示的文本的行数*/

-webkit-1ine-clanp: 2;

/*没置或柆索仲縮盒対象的子元素的排列方式*/

-webkit-box-orient: vertical;