家好，今天告诉大家一个好消息，CSS要支持类似Sass框架的嵌套语法了，不需要任何框架，就可以很方便的使用，是不是特别爽呢。那么我们一起看看这个想法和过程是如何产生的，有助于我们更好的理解这个 CSS 嵌套语法方案

W3C 的年底充满了起起伏伏，该组织与麻省理工学院之间的辩论最终在圣诞节前夕得到解决，这要归功于两个组织的领导。

幸运的是，它并没有影响 CSS 嵌套的工作，这个新特性不仅在 CSS 组中，而且在开发者社区中都引起了激烈的争论。

2022 年 12 月 15 日，Jen Simmons 宣布了一项调查，以选择开发人员最喜欢的 CSS 嵌套变体。

在排除了方案一和方案二之后，2500 名开发者不得不在方案三、方案四和方案五之间做出选择。

调查结果太棒了！事实证明，86% 的开发人员选择了与心爱的 Sass 最相似的选项 3。

在我们能够庆祝 CSS 将会拥有一个熟悉的原生嵌套解决方案之前，有一些事情需要考虑。

调查结果可作为社区期望的指标。 W3C 团队采取正确方向的输入。

团队在认真听取用户声音并听取在线辩论的同时，还必须完善最终的解决方案。有许多原因需要考虑。

虽然 Sass 语法很好，但不可能将其 1:1 转换为 CSS。

CSS 标准依赖于浏览器解析必须理解新语法的样式表。团队必须考虑整个 CSS 标准，并确保新语法在所有用例中都能兼容。

这可能很棘手，可能需要解析器开关或一些规则来确保嵌套以可预测的方式工作。

为了新语法的成功，规则集必须最少，团队被吸引到特殊字符规则中。该规则规定嵌套选择器必须以特殊字符开头。例如 &、.、# 或：。

该规则很容易理解，应该也很容易记住。

还有其他不确定因素。嵌套运算符 (&) 是强制性的还是可选的，目前仍有争议。

尽管如此，该团队在两周前决定听从开发人员的声音，并从选项 3 开始继续工作。与 Sass 最相似的一个。同时对未来可能发生的所有可能性持开放态度。

如果您是前端网络工程师，您也可以参与这项工作。查看文章末尾的链接以导航到讨论 CSS 嵌套的问题。

完善 CSS 嵌套肯定需要几个月的时间。我会让你知道进展情况。

在 W3C 团队支持标准的情况下，我相信最终的解决方案将成为构建结构良好的样式表的标准。对于构建现代应用程序非常重要的东西。

结束

今天的分享就到这里，针对这个方案大家有什么看法，欢迎大家在评论区发表看法，你也可以通过以下的讨论链接参与到这个标准的制定中。感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

讨论链接：https://github.com/w3c/csswg-drafts/issues/8248

原文：https://tomaszs2.medium.com/w3c-decided-on-css-nested-syntax-950bc13f3ce7

作者：Tom Smykowski

非直接翻译，有自行改编和添加部分。

击链接阅读原文，获取更多技术内容：React组件封装实践：如何拆解复杂的页面-阿里云开发者社区

在日常开发中，遇到非常难以维护的页面是常态，相信不少同学也为此苦恼过，笔者在业务开发中总结了些经验希望对大家有所启发。（后台回复大数据即可获得《大数据&AI实战派》电子书）

作者 | 王峰(楚枭)

来源 | 阿里开发者公众号

背景

在日常开发中，遇到非常难以维护的页面是常态，相信不少同学也为此苦恼过，笔者在业务开发中总结了些经验希望对大家有所启发。下图是一个较为复杂的详情页、表单页，我截取了其中一小部分作为示例：

随着需求不断迭代，这个页面的代码变得越来越复杂，代码达到几千行，html 标签嵌套层级非常深，每次想在正确的节点改东西、加元素都非常费眼睛；每次想修改、叠加业务逻辑，看到一堆 useEffect、useState、useRef 令人望而却步。于是决定重构以改变现状。

