网站首页 > 知识剖析 正文
提示：点击上方"蓝色字体"↑ 可订阅！
关于我们 51RGB官方微信
CSS中的级联(cascade)在同一时间可谓是幸福的，也可以说是痛苦不堪的。通常能工作得非常好，但有问题的时候，也让人们都很激动，甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难，可以说CSS的困难无处不在。
在这篇文章中，我将通过一些示例来向大家展示一些CSS的小技巧，让你知道如何使用CSS的级联能变得更友好，也减少一些不必要的需求，从而也减少权重上遇到的麻烦。
技巧一
每当你写CSS时，你想尽可能的回到树形顶部。换句话说，回到:root。
例如，我们的网站有一个侧边栏，希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样：
<body>
<main class=“Posts”>
<aside class=“SideBar”>
<nav class=“Nav”>
<p class=“Bio”>
CSS是这样写的：
.Bio {
font-size: .8em;
line-height: 1.5;
color: #888;
}
这样写是能正常工作的，并不存在样式上的问题。但是，侧边栏还有一个导航 nav ，很有可能他们有一些样式是相同的。在我们这个示例中 font-size 和 color 都是相同的。让我们把这些属性从 nav 和 .Bio 中提取出来，并且将它们添加到其父元素 .SideBar 中：
.SideBar {
font-size: .8em;
color: #888;
}
事实证明，在 .Posts 中已经设置了 line-height:1.5; 。似乎整个页面都使用了相同的行高，那么我们可以将 .Bio 和 .Posts 中的 line-height 移到根元素中：
:root {
line-height: 1.5;
}
这看起来是一个CSS常识，但他也不会太关注兄弟元素定义同样的事情。这也让你发现，有一些代码产生重复。其实这并不可怕，因为我们只需要花点时间重新重构代码，但这样保持了CSS的代码处理健康状态。
在树支上写样式，而不应该在树叶上写样式
技巧二
样式总是作为特定属性组合出现
一个很好的例子就是 color 和 bakground-color 的组合。除非你只做小调整，不然你需要一起调整他们。当给一个元素添加背景颜色时，它可能不包含任何文本，但可能会有一些子元素。因此，我们一起设置前景色(color)和背景色(background-color)，我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时，不需要到处寻找需要修改的文本颜色，因为他们都以一个组合的形式出现在一起。
技巧三
使用动态值，比如currentColor和em等
有时候文本颜色也会使用在其他属性上。比如说border、box-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案，可以直接使用currentColor。默认情况下，color是可以继承的，你只需要在一个地方修改就可以改变其他属性的颜色。
同样的，给font-size属性使用em单位，允许你只修改:root的font-size就可以改变元素的盒模型大小。
有关于这方面更多的细节，可以查阅《使用字符串(STRINGS)设置样式》一文。
技巧四
使用 inherit 属性值继承其父元素样式来覆盖UA自带样式。
像 button 、 input 这样的表单控件，不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用 inherit 继承其父元素样式，从而覆盖浏览器的UA样式。
button,
input,
select,
textarea {
color: inherit;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
}
上面示例代码取自sanitize.css。normalize.css也是这样使用的。如果你不是这样使用，说明你已经…
你也可以尝试在 input[type="range"] 、 input[type="radio"] 和 input[type="checkbox"] 等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么，可以将一个亮色系变成一个暗色系。
总结
这些都是好东西，当然并不是强迫大家使用。我想说，这些小技巧，简单实用，让你的Web站点能获取最大的好处。即使你使用一个CSS预处理器，他们也不会有损代码的输出量减少，甚至可以少设置几个变量。
也适合单一类名，比如像Tachyons。或许还能减少复杂性和所需的类。
另外一个有趣的事情即将到来，那么在CSS中也可以自定义属性，也就是CSS变量。与预处理器不同，覆盖自定义属性时，它只会影响当前的选择范围。所以从某种意义上来说，他们是“层叠变量”。但我还是想试试，看看它是如何工作的。
关于我们 51RGB官方微信
51RGB在线教育 (www.51rgb.com) ：聘请WEB前端开发高级讲师，现任职腾讯UED前端开发工程师。曾就职于卓望信息前端工程师。从事前端开发8年，在卓望期间负责移动微博的前端页面架构及开发工作。来到腾讯之后主要做手机端HTML5方向。网页前端技术一流，大型企业实战经验丰富。期待你的加入！
微信：tyacheng
客服电话：400 110 9151
↓↓↓
- 上一篇： PHP类Web网站适应移动设备十贴士
- 下一篇： 开箱即用的轻量级前端框架:dagger.js
猜你喜欢
- 2025-01-13 SpringBoot集成LayUI前端组件库
- 2025-01-13 超详细带你从入门开始，开发一个超实用的浏览器插件
- 2025-01-13 Flask WTF
- 2025-01-13 开箱即用的轻量级前端框架:dagger.js
- 2025-01-13 PHP类Web网站适应移动设备十贴士
- 2025-01-13 Python | Django 的表单 form 组件
- 2025-01-13 Python之Web开发框架学习 Django-表单处理
- 2025-01-13 纯CSS 精美按钮UI设计、实现及实例
- 2025-01-13 「测试开发全栈-HTML」(18) label标签的使用
- 2025-01-13 网页表单复选框的自动勾选方法
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)