css代码书写规范和css代码优化建议20条

最新推荐文章于 2024-08-25 17:53:43 发布

清风明月的博客

最新推荐文章于 2024-08-25 17:53:43 发布

阅读量1.5k

点赞数

分类专栏： CSS/CSS3 文章标签： css规范 css优化 css代码规范 css代码优化

本文链接：https://blog.csdn.net/xiaoxia188/article/details/80623411

版权

CSS/CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、谨慎使用外边距属性
当一个元素的下边距和一个元素的上边距相遇，两者中大的会被留下

2、利用盒子模型布局
Flexbox更容易精确创建我们想要的布局设计，浏览器对Flexbox的支持已经接近完美。

.container{
    display:flex;
    display:-webkit-flex;
}

3、执行CSS重置
方法：一个css重置文件为所有的元素设置默认样式，在所以浏览器产生的效果相同。
很多库：normalize.css, minireset,ress, 不行使用库可以使用下面简单的css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

4、为所有的元素使用border-box
使用了border-box，border和padding将会被包含在宽度的尺寸当中

5、图片作为背景
利用一个div标签并设置background属性，而不是用img
更有利于设置图片样式，保持原来的尺寸或者根据比例变化，需要借助background-size，background-position

<div></div>
.div{
    width:200px;
    height:200px;
    background:url('');
    background-position:center center;
    background-size:cover;
}

缺点是页面可访问性略有打击，因为图片不会被屏幕阅读器和引擎抓取，这个问题可以被object-fit解决，但不是所有浏览器支持。

6、更好的table边框
在HTML中table加边框会有重复双边框，在table上加border-collapse：collapse

7、更好的注释方法
单行注释 /* */
多行注释 /*———
——–*/

8、 css命名连接
css对大小写不敏感，所以骆驼命名法不适合，很久以前下划线不被支持，所以破折号是默认约定

 .header-top-content{} //推荐使用

9、不要重复设置css样式
css中的许多属性都是从DOM树上一层中继承下来的，层叠样式表，不需要每级都写

10、css动画与变换
不要通过改变元素的宽度和高度，或者元素的top/bottom/left/right来实现动画，
最好用transform()，他提供了更加圆滑的多读效果，transform以及它的所有方法（translate，rotate，scale等）几乎拥有一致的浏览器兼容性，可以自由使用

11、不要DIY，使用库
css社区非常庞大，不断出现新的库，大部分是开源的

12、保持选择器的特指读低
使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器，这将最终导致 !important 效果。

13、不要使用 !important
只有在一种情景中使用 !important 是可以接受的，就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议停止使用
行内样式就是直接把CSS代码添加到HTML的标记中，可以很简单地对某个元素单独定义样式。

14、使用text-transform

h1 {text-transform:uppercase;}   //全部大写
h2 {text-transform:capitalize;}   //每个单词开头大写
h3 {text-transform:lowercase;}   //全部小写
p {text-transform:none;}  //默认

15、Em， Rem 和 Pixel
开发者和项目都是不同的，所以不应该严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法：

em - 1 em 的大小与直接父元素的字体大小有关。通常用于媒体查询，em 对响应式设计而言是非常棒的，但是 em 值转换为 px 的比例是非常难

以计算的，要在 DOM 树上逐级跟踪元素。

rem - 以元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持中默认的 font-size 并且为其它的元

素设置 rem 。

px - 像素是最精确的控制方式，但是在响应式设计中它并不友好，因为它不会随屏幕大小变化而自动缩放.

有时候 em 和 rem 很省事，尤其对于响应式界面。

16、在大项目中使用预处理器
Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。它们提供的功能诸如变量， CSS 函数，选择器嵌套以

及其它一些非常酷的东西。这使得 CSS 代码非常易于管理，尤其在大项目中。
下面是使用了 CSS 变量和函数的 Sass 代码片段:
$accent-color: #2456F3; a { background-color:$ accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
使用 CSS 预处理器的唯一缺点是，它们需要编译成真正的 CSS 代码

17、Autoprefixers
为各个浏览器添加前缀，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器：

在线工具： Autoprefixer
文本编辑器插件 - Sublime Text, Atom
库 - Autoprefixer

18、在项目中使用精简代码
使用精简代码 . 代码的精简版本会移除掉空白和重复的部分会削减文件的大小. 但是 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.
有很多不同的方法去精简 CSS 代码 :
在线工具 - CSS Minifier, CSS Compressor
文本编辑插件 - Sublime Text, Atom
库 - Minfiy , CSSO 和 CSSNano

19、Can I use
不同的浏览器仍然存在着很多不一致的兼容性问题, 利用 caniuse 或者其它类似的服务检测你正在使用的属性是否被广泛支持, 是否需要添加前缀, 或者说是否会在某平台下出现 bug .
仅仅检测是否仍然是不够的, 你仍然需要测试布局是否会无缘无故的崩溃.

20、Validate
验证 CSS 代码可能没有验证 HTML 或者 JavaScript 代码重要, 但是在一个 CSS 验证器上运行你的代码还是有帮助的, 它会提示你是否书写了错误或者比较糟糕的代码, 甚至会给出一些比较中肯的建议帮助你改进代码。