为什么 CSS 这么难?菜鸟教程下载_css菜鸟攻略

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难,并且搞不明白它也不是开发者的错。示例问题比如说我有了下面这个 CSS 类,它应该能让我轻松地将一些文本设置为代码,再将一些文本设为红色,还把

为什么 CSS 这么难?菜鸟教程下载

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难,并且搞不明白它也不是开发者的错。

为什么 CSS 这么难?菜鸟教程下载_css菜鸟攻略

示例问题

比如说我有了下面这个 CSS 类,它应该能让我轻松地将一些文本设置为代码,再将一些文本设为红色,还把一些文本设置为粉红色背景:

.pinkBG
{background-color: Pink;
}
.red
{color: Red;
}
.code
{font-family: courier;
background:#eaeaea;
padding:12px;
color: Navy;
font-weight: bold;
width:200px;
}

现在我在 HTML 里使用上面的 CSS 类:

<div>
ThisisCode
</div>
<div>
ThisisRedCode
</div>

结果就不知道出了什么问题。看起来好像“red”和“pinkBG”这俩 CSS 类根本没起效果。我在浏览器中看到的是:

为什么 CSS 这么难?菜鸟教程下载_css菜鸟攻略

到底发生了什么?如果你是一名经验丰富的 CSS 老鸟,很快就会发现问题出在我的 CSS 上。因为我在 HTML 中为 DOM 元素指定类的顺序没有任何意义。唯一重要的是 CSS 样式表中 CSS 类定义的顺序。然后恰好上面代码中的这个顺序产生了上述结果。

补救措施

只要我“重新排序”我的 CSS,一切就正常了:

.code
{font-family: courier;
background:#eaeaea;
padding:12px;
color: Navy;
font-weight: bold;
width:200px;
}
.pinkBG
{background-color: Pink;
}
.red
{color: Red;
}

现在输出变成了:

为什么 CSS 这么难?菜鸟教程下载_css菜鸟攻略

太棒了,这正是我想要的!

一般问题

从上面的解决方案里你发现了什么问题?那就是我作为 CSS 样式表的用户却不能按我把 CSS 类应用到元素的顺序指定 CSS 类的顺序。如果写样式表的是其他老鸟怎么办?敢情我还得找他们修改样式表吗?他们不会嫌麻烦吗?

就算他们照做了,他们做修改时不会带来很多副作用吗?也许这个样式表已经用到上千个地方了,修改它可能会很危险。所以也许我只能复制他们的样式表并根据需要修改我的副本。但是一旦他们改动了原始版本中某些非常重要的内容时,我的这套做法就不行了,改过的部分没法再用到我的网站里了。

我分配给 DOM 元素的样式类的组合效果取决于样式表中这些类的编写顺序。而且这个顺序只有这么一种。

在 HTML 中我不能这样写:

<div class="redpinkBGcode">

我不能指望首先应用 CSS 类“red”的属性,然后是类“pinkBG”的属性,然后是“code”的属性,这是做不到的。我希望样式表是这种机制,但实际情况恰恰相反。

如果我改变这些类的顺序,比如说:

<divc lass="coderedpinkBG">

会发生什么呢?什么都没发生。输出完全一样。

唯一重要的是在我的 CSS 样式表中定义这些类的顺序。重要的事情再强调一遍。

这意味着每个 CSS 类所做的事情并不会“加起来”,不会“总和”成它们的组合效果。我不仅要知道这些类的单独定义,还得花一些时间来弄清楚另外三件事情:

  • 是否在 CSS 类“ red ”之前或之后定义了 CSS 类“ code ”?

  • 是否在 CSS 类“ pinkBG ”之前或之后定义了 CSS 类“ code ”?

  • 是否在 CSS 类“ pinkBG ”之前或之后定义了 CSS 类“ red “?

搞清楚这些问题才能知道你的网站会显示成什么样子。也许还可以问问哪家的人工智能助手?或者干脆找位大侦探来研究一下吧。

