梁先国SEO专注网站优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > 工具类(utility class)使用“!important”实现不变性,可能么?

工具类(utility class)使用“!important”实现不变性,可能么?

时间:2018-08-18 00:00 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

       工具类(utility class)使用“!important”实现不变性可能么?


 工具类(utility class)使用“!important”实现不变性可能么?

  我真的非常喜欢不变性。一个东西在创建之后就再也不会发生改变,听起来超棒!如果我们知道某个东西永远保持不变,那写起代码来不就轻松多了吗?我真的超级喜欢不变性!

  不过在 CSS 中想实现不变性难度很大,因为 CSS 是基于继承设计的,其中大量应用到可变性。不过有一种特殊的类型能充分利用不变性,并且不会带来任何问题:工具类(utility class)。

  工具类是一些非常简单的类,用于解决非常具体、非常明确的问题。比如:

  .u-text-center { text-align: center; }.u-float-left { float: left; }.u-text-large { font-size: 48px; }

  它们都以 u-开头,告诉开发者它们是做什么用的,并且它们只包含一条样式。

  上面这段代码中,所有的声明都不包含 !important,但是它们真的真的应该这样做。原因如下:

  在 HTML 中使用 u-text-center这样的类时,我们做了一个非常确定、清晰的决定,那就是我们想让一段文字居中显示。毫无疑问是这样的。然而, .u-text-center{}选择器的优先级相对比较低,因此其他选择器可能会在无意中覆盖它。看看下面的例子:

  .sub-content h2 { ... text-align: left;}.u-text-center { text-align: center;}

  ...

  不幸的是, .sub-content h2{}的优先级比 .u-text-center{}高,所以 h2最后还是左对齐,虽然我们设置了 text-align:center;。这里就有问题了, u-text-center无法让某些内容居中。

  简而言之,这就是为什么我们应该在工具样式中使用 !important。我们希望工具样式是不变的;无论在什么情况下,当我们使用 u-text-center的时候,一定是想要让文字居中。

  给工具类加上 !important,让它们不可变。

  当然了,在一个完美世界中(无论是什么世界),我们可以杜绝 .sub-content h2{}这样的选择器出现在 CSS 中,但是我们无法避免:

  其他人编写这样的 CSS 选择器;

  项目中之前已经有这样的选择器。

  具备适应性和防御性的系统的设计目标并不是完美世界,而是现实世界。在现实世界中,人们就是会写出各种各样的 CSS。使用 !important实现不变性会避免其他人带来的各种冲突。

本文标签:

版权声明:本文:工具类(utility class)使用“!important”实现不变性,可能么? 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

推荐文章

热门文章

最新文章

回到顶部