本文翻译自Zell的博客——【Writing modular CSS (Part 1) — BEM】，原文地址：https://zellwk.com/blog/css-architecture-1/
BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。
这样的css编写效果就是传统的命名空间的方式写css，它很好得解决了编写单纯全局css互相影响的问题，但是另外一方面它也引申出了一些问题：
我听说很多开发者厌恶 CSS。而在我的经验中，这往往是由于他们并没有花时间来学习 CSS。 CSS 算不上是最优美的『语言』，但迄今二十多年来，它都是美化 web 举足轻重的工具。从这点来说，也还算不
一开始，Yandex公司推出的BEM，包括了规范以及其配套构建工具。如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为：
在“学习爱BEM”中，我要表明我对BEM语法的新感受。 我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。
如何写出一套可维护的CSS库？不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。
以前看过一些CSS的编码规范，也照着规范编写代码，但是还是觉得自己的CSS编码风格不是很好，在平时开发中使用各个知名的组件库的时候，发现现在挺多组件库都是BEM的命名风格了，于是找了比较知名的element饿了么前端的组件库的源码，想从看饿了么组件库的代码入手，学习学习大厂的的CSS BEM规范代码的书写风格。
在前端开发中，编写干净高效的代码可以使程序员变得更优秀。无论是个人项目、合作任务、敏捷开发项目还是求职测试项目，都很重要。开发者通常会忽视一个基本的部分，那就是实施CSS命名规范，有些人会在调试和管理庞大的代码库时才意识到糟糕的CSS代码有多可怕。无论你是否意识到，在编码测试或技术面试中，你的命名习惯都会传达关于你开发实践的信息。它们可以用来评估你的行为和效率。因此，在本文中，我们将展示CSS命名的最佳实践，以提高代码质量。通过阅读本文，读者应该清楚地了解CSS命名规范及其好处，并熟悉不同的样式命名约定。读者的最终目标是为他们提供可操作的见解和实用的建议，以便他们可以将这些规范应用到自己的开发工作流中，以编写更清晰、更高效的代码。
BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。命名约定的格式如下：
BEM（Block-Element-Modifier）是一种 CSS 模块化方法，旨在简化 CSS 编写并提高代码的可读性和可维护性，它将 HTML 元素划分为三个部分: 块（block）、元素（element） 和 修饰符（modifier）。
作者｜jaychen 原文｜https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552192&idx=1&sn=5342d6ea6d77
相信写css的人都会遇到下面的问题： 糟糕，怎么命名这个class，好像不太贴切，要是冲突了怎么办，要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问：这个class到底是只在这个地
SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。
第一，class跟id不一样，class本来就是设计用来可以重复利用的，而id才是设计唯一的（如果遵循BEM，class几乎也都是唯一的了）。
这句话你之前可能听过100次了。 原因是CSS中的一切都默认为全局的。如果你是一个C程序员你就知道全局变量不好。如果你是任何一种程序员，你都知道隔离和可组合的模块是构建可维护系统的关键。
本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 相信写css的人都会遇到下面的问题： 糟糕，怎么命名这个class，好像不太贴切，要是冲突了怎么办，要不要设计成通用一点... 而改别人css代码的时候则会一直有个疑问：这个class到底是只在这个地方用了，还是其他地方都用了？ 于是就有了下面的做法： 最后终于被逼出了个class，简洁也好，中英混搭也罢，看着一头雾水也没关系，反正最后页面显示出来的。 这个class应该是只有这个地方用到
说起 CSS 命名规范，大家应该都很熟悉，或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法，旨在帮助开发人员创建更好的且结构一致的 CSS 模块。
你也许听说过不下100 次了。因为在CSS中默认都是全局的申明。如果你是个C的程序员你知道全局变量是糟糕的。同时不管你是什么程序员，你该了解独立及可组合的模块是一个可维护系统的关键所在。
上文「前端工程四部曲」模块化的前世今生（上）中我们主要介绍了JS模块化相关的知识，对于JS模块化，相信很多人都不陌生，但说起CSS模块化，可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS，但CSS也是前端三剑客不可或缺的一部分，在编写CSS的时候，绝大多数人都是比较随意的，所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。
技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权 独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 独立运行时：每个子应用之间状态隔离，运行时状态不共享
本文翻译自Zell的博客——【Writing modular CSS (Part 2) — Namespace】，原文地址：https://zellwk.com/blog/css-architectu
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址: https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home
最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。
初级前端和高级前端有什么差别？在我看来，初级前端关注点在完成功能，高级前端能在完成功能的基础上，做的又好又快。做的好，就是代码质量高，做的快就是开发效率高。
在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔，以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔
一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。 eg： 例如，某个key 只能传递number类型， 你传递过来的是 string 类型， 这不就尴尬了。 // 正确做法 props: { status: { type: String, // 类型 required: true // 必填 } }
刚入行前端的时候，看见了百度的前端代码规范，到现在只是其中的几个点一直有在注意。有兴趣可以看看： 百度前端编码规范
前言 代码质量不仅适用于后端的Java或C语言，它也适用于CSS。继续阅读，了解如何编写出色的CSS！ 编写基本的CSS和HTML是我们作为Web前端开发人员学习的第一件事情之一。然而，我遇到过很多的应用都没有人花时间真正考虑前端开发的长久性和可维护性。 我认为这主要是因为许多开发人员对CSS / HTML和JavaScript的长久维护缺乏深刻的理解。但是对于团队来说，编写可维护的前端代码是非常重要的。 这篇文章的目的不在于规则手册，而在于您正在编写CSS时，更多的是要考虑事物的指南。我鼓励你找到你自
有效且结构良好的文档是添加样式的基础。上一章，我们一起学习了相关的知识。现在是时候学习一下如何添加样式了。
最近公司活多，好长时间没有精下心来写文章了。公司刚分配了一个活，这个活是外包过来的，项目整体结构非常差，理解起来费劲。面对这种项目只能硬着头皮上了。
在处理NGS数据时，经常要对BED文件进行排序。假设BED文件长这样，分隔符是’\t’：
近期学习了一下大厂h5开发实战内容，并且参考实战手册做一些记录。大概包括以下几个方面内容：
本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特性：
这篇文章是我在6年前刚进鹅厂时写的，虽显青涩，但不乏干货，其中的一些前端小技巧，在当时也帮助不少人打开视野，解决实际问题。这次翻出来重新润色，并对已过时的知识进行更新和补充，希望依然能帮到你们，尤其是刚入门的前端工程师。
继 精读《请停止 css-in-js 的行为》 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。
CSS布局经常是令前端开发者头痛的一块工作。但是近几年来，浏览器不断发展，开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。我们将深入了解这些新属性的特征，新时代的布局技巧、例子及最佳实践。希望听众会有所启发，利用这些新的CSS属性创造更符合浏览器本质的设计。
TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系，于2021年12月底正式对外开源。TDesign 用到了哪些广受欢迎的开源技术，选择这些技术的原因是什么？TDesign 官方支持了众多开发技术栈，为什么选择各仓库原生开发而不是转译生成代码？本篇会从从仓库目录结构开始，通盘分析 TDesign 的技术选型和原因。
CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点：
让我们开门见山：编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行，但是 CSS 还是算了吧。
::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。
为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：
始终基于模块的方式来构建你的 app，每一个子模块只做一件事情。Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子：
前端工程师最常见且最具挑战性的问题之一是 CSS 命名约定。随着 Block Element Modifier（BEM）方法的流行，许多人习惯于按照一种可维护的模式组织他们的样式。
其实在日常开发CSS当中，会遇到许多的问题，使用设计模式能够很好的解决。例如在日常开发项目，需要组件化时，组件内部的class样式类管理就非常的杂乱。 大部分公司的命名规则还是只有大小驼峰、使用英文等这些基础的命名规则。经常会自己都忘了自己命名的css是啥，使用设计模式就能很好的解决该问题。
CSS3选择器分为：结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素
脑磁图(MEG)与基于限带功率包络相关的静息状态功能连接(rsFC)联合使用，可以研究人类大脑内在网络所组成的静息状态网络(RSNs)。然而，目前MEG系统的可用性有限，阻碍了电生理rsFC的临床应用。在这里，我们直接比较了已知的RSNs以及全脑rsFC连接体及其状态动力学，这些数据来源于同时记录的MEG和高密度头皮脑电图(EEG)静息状态数据。通过比较头部边界模型和头部有限元模型的结果，研究了头部模型精度对脑电rsFC估计的影响。结果显示，除额顶叶网络外，MEG和EEG获得的RSN图大部分相似。在连接体水平，与脑电图相比，MEG对额部rsFC的敏感性较低，而对顶枕部rsFC的敏感性较高。这主要是由于脑磁图传感器相对于头皮位置的不均匀性，当考虑相对脑磁图传感器位置时，显著的脑磁图差异消失了。在区分灰质和白质的脑电图中，默认网络是唯一需要高级头部建模的RSN。重要的是，rsFC状态动力学的比较证明了MEG和头皮脑电图之间的较差的对应关系，表明了对瞬态神经功能整合的不同成分的敏感性。因此，这项研究表明，基于人脑连接体的静态rsFC研究可以以类似于MEG的方式在头皮脑电图中进行，为rsFC分析的广泛临床应用开辟了道路。本文发表在NeuroImage杂志。。
领取专属 10元无门槛券
手把手带您无忧上云