请注意,你还必须要给 CSS 类排序。它们总是并且必须按某种顺序排列。问题是这些顺序直接影响你的网站内容。那么自然就引出了下一个问题,对 CSS 类来说最好的顺序是什么?

CSS 类有所谓的最佳顺序吗?

CSS 目前的工作机制要求编写样式表的人必须试着为其中定义的样式类安排一个最佳顺序。但这样的最佳排序是否存在呢?如果你有 7 个 CSS 类:

7*6*5*4*3*2==5040

就会有足足五千多种排序方式。哪种顺序最好呢?鬼知道。如果你有 9 个 CSS 类,可选的顺序就会有 362,880 个。那么实际上你有多少类呢?

于是你用 CSS 时到底该怎么办?我可以告诉你一条经验法则,也许其他人还有更多经验…

怎样在一个样式表中排序 CSS 类?

答案:如果 CSS 类具有不同数量的样式属性,就把属性较多的类放在前面。

这条规则背后的原理是,类的属性越少,它的属性值与其他类的属性值冲突的可能性也会越低。这样排序后你的类就能显示你想要的效果了。把简单的类排到后面意味着这些简单的类的效果会覆盖前面的类,最终输出结果中这些简单类的优先级最高。然后,你就可以选择是否把它们添加到 HTML 中了,如果添加进去的话它们也只会影响自己关联的那么一两个属性。

注意在上面的示例中用这条规则就能达成我要的结果。

观察: 努力减少每个类的样式属性数量 。如果每个样式类只有一个属性,那么大部分问题就自动解决了。但是从示例中可以看出现实中我们没法一直这样做。我们希望代码段具有某些字体、某些背景等,如下图所示。

为什么 CSS 这么难?菜鸟教程下载_css菜鸟攻略

通用解决方案

一个更好的方案是 让附加到 DOM 元素的类名顺序等同于这些 CSS 类作为样式应用的顺序 。

然后样式表的用户就能决定将样式类应用到特定 DOM 元素的顺序了。是的,把权力还给用户。这样大家不就都能过上幸福生活了吗?

为什么 CSS 样式类目前不能使用这种机制?有什么令人信服的理由吗?我不知道,你知道的话可以告诉我。

也许将来的 CSS 版本会解决这个问题吧。也许将来的 CSS 会有一个指令写着“ 使用用户指定的顺序,而不是样式表中的顺序 ”。那可就太棒了。

你想买什么颜色的车都行,反正只有黑色的可以买;你想按任何顺序应用 CSS 类都行,反正必须是按样式表中的顺序应用。这还有什么意义吗?

纸牌屋

如前所述,哪怕只有 9 个 CSS 类也会有 362,880 种不同的排序。改一个新顺序就能改变你的网站的外观,甚至让它变得乱糟糟或丑陋不堪。如果改变顺序还让一些交互元素看不见了,甚至连网站的功能都会受影响。

当然, 362,880 种排序中的大多数都能产生完全相同的结果。但具体是哪些顺序呢?这可说不准。 这就是为什么 CSS 如此之难的原因所在 。你不能只研究单个样式类的定义。你必须打包研究它们,理解它们在组合中的彼此关系。 CSS 类不能简单相加 !

1+2==2+1

这个等式当然没问题。但是:

CssClass_A + CssClass_B != CssClass_B + CssClass_A

要是算式变成下面这样得有多难啊:

a+b!=b+a

作为一个比喻,现在想象一下,你的网站的一个“坐标”是它使用的 CSS 类的 362,880 种排序中的一种。这就像 X 轴有 362,880 点,坐标就是其中一点。假设你选择的 x 坐标值是 123,456。

你后来发现要让某个元素的样式正确,你必须将 x 的坐标改为 x == 123,457 才行。但是这种变化也会产生意想不到的副作用。

你做了一个非常小的改变,就像在一个纸牌屋中移动一张牌一样。但这种小小的改变会以你想不到的方式改变你网站的外观,让它 变乱或者更难看 、不堪一击。