如何重构，以拆解复杂页面

如何重构一个复杂前端页面？笔者平常主要写后端，实际工程中后端代码的腐化很多都来源于 if-else 不断叠加，要重构一般分几个层次看：

• 如果是某一个业务概念比较复杂造成的大量 if-else 嵌套，使用策略模式重构；
• 如果是多个业务概念交织造成的复杂度，则用责任链模式梳理好每个层次；
• 如果是更高的抽象层次，比如不同的业务身份有不同的执行链路，或者不同的业务身份都要做某件事但做法不同，那么最好使用模板方法设计模式定义好高层次的业务抽象和默认逻辑，不同的业务身份进行选择性的重写或业务逻辑扩展。

大的思路如此，具体场景各有各的特殊性，需要灵活应对，这里也不过多展开。总之，后端的复杂度和各个场景的业务逻辑息息相关，垂直纵深很大，但前端呢？私以为前端虽然也有业务逻辑但不深，它的复杂不是来源于垂直纵深，而是水平堆积。一个页面的内容经常又多又杂，有详情、有表单、各种区块、不同标签页，里面的内容我不赘述。那么重构的方向呼之欲出：使用组合的思想拆分水平堆积的业务逻辑块。具体到 React，其实就是拆解业务、封装组件，是一个组件化的过程。

组件化

其实前端整个 React App 说白了可以抽象成一个组件树，如图：

笔者习惯将组件分成：基础组件和区块组件。

• 基础组件：具有一定业务属性的小型组件单元。它有业务属性，但比较弱，强调通用性。
• 区块组件：业务知识较重的大组件。它内聚了很多业务知识，通用性弱，甚至可以没有通用性，强调业务的内聚性。

按照基础组件和区块组件的划分，我开始重构上图详情页。

组件封装实践

我将页面上的展示内容按照业务块进行了划分，自顶向上对业务区块进行了重新的定义，如图：

划分好了就开始封装，列举几个组件的封装示例。

基础组件：AliTalk IM

AliTalk IM 组件定义

接收方 IM 身份的 id 作为入参，返回 IM 展示组件，点击 icon 则唤起聊天弹窗进行聊天操作，完成后可关闭弹窗。至于初始化聊天框、销毁聊天框的逻辑，以及如何进行聊天，应该在组件内封装好，外部业务不关心这些，主要代码：

type ChatProps = {
  uid?: string;
};
const Chat: FC<ChatProps> = (data: ChatProps) => {
  const [showChat, setShowChat] = useState(true);
  useEffect(() => {
    console.log('init Alitalk: ' + data.uid);
    return () => {
      console.log('destroy Alitalk: ' + data.uid);
      setShowChat(false);

      const aliTalkMessageBox = document.getElementsByClassName('weblite-iframe');
      for (let i = 0; i < aliTalkMessageBox.length; i++) {
        const item = aliTalkMessageBox[i];
        item.remove();
      }
    };
  }, []);

  return (
    <div>
      {showChat && (
        <Alitalk uid={data.uid} pid={'xx'} bizType={1} bizId={'xx'} >
          <img width={24} height={24}
            src={
              'https://img.alicdn.com/imgextra/i2/O1CN01acXzMG1d5JsurHGVR_!!6000000003684-2-tps-200-200.png'
            }  />
          <span style={{ marginLeft: '5px', color: '#FF6600' }}>chat now</span>
        </Alitalk>
      )}
    </div>
  );
};
export default Chat;

AliTalk IM 组件定义组件引用

直接引入 <Chat> 标签，一行代码即可：

<Descriptions style={{ marginBottom: 24 }} title="买家信息">
      <Descriptions.Item label="买家旺旺">
            <Chat uid={detailData?.data?.buyerAliTalkId} />
      </Descriptions.Item>
</Descriptions>

