整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

为什么web前端工程师会讨厌写CSS?

为什么web前端工程师会讨厌写CSS?

Web开发的领域里,前端工程师的工作涉及到HTML、CSS和JavaScript等多个方面。然而,你可能会发现,许多前端工程师并不喜欢写CSS。那么,为什么会出现这种情况呢?

1. 缺乏抽象和逻辑

相比于HTML和JavaScript,CSS更像是一种视觉描述语言,而非编程语言。CSS缺乏像编程语言那样的抽象和逻辑机制,比如函数、变量、条件语句和循环等。这使得CSS代码往往变得冗长、重复且难以维护。

2. 浏览器兼容性

不同的浏览器对CSS的支持程度不尽相同,这导致了在开发过程中需要花费大量时间进行浏览器兼容性测试和调整。尤其是在一些老旧浏览器上,一些新的CSS特性可能无法得到完全支持,这进一步增加了开发的难度。

3. 缺乏编程思维

很多前端工程师在初入行时都是从HTML和JavaScript开始学习的,他们习惯于使用编程思维来解决问题。然而,CSS的语法和规则与编程语言有很大的不同,这使得一些前端工程师在写CSS时感到不适应。

4. 缺乏模块化和组件化

CSS的模块化和组件化相比于JavaScript来说要落后很多。在JavaScript中,我们可以使用模块和组件来将代码拆分成多个独立的部分,从而提高代码的可重用性和可维护性。然而,在CSS中,要实现类似的功能就需要使用到一些高级的CSS技巧,如CSS预处理器、CSS框架等。

5. 缺乏有效的工具

虽然近年来出现了一些CSS预处理器、CSS框架等解决方案,但这些工具并不能完全解决CSS本身存在的问题。这些工具可能会提高开发效率,但它们也带来了一些新的学习成本和复杂性。

6. 缺乏设计感

CSS的主要工作是描述页面的视觉样式,这需要一定的设计感。然而,并非所有的前端工程师都具备这种能力。对于一些缺乏设计感的前端工程师来说,写CSS可能会成为一种挑战。

虽然CSS在Web开发中扮演着重要的角色,但由于其本身的局限性和挑战,许多前端工程师可能会对它产生一些负面情绪。然而,作为前端工程师,我们仍然需要掌握CSS的知识和技能,以便更好地完成我们的工作。同时,我们也期待CSS在未来能够变得更加强大和易用。

SS 是一种美丽且复杂的技术,我们每天在工作中都会用到。然而,包括我在内的许多开发者都忽略了它的一些重要方面。

这很明显,因为在互联网上很难找到关于 CSS 的新知识或高级内容。大多数内容创作者只写一些热门话题,比如新语言、框架和库。

个人对 CSS 的了解仅限于让它正常工作。而这特别令人遗憾,因为我们从未尝试深入研究这个主题。认识到这一点后,做了一些研究,并列出了一些新发现的内容。

CSS 性能

CSS 性能是一个非常重要的话题,因为它直接影响网站的效率。由于现代应用程序包含大量的 CSS 代码,即使是微小的错误也可能导致显著的性能下降。

子选择器

首先,下面赂你展示一些令我惊讶的东西。只需看看下面的例子,试着找出可能的问题。

正如你所看到的,这个例子一点都不复杂。这段 CSS 代码移除了标题中所有段落内链接的文本装饰。这不是普通的 CSS 吗?

但你知道使用这样的选择器会导致浏览器执行大量额外工作吗?这个问题适用于我们代码中所有类似的子选择器。

这是因为浏览器在解析 CSS 时,从右向左读取选择器。有了这个新知识,我们将这个过程分解成几个步骤:

  1. 浏览器找到页面上所有的 <a> 标签。
  2. 然后它找到包含在段落中的所有锚点。
  3. 最后,它将找到的集合缩小到仅包含在 #header 元素内的锚点。

通过使用更具体的选择器,我们可以帮助浏览器避免所有这些额外的工作。我们可以将 .header__link 类应用于锚元素,并用它替换选择器 #header p a。这样,浏览器会更快地找到所需的元素。

昂贵的 CSS 属性

所谓昂贵的 CSS 属性,是指这些属性在我们的应用程序中可能会耗费大量性能。但这并不意味着你完全不能使用它们。你只需要理解,如果元素使用了这些属性并且经常渲染——它肯定会影响性能。