想象一下

如果你最喜欢的编程语言都像 CSS 这种笨样会怎么样?假设你有一个由函数 c() ,**b() 和 a()** 组成的 JavaScript 程序。它会计算一些结果并在控制台或网页上显示。也许它会计算出在网站某些部分使用的颜色。

有一天,你决定清理代码并将函数定义重新排序为 a() , b() 和 c() 。结果一周后你的客户非常愤怒地找上门来,说他们的用户无法再读取他们网站的部分内容。为什么?因为这些部分的背景颜色和文本颜色变成一样的了。

你肯定会抱怨说你用了哪门子的坑爹编程语言不是吗?你肯定会跟编程语言厂商抱怨:“亲爱的先生们,我们很难用你们的语言做出符合我们需求的程序。因为每次我们重新排列功能定义的顺序时,程序的输出结果都会改变!“

你的编程语言厂商这样回复说:“亲爱的客户,我们已经查看了你的问题,我们也认为 JavaScript 的这种机制真的很愚蠢。但是我们无法改变这种状况,因为我们需要向后兼容。但我们确实在下一版本中加入了解决方案。它只要求你在程序的开头加上以下指令就行:“

DefinitionsOrderDoesNotMatter=true

总结

使用 CSS 制作网站就像小心搭建一个纸牌屋一样。没办法,现实就是如此。但 CSS 仍然是我们的最佳选择。

我们能做的也只是把属性较少的类放在后面而已。

此外还要阅读所有样式表,了解每个样式表的所有部分的效果,还要搞清楚各个部分之间的关系。你必须使用“整体方法”来理解你的 CSS。目前的 CSS 版本只能这样处理。

然后呼吁你的 CSS 提供商在下一版本中加一个选项,不要再让样式类的定义顺序跟输出效果关联了。

海计划公众号
(0)
上一篇 2020/03/29 01:39
下一篇 2020/03/29 01:39

