html&css开发规范

BEM规范BEM是什么?BEM包含的内容Block特点例子Block使用指南嵌套例子Element特点例子Element使用指南嵌套例子嵌套例子从属性例子从属性例子可选性例子我应该创建Block还是Element?创建Block创建ElementModifier特点Modifier的分类1.布尔类型例子1.Key--Value类型例子Modifier使用指南不能脱离Block或者Element独立使用例子Mix特点例子 BEM是什么? BEM (Block, Element, Modifier)是一个基于组

最近团队要考虑代码风格统一Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线：双下划线用来连接块和块的子元素_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。

BEM风格规范指的是 Block、Element、Modifier 这三者的简称，这个规范将 CSS 拆分成块、元素、修饰符，根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢？如果我们想制作一个组件的新样式，比如改个字体/背景色，可以很容易地看到有哪些样式项已经存在，只需要新增一个修饰符即可，甚至可能意识到一开始就不需要编写任何样式，有一个预先存在的修饰符可以满足我们的需求。

BEM是一种命名约定，旨在使CSS代码具有更好的可读性和可维护性。块（Block）：块是页面上具有独立功能的可重用组件。可以将块视为页面上的一个模块，它可以包含其他块或元素。块的类名以一个描述性词汇作为前缀，使用连字符进行连接，例如：.block。元素（Element）：元素是块的组成部分，它们不能独立存在，并且具有与块相关的语义。元素的类名由块的类名作为前缀，使用双下划线连接，例如：.block__element。修饰符（Modifier）：修饰符用于改变块或元素的外观、状态或行为。

BEM（块、元素、修饰符）是CSS命名规范，通过双下划线（__）连接块与元素，双短横线（--）表示修饰符。作者建议扩展为BEMS，增加"State"状态类（如is-disabled）。BEM优势在于提高代码可读性和避免样式冲突，特别是在Vue父子组件中能防止样式继承问题。文中通过电商商品列表案例，展示了父组件（App.vue）容器和子组件（Child.vue）卡片如何应用BEM命名，确保样式隔离和组件化开发。实践表明BEM能有效解决作用域冲突问题。

1、什么是 BEM 命名 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介。Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 1.1 命名模式 block {}，block ...

BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。

CSS BEM 规范解读

BEM规范学习 在实际项目中，经常可以看到以下类似这样的css样式，这种就是CSS命名规范——BEM思想 BEM 是块（block）、元素（element）、修饰符（modifier）的简写 主要缺点就是命名很长 __和--的区别 __表示的就是下级元素 --表示的是不同的形态 就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式 &符号表示嵌套的上一级 之所以是两个连接符和

css开发规范 1.命名空间规范 1.布局容器：以g为命名空间，列如：.g-warp , .g-header, .g-content 2.工具：以u为命名空间，表示不耦合业务逻辑的，可复用的工具，列如：u-clearfix , .u-ellipais。 3.为选择起添加状态前缀 有时候可以给选择起添加一个表示状态的前缀，让语义明了。比如如下图添加了“.is-”前缀。 2.css书写顺序 位置 大小 文字 背景 其他 3.中横线（-） g-container （正确写法） g_container （错误

做BEM规范的一个好处就是在维护或者debug的时候，开发者可以根据这种规范化的命名快速找到对应的css代码。BEM 的命名约定通常是通过块__元素–修饰符（如 block__element–modifier）来命名 CSS 类，以清晰地表达一个元素的层级结构和状态。BEM 架构有助于提高前端代码的可维护性和可重用性，减少选择器的嵌套，避免选择器的冲突，并提供更清晰的命名结构，使得代码更易于阅读和理解。：块是一个独立的实体，它在页面中有自己的意义并且可以独立存在。：元素是块的一部分，没有独立的意义。

在前端开发中，随着项目规模的扩大，CSS代码的组织和维护变得越来越具有挑战性。开发者常常面临类名冲突、样式覆盖、代码难以维护等问题。为了解决这些问题，各种CSS命名规范和方法论应运而生，而BEM（Block-Element-Modifier）作为其中最流行和实用的方法一，被越来越多的开发团队所采用。接下来我就将带大家学习BEM命名规范，编写出更加模块化、可维护的前端代码。BEM是Block（块）、Element（元素）、Modifier（修饰符）的缩写，是一种基于组件的Web开发方法论。

一、 基本规范 1.1 缩进使用两个空格 ⭐⭐ 1.2 每个声明块的左花括号前添加空格 ⭐⭐⭐ 1.3 声明块的右花括号必须单独成行 ⭐⭐⭐ 1.4 每个声明语句：后应该添加一个空格，前面不需要 ⭐⭐⭐ 1.5 所有语句都要以分号结尾 ⭐⭐⭐ 二、 选择器规范 2.1 选择器分组时，每一个单独成一行 ⭐⭐ /** bad */ .name, .des { font-size: 16px; } /** good */ .name, .des { font-size: 16px; } 2.2 为选

CSS编程规范

一. 规范概述 规范是明文规定或约定俗成的标准，规范的制定，表明我们选择一种标准来完成某些事情，这个标准可能更好、更快、更简单等等。而CSS规范的制定，目的在于： ​ 形成固定的代码风格 选择合适的CSS解决方案 ​ 提高协同开发的便捷性​​​​​​ 二. CSS书写规范 格式与排版 缩进 使用4个空格代替tab来进行缩进，类似Atom的编辑器可以设置。以保证在所有环境下获得一致展...

BEM的意思是块（block）,元素（element）,修饰符（modifier） 一、Why? 为什么要有BEM规范呢？因为我们经常写CSS的时候，命名按照日常业务逻辑来命名，在后期修改或者维护的时候，除了非常了解那个HTML元素和逻辑，不然很不易读和维护； 错误示范： 二、How? 1、用"-" 代表块； 2、用"__" 代表某个块下面的子元素； 3、用"–" 来修饰某个块或者元素的状态； .person{}/* 块 */ .person-tall{}/* - :块 */ .person