剩余60%，完整内容请点击下方链接查看：React组件封装实践：如何拆解复杂的页面-阿里云开发者社区

阿里云开发者社区，千万开发者的选择。百万精品技术内容、千节免费系统课程、丰富的体验场景、活跃的社群活动、行业专家分享交流，尽在：阿里云开发者社区-云计算社区-阿里云

网页开发过程中，我们有时会遇到HTML页面白屏的问题，即打开网页时页面显示空白，没有任何内容。这不仅令用户困惑，也使开发者头疼不已。本文将分享一些常见的HTML页面白屏问题解决方法，帮助你快速解决这个问题，让你的网页焕然一新！

第一步：检查HTML代码

首先，我们需要检查HTML代码是否正确。常见的错误包括标签未闭合、标签嵌套错误等。这些错误可能会导致页面无法正常显示。因此，仔细检查HTML代码，确保没有语法错误是解决白屏问题的第一步。

第二步：检查CSS文件

HTML页面的样式通常由CSS文件控制。如果CSS文件中存在错误或者无法正常加载，可能会导致页面白屏。我们可以通过以下步骤检查CSS文件是否存在问题：

1、检查CSS文件路径是否正确：确保CSS文件的路径正确，并且文件存在于指定的位置。可以通过浏览器开发者工具查看网络面板，检查CSS文件是否被成功加载。

2、检查CSS文件语法错误：使用CSS验证工具，如W3C CSS验证服务，检查CSS文件是否存在语法错误。如果存在错误，及时修复。

3、检查CSS选择器和样式规则：检查CSS文件中的选择器和样式规则是否正确。可能存在选择器与HTML元素不匹配或样式规则冲突的情况。可以通过逐个注释掉样式规则，逐步排查问题。

第三步：检查JavaScript代码

JavaScript代码也可能导致页面白屏。以下是检查JavaScript代码的步骤：

1、检查JS文件路径是否正确：与CSS文件类似，确保JS文件的路径正确，并且文件存在于指定的位置。通过浏览器开发者工具查看控制台面板，检查是否有JS文件加载错误的提示信息。

2、检查JS代码语法错误：使用JS语法检查工具，检查JS代码是否存在语法错误。如果有错误，及时修复。

3、检查JS代码逻辑错误：检查JS代码中的逻辑是否正确。可能存在变量未定义、函数未调用或者逻辑错误等问题。可以通过调试工具，如浏览器开发者工具中的调试器，逐步排查问题。

第四步：排查网络请求问题

如果前面的步骤都没有发现问题，那么可能是网络请求出现了问题。以下是一些排查网络请求问题的方法：

1、检查网络连接：确保你的设备已连接到互联网，并且网络连接稳定。

2、检查资源加载状态：通过浏览器开发者工具的网络面板，检查页面中的资源加载状态。可能存在资源加载失败或者超时的情况，导致页面白屏。

3、检查服务器配置：如果你使用了服务器端脚本语言，如PHP，检查服务器配置是否正确。可能存在服务器配置问题导致页面无法正确渲染。

第五步：优化页面性能

如果以上方法都没有解决问题，那么可能是页面性能问题导致白屏。以下是一些优化页面性能的方法：

1、压缩和合并文件：将CSS和JS文件进行压缩和合并，减少文件的大小和数量，提高页面加载速度。

2、使用缓存：利用浏览器缓存机制，将静态资源进行缓存，减少服务器的请求次数，提高页面加载速度。

3、异步加载资源：使用异步加载技术，如异步加载JS文件或使用延迟加载，减少页面加载时间。

4、减少HTTP请求：减少页面中的HTTP请求次数等。

结语：

通过以上五个步骤，我们可以逐步排查HTML页面白屏问题，并解决它们。不同的问题可能需要不同的解决方法，因此需要耐心和细心地分析和排查。在开发过程中，我们也要时刻关注页面性能，优化页面加载速度，提高用户体验。