很多人不晓得BEM是什么东西 我来解释给你们听

  BEM是一种前端开发的命名方法论，全称为Block-Element-Modifier，中文翻译为块、元素、修饰符。BEM的主要思想是将页面分解成多个可重用、独立的模块，每个模块由一个主块（Block）和零个或多个元素（Element）组成，可以使用修饰符（Modifier）来描述模块的不同状态和变化。

BEM的命名规则如下：

• 块（Block）：一个独立的、可重用的组件，通常由一个或多个元素组成，并且有一个命名空间作为标识符。通常以单个单词命名，使用连字符分割单词，例如：menu、button、header等。
• 元素（Element）：块的组成部分，不能独立存在，必须隶属于某个块。元素的命名使用两个连字符“__”与块名分隔，例如：menu__item、button__text、header__logo等。
• 修饰符（Modifier）：描述块或元素的某种状态或变化，以单个单词或多个单词组成，使用两个连字符“--”与块或元素名分隔。例如：menu--horizontal、button--disabled、header__logo--small等。

  通过使用BEM命名方法论，可以实现更好的代码复用性、可维护性和可扩展性。BEM的命名规则清晰明了，易于理解和使用，可以有效地提高团队开发效率和代码质量。

"page+ hd/bd/ft" 是一种简化的命名约定，常用于网页布局中。下面是对这些缩写的解释：

• page：页面的整体容器，表示整个页面的最外层包裹元素。
• hd：代表页头（header），用于放置页面的标题、导航栏等顶部内容。
• bd：代表页体（body），用于放置页面的主要内容，如文章、图片、表格等。
• ft：代表页脚（footer），用于放置页面的底部内容，如版权信息、联系方式等。

  这种命名约定的好处是简洁明了，可以快速理解页面的结构和布局。通过将页面划分为页头、页体和页脚，可以更好地组织和管理页面的各个部分，提高代码的可读性和可维护性。

，Stylus 是一种 CSS 预处理器，它允许你使用更加简洁、优雅的语法编写 CSS。通过在命令行中运行 npm i -g stylus 命令，你可以在全局范围内安装 Stylus，并开始使用它来编写样式文件。 .styl 是 Stylus 文件的扩展名，你可以使用 Stylus 编写样式规则。然后，你可以将这些编写好的 Stylus 文件转换为普通的 CSS 文件，以便在网页中使用。

  具体地说，你可以创建一个名为 common.styl 的文件，并在其中编写 Stylus 样式规则。然后，通过运行 stylus -w common.styl -o common.css 命令，你可以让 Stylus 监听 common.styl 文件的变化，并自动将其编译为 common.css 文件。

  以下是一份示例代码来说明这个过程：

// common.styl

$primary-color = #ff0000

body
font-family Arial, sans-serif
background-color $primary-color

h1
color white

2. 打开终端，进入 common.styl 文件所在的目录，运行以下命令：

1. 更加简洁、优雅的语法：Stylus 的语法比原生 CSS 更加简洁，可以让我们更快地编写样式规则，同时保持代码的可读性和可维护性。
2. 变量和函数支持：Stylus 支持变量和函数，可以提高样式表的重用性和可维护性。通过使用变量和函数，我们可以在整个样式表中轻松更改颜色、字体等属性，而无需手动修改每个样式规则。
3. 混合（Mixins）支持：Stylus 的混合功能允许我们将一个样式规则集合包装在一个可重用的块中，并将其应用于多个元素。这可以大大简化样式表的编写，并减少重复代码。
4. 自动前缀处理：Stylus 可以自动添加适当的浏览器前缀，以确保样式规则在不同的浏览器中得到正确的渲染。
5. 非常灵活的配置：Stylus 提供了非常灵活的配置选项，可以根据项目的需要启用或禁用不同的功能，例如自动压缩、源映射等。

1. 根据屏幕的宽度计算出一个缩放比例，并将该值设置到 Viewport 的 meta 标签中。
2. 计算出 1rem 对应的像素值，并将其动态设置到 HTML 元素的 font-size 属性中。
3. 在 CSS 中使用 rem 单位来定义样式规则。这些规则会自动根据 HTML 元素的 font-size 属性进行适配。