需要注意的一件棘手事情是,改变某些 CSS 属性需要更新整个布局。几何属性如宽度、高度、顶部等可能导致整个树的重新绘制。

还有一些属性很难渲染。虽然这些属性的清单很短,但你可以在这里了解更多关于它们的信息。

  1. border-radius
  2. box-shadow
  3. filter
  4. :nth-child
  5. position: fixed

重绘和重排

重绘(Repaint)和重排(Reflow)是在浏览器中渲染网页过程中两个重要的概念。当页面加载或更新时,浏览器会通过一系列步骤将内容显示在屏幕上,而重绘和重排在这个过程中起着重要作用。

为了更好地理解这个过程,我们可以将其分解为几个精确的步骤:

  • 从服务器下载的 HTML 文档用于构建文档对象模型(DOM)。
  • 样式被加载和识别,创建 CSS 对象模型(CSSOM)。
  • 基于 DOM 和 CSSOM,形成一个渲染树,这是一个渲染对象的集合。渲染树复制了 DOM 的结构,但不可见的元素(例如 <head> 或 display: none 的元素)不包含在内。换句话说,渲染树描述了 DOM 的视觉表示。
  • 对于渲染树中的每个元素,计算其在页面上的位置,并进行布局。浏览器使用流方法,通常一个操作就足以放置所有元素。例如,表格需要更多的操作。
  • 最后,所有元素在浏览器中被渲染,并且绘制完成。

当页面首次加载时,如果不是空的,至少会执行一次重排和重绘。但它们也会在以下情况下继续发生:

  • 当由于节点的宽度、高度或其他坐标的变化,树的一部分需要重新计算时,会触发重排事件。
  • 当由于变化,一些显示的内容必须更新时,这主要适用于诸如背景颜色、半径等样式属性,会触发重绘事件。
  • 此外,当发生重排事件时,总是会伴随一个重绘事件。而重绘则可以独立于重排触发。

关于重排

重排是计算网页上元素布局的过程。它根据元素的内容和样式来确定每个元素的大小和位置。

在现代应用程序中,特别是页面上有成千上万个元素和频繁的布局更新时,它很快会变成一个资源消耗大的操作。即使是对文档中单个元素的重排,也可能需要重排其父元素和随后的任何其他元素。

由于它是一个用户阻塞操作,了解如何改进重排以及各种文档属性对其持续时间的影响是非常有用的。典型的引发重排过程的情况通常有:

  • 对 DOM 的不同操作。例如,添加、删除和更改节点。
  • 元素内容的变化,甚至包括表单字段中的文本。
  • 计算(getComputedStyle)或修改 CSS 属性。
  • 对元素类的操作。
  • 浏览器窗口的操作(调整大小、滚动)。
  • 伪类的激活。:hover 就是一个很好的例子。

关于重绘

重绘是将像素绘制到屏幕上的简单过程。在重排期间确定布局后,浏览器将每个元素绘制到屏幕上。

重绘通常比重排消耗的资源少,但它仍然会影响网页的性能。

最典型的情况是当元素样式的变化不影响其在屏幕上的大小或位置时。例如,当背景颜色改变时,浏览器只需用新样式重新绘制(或重绘)节点。

以下是一些会触发重绘的操作的例子:

  • 改变元素的可见性。
  • 改变元素的轮廓。
  • 改变背景。

CSS 可以替代 JS 的地方

JavaScript 和 CSS 是非常棒的技术,尤其是在一起使用时。每种技术都有其独特的优势,结合使用时可以创造出令人难以置信的效果。

然而,我可以自信地说,UI 控制中使用 CSS 越多,Web 应用程序就越容错和可靠。

观点很简单:

  • CSS 本身是一种安全技术。当 CSS 解析器遇到无效属性时,它会简单地忽略并继续。
  • JavaScript 不是一种安全技术。JS 代码中的单个语法错误可能导致整个应用程序失败。换句话说,当使用 JS 控制样式时,确保相应构造的功能正常工作是至关重要的。

现在让我们考虑一些你可以轻松用 CSS 替代 JS 的情况。

平滑滚动

以前,要实现平滑滚动,需要使用几行 JavaScript 代码。但现在,这个任务可以完全通过 CSS 的力量来解决。

现在你可以通过使用 CSS 属性 scroll-behavior 来实现平滑滚动。

文本处理

