2-CSS编码技巧

2021-04-19 12:35:11 阅读：112 来源： 互联网

标签：编码技巧 color width 处理器 background border CSS

本章例子：https://gitee.com/chenxiangzhi/note/blob/master/CSS/《CSS揭秘》/1-CSS编码技巧/index.html

减少重复代码

更改大小

font-size: 20px;
line-height: 30px;
padding: 6px 16px;

改进：（1）将需要同步改变大小的属性值单位用相对属性代替，如em。这时大小就会更具font-size的变化而变化。（2）line-height根据倍数随着字体大小改变

font-size: 2em;
line-height: 1.5;
padding: .3em .8em;

改变颜色

如果想改变颜色，可能要覆盖border、color、background、box-shadow和text-shadow的属性值。对于阴影和边框，只需把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体：

text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
box-shadow: 0 .05em .25em rgba(0,0,0,.5);

现在只要覆盖 background-color 属性，就可以得到不同颜色版本的按钮：

.cancel{
    background-color:sienna;
}
.ok{
    background-color:yellowgreen;
}

继承

比如在写提示框的箭头时，可以用inherit来继承父元素的样式：

.textTip{
    position: relative;
    margin-top: .5em;
    padding: .4em;
    background:wheat;
    border: 1px solid tan;
    color:white;
    border-radius: .4em;
}
.textTip::before{
    content: "";
    position: absolute;
    top: -.4em; left: 1em;
    padding: .35em;
    background: inherit;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}

代码易维护与代码量少

border-width: 10px 10px 10px 0;

如果要更改多个位置，上面的写法会比较麻烦；而下面的写法易于维护，并容易看懂：

border-width: 10px;
border-left-width: 0;

响应式页面

我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体
查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让它变成响应式应该只需要用到一些简短的媒体查询代码：

使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解析为视口宽度或高度的百分比。
当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
不要忘记为替换元素（比如 img、object、video、iframe 等）设置一个 max-width，值为 100%。
假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。
当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
列的数量。弹性盒布局（即 Flexbox）或者 display:inline-block加上常规的文本折行行为，都可以实现这一点。
在使用多列文本时，指定 column-width（列宽）而不是指定column-count（列数），这样它就可以在较小的屏幕上自动显示为单列布局。

预处理器

Stylus（http://stylus-lang.com/）、Sass（http://sasslang.com/）或 LESS（http://lesscss.org/）这样的 CSS 预处理器可以为 CSS的编写提供便利，比如变量、mixin、函数、规则嵌套、颜色处理等。不过，预处理器也不是完美无
缺的：

CSS 的文件体积和复杂度可能会失控。即使是简洁明了的源代码，在经过编译之后也可能会变成一头从天而降的巨兽。
调试难度会增加，因为你在开发工具中看到的 CSS 代码并不是你写的源代码。（SourceMap会告诉浏览器哪些编译生成的CSS 代码对应哪些预处理器 CSS 代码，精确到行号。）
预处理器在开发过程中引入了一定程度的延时。
带来更高的学习成本。
预处理器有它们自己的 bug。这些 bug 可能会潜伏很久，因为我们很少会怀疑预处理器的某个 bug 才是我们CSS 出错的幕后元凶。

其实现在很多受预处理器启发的特性都已经以各种方式融入到原生 CSS 中了：

有一份关于（跟变量类似的）自定义属性的草案，叫作 CSS 自定义属性暨层叠式变量（http://w3.org/TR/css-variables-1）。
CSS 值与单位（第三版）中的 calc() 函数，不仅在处理运算时非常强大，而且已经得到了广泛的支持，当下可用。
CSS 颜色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()函数会提供颜色运算方法。
关于嵌套，CSS 工作组内部正在进行一些正式的讨论，甚至以前还有过一份相关的草案（ED）。

这些原生特性通常比预处理器提供的版本要强大得多，因为它
们是动态的 1。举个例子，预处理器完全不知道如何完成 100% - 50px 这样的计算，因为在页面真正被渲染之前，百分比值是无法解析的。但是，原生CSS 的 calc() 在计算这样的表达式时没有任何压力。

上面提到的原生 CSS 特性绝大多数在目前还没有得到很好的支持。建议：在每个项目开始时使用纯 CSS，只有当代码开始变得无法保持 DRY 时，才切换到预处理器的方案。

标签：编码,技巧,color,width,处理器,background,border,CSS
来源： https://www.cnblogs.com/sanhuamao/p/14676284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9