您可能感兴趣的内容

  • Algolia Places小白指南_为您的网站提供一个快速、简单的方式,自动化产生地址建议列表的Js函数库

    Algolia Places小白指南 官方网址:https://community.algolia.com/places/ GitHub:https://github.com/al…

    2020/03/06
  • TutsPlus小白知识_优秀的长文章、视频教程内容

    TutsPlus小白知识 官方网址:https://tutsplus.com/ 简介描述:优秀的长文章、视频教程内容 TutsPlus是在Web开发人员和设计师提供的教程和技术文章…

    2020/03/11
  • 大头网菜鸟攻略_Js网页特效代码

    大头网菜鸟攻略 官方网址:http://www.datouwang.com/ 简介描述:Js网页特效代码 大头网为网页前端人员提供建站常用的网页特效,内容涵盖焦点图,导航菜单,幻灯…

    2020/03/06
  • Node-RED是什么?小白基础_node指南攻略

    Node-RED是一种基于Node.js的编程工具,用于以新颖有趣的方式将硬件设备,API和在线服务连接在一起。它提供了一个基于浏览器的编辑器,可以使用调色板中的各种节点轻松地将流连接在一起,只需单击即可将其部署到运行时。Node-Red提供基于网页的编程环境。通过拖拽已定义node到工作区并用线连接node创建数据流来实现编程。程序员通过点击‘Deploy

    2020/03/24
  • 开发一个高质量的前端组件,这些姿势一定要知道使用帮助_组件小白攻略

    从今天(2019 年)这个时间节点来看,NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。数据来源: moudlecountsNPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是,但事实真的是这样吗?环顾身边的 FE,没有发过任何 NPM 包的同学大有人在,已经发过包的同

    2020/03/23
  • JS 中的垃圾回收攻略教程_js知识新手入门

    对于开发者来说,JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当某个东西我们不再需要时会发生什么?JavaScript 引擎如何发现它、清理它?可达性JavaScript 中主要的内存管理概念是可达性。简而言之,『可达』值是那些以某种方式可访问或可用的值。它们保证存储在内存中。这里列出固有的可达值基本集

    2020/03/29
  • 8种常见SQL错误用法指南攻略_错误小白常识

    前言MySQL在2016年仍然保持强劲的数据库流行度增长趋势。越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移到MySQL上来。但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢,CPU打满等情况。阿里云RDS专家服务团队帮助云上客户解决过很多紧急问题。现将《ApsaraDB专家诊断报告》中出现的部分常见SQL

    2020/03/26
  • 深入学习和理解 Redux使用教程_redux菜鸟攻略

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/jhgQXKp4srsl9_VYMTZXjQ作者:曾超Redux官网上是这样描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript状态容器,

    2020/03/20
  • ES5中模仿块级作用域小白教程_作用域菜鸟攻略

    有一定JavaScript开发经验的人应该会熟悉下面这种立即执行函数的写法:(function(name){console.log(‘hello ‘ + name);// hello Bob
    })(‘Bob’);
    不过即使不熟悉也没关系,这里我会讲解这种写法的含义。先来看下面这个更容易理解的示例:var sayHello = function(name){c

    2020/03/30
  • 项目中常用的git指令菜鸟知识_git菜鸟指南

    1.新建一个本地分支并切换到新建的那个分支:git checkout -b (新分支名)2.从一个分支切换到另一个分支:git checkout 分支名3.将代码恢复到最近的一次commit 时候的状态:git stash4.将代码从最近的一次commit的状态恢复到最新的进度:git stash pop5.将一个本地子分支合并到本地的master分支:先将

    2020/03/31
  • php.ini配置详解小白入门_php小白常识

    一、关于php ini介绍php.iniapache在启动时php.ini被读取。对于服务器模块版本的php,仅在web服务器启动时读取一次。对于CGI和CLI版本,每次调用都会被读取Apache Web服务器在启动时会把目录转到根目录,这将使得PHP尝试在根目录下读取php.ini,如果·存在的话。在php.ini中可以使用环境变量User.ini自php

    2020/03/23
  • 程序员必备的5个工作技能入门教程_技能菜鸟教程网

    咱们程序员不光要提升技术能力,也要培养自己的工作技能,拥有高质量的软技能与掌握牛X的技术一样重要。聊几个重点的:时间管理任务分解偷懒知道什么时候休息解决问题1. 时间管理我们可以使用 todo list 记录自己的任务和各自的截止时间,以免漏掉。把任务写下来以后,可以减轻大脑的负担,不然大脑总会下意识的琢磨 “我要做xxx、我可别漏了xxx”。大脑是计算系统

    2020/03/23
  • Figma小白帮助_跨平台设计利器

    Figma小白帮助 官方网址:https://www.figma.com/ 简介描述:跨平台设计利器 figma是完全借鉴sketch来设计的,无论是操作逻辑还是界面的布局,不同的…

    2020/03/06
  • nginx的一般安全配置小白攻略_nginx菜鸟教程下载

    项目一般配置,例如default.confserver {#引入lua文件加载一些默认配置include conf.d/lua_core.conf;#引入一些默认localtion的配置include conf.d/limits.conf;#指定dcoment_rootroot /var/www/html/default/public;#加载项目相关的loc

    2020/03/29
  • 理解使用js中async、await小白教程_await使用教程

    在讲async之前,先简单的提一下promise。首先,先来纠正一下很多人普遍的错误观点 –> ‘promise是异步的’, 看代码:console.log(1);
    let p1 = new Promise(r => { console.log(2); r() });
    p1.then(_ => console.log(3));
    console.log(4)

    2020/03/26
  • 开发邦入门基础教程_软件定制开发、软件外包开发

    开发邦入门基础教程 官方网址:https://www.kaifabang.com/ 简介描述:软件定制开发、软件外包开发 专注于为客户提供互联网软件技术开发与咨询服务,致力于利用互…

    2020/03/11