CSS 提供了两个很棒的属性:text-overflowline-clamp。它们允许我们修剪文本,同时让我们摆脱使用 JavaScript 代码或其他复杂方法来执行此类任务。这两个属性虽然不是新的,但非常有用。

text-overflow 属性

这个属性控制文本在不适合一行的情况下如何显示。这个属性的一个完美例子是在卡片标题中使用 text-overflow: ellipsis,它会在被截断的文本末尾显示一个 Unicode 字符

请记住,text-overflow: ellipsis 只有在与 white-space: nowrapoverflow: hidden 属性配合使用时才有效。

line-clamp 属性


line-clamp 属性在需要处理多行文本时非常有用。上面示例中的卡片描述展示了它的效果。

这个属性是 CSS Overflow Module Level 3 标准的一部分,虽然目前还处于草案阶段,但已经有大约 95% 的浏览器支持这个属性,但需要加上 -webkit- 前缀。

在使用它之前,重要的是要提到它不允许控制显示字符的数量。但它仍然非常有用。

要使用 line-clamp 属性,我们需要将其与 display: -webkit-box-webkit-box-orient: vertical 结合使用。示例如下:

总结

现代前端开发的世界正在迅速变化,我们不断得到新的机会来帮助我们更快、更好地完成工作。尝试使用 CSS 是非常有趣且有帮助的。如果在不使用 JS 的情况下可以实现相同的结果,请考虑使用 CSS。

览在线网站的体验并不总是流畅的。


曾经有一段时间,你在网上冲浪时,可能会听到你不愿意听的音乐,并在配色奇怪的网页上浏览用呆板字体(通常是 Times New Roman)写成的文字。


在 2000 年代,在 Squarespace 和社交媒体出现之前,网站是个性的体现,完全由对代码有一定了解并渴望上网的用户使用 HTML 从零开始构建。


现在,分散在网络上的程序员社区,正在努力恢复这种看似过时的东西。这场运动来源于艺术家劳蕾尔·施伍斯特(Laurel Schwulst)和埃利奥特·科斯特(Elliott Cost)创造的“HTML 能量”概念,绝不是对复古美学的肤浅致敬。


它专注于 HTML 编码的“触觉”过程,探索语言如何实现自我表达,并使个人能够在互联网中占据一席之地。


HTML 能量运动在小型 Discord 频道和数字杂志等领域形成,旨在庆祝数字体验中的“人性触摸”。


(来源:AI 生成)


如今,大多数互联网都针对社交、电子商务和流媒体进行了优化。大多数互联网流量集中在少数几个网站上,这些网站又都归少数几家公司所有。从冗长的广告到咄咄逼人的 cookie 设置,一些小障碍和麻烦层出不穷。


用户不断被提醒,他们访问互联网的条件是让少数人从中获利。X(原推特)的情况完美地概括了互联网所有权的这种状态,只需要一位高管就可以引发大量用户逃离该平台,并将其长期存在的社区割裂开来。


然而,尽管大型科技公司垄断了市场,但一个基本现实仍然能够证明互联网的民主:任何人都可以用 HTML 免费发布网站。


从技术上讲,互联网为每个人都提供了空间,因此不存在无处容身的问题。真正的问题是流量。


当我与 HTML 能量社区的不同成员交谈时,所有人都一致地传达着一个基本信息:网络上的一切最终都是 HTML。HTML 是任何网站的主干。


这是网站运行所需的唯一东西。虽然当今流行的 web 开发语言使用 abridged 命令,通过所谓的数据抽象来隐藏技术复杂性,但 HTML 是细粒度的,编程经验也不是先决条件。


正如科斯特所解释的,正是 HTML 的包容性给了渴望在网络上发布自我的人机会。使用 HTML,即使缺少一行代码,网站仍将加载。HTML 能量运动包含了这些可能性:欢迎通过试错学习,鼓励创造性实验。


随着主流数字体验趋向于同质的视觉语言,人类的触觉在许多抽象层中迷失了。网站创建者离他们的网站越来越远,网络也变得更具交易性。


但 HTML 能量运动呼吁人们重新审视我们与技术的关系,使用 HTML 制作网站可以让程序员探索网站的本质。


与公司不同,人们自己创建网站无需向股东负责。他们没有创造有利可图的体验的压力,所以他们的创作可以采取各种各样的形式。


常见类型的 HTML 能量网站包括数字花园,其中的元素随着季节的变化而变化;交互式诗歌生成器,用户的输入会创造新的意义;以及分享创作者生活细节的个人网站。


在一个消费主义至上的互联网中,HTML 能量的网站温和地提醒人们,网站可以带来冥想一样的体验。


HTML 能量社区提倡理解 HTML 的字面含义,它就是一种语言。它赞美了这种语言的基本特征对用户意图的要求。


作为微小和复杂创意决策的融合,仅使用 HTML 构建的网站是一种自我表达形式。


查看网站的源代码与浏览界面一样重要。代码中经常隐藏着彩蛋,比如来自其他 HTML 网站的消息或引用。


在很多方面,HTML 网站都“记录着”创作者的身份:这个人选择了构建什么?如何构建?


这种对 HTML 不同应用的迷恋,也出现在被称为“freewrites”的物理社区聚会中,社区成员常聚在一起编写代码。


Sunday Sites 和 Fruitful School 是组织这些集会的网站之一,它们经常将教育元素融入活动中,以增强更多人加入该社区的能力。


与此同时,像 HTML 评论这样的网站以文学杂志的形式展示了它的一些产品。


(来源:资料图)


项目 1:多景剧场


吉·金(Ji Kim)的“多景剧场”拼贴了一部旧 iPhone 的多个片段。当访问者浏览网站时,图像会重叠,并播放嵌入的音频片段。


当用户点击任何图像时,都会出现一个关于拍摄时间和地点的小描述,以及更多额外的媒体内容。


金的网站旨在模仿记忆的零散性和层次性。这是一种有意分散的数字体验,就像试图回忆几年前的一次家庭旅行一样。


(来源:资料图)


项目 2:有窗户的房间


谢尔比·威尔逊(Shelby Wilson)的带窗户的房间,是一个只允许一种互动的网站:打开和关闭一组窗帘。


该网站有意将物理空间和数字空间混合在一起。威尔逊将浏览器视为通往有物理边界和边缘的地方的门户,但也保留了超现实主义元素(百叶窗关闭时房间不会变暗)和随机元素(每次访问时房间的颜色都会变化),以突出数字形式。


(来源:资料图)


项目 3:HTML 花园


史宾赛·张(Spencer Chang)的网站设想了一个花园在互联网上的样子。


一些由原生 HTML 元素组成的“植物”在生长,每次访问你都会注意到时间的流逝:季节的变化、植物的发芽和开花。没有明确的行为,你所需要做的只是观察。


(来源:资料图)


项目 4:散文剧


凯瑟琳·杨(Katherine Yang)的散文游戏是一首互动诗,鼓励用户在预设的句子结构中输入不同的单词。


该网站以单词为变量,探索互联网的互动性。它把“作者之死”的文学理论,即“文本的意义不是由作者的本意决定的,而是由读者的解释决定的”放在了代码的语境中。


(来源:资料图)


项目 5:Erich Friedman


埃里希·弗里德曼(Erich Friedman)的网站是他生活的个人百科全书,里面有从电影评级到佛罗里达州中部迷你高尔夫球场评论的各种档案。该网站分为数学类、益智类、个人类和专业类,结构比较简单。


它使用基本的 HTML 来展示弗里德曼在过去十年中不拘一格的兴趣,包括从 0 到 9999 的每个数字的有趣事实列表,以及数学和琐事问题的集合。


该网站不需要任何特定操作。它只是对埃里希·弗里德曼的详尽、坦率的描述,在庞大的互联网中占据了一小部分。


(来源:资料图)


项目 6:屏幕博物馆


图卢·图穆(Toulou TouMou)的屏幕博物馆,是一个存放由游戏爱好者创建的浏览器游戏的网站。为了与展示的游戏互动,用户必须在数字空间中导航,就像用 ASCII 图形可视化的物理博物馆一样。


这个网站有实际的参观时间,还会随机选择一个“休息日”。


图穆的博物馆是为了在 Flash 游戏时代给予业余开发者应有的荣誉而创建的,旨在强调承认作者身份和独立游戏丰富历史的重要性。


HTML 能量的网站没有集中的来源,偶然发现让他们觉得自己很特别,就像发现停车场的一幅街头艺术作品一样。它们不是为被发现而设计的,也不是为任何特定操作而优化的。


他们只是按照访客的条件与访客互动,描绘出创作者的风格。如果像谷歌或脸书这样的网站是你购买必需品的超市和购物中心,那么 HTML 能量的网站就像你偶然发现的隐藏花园,在任何地图上都找不到。


支持:Ren