BEM 使用起来
很多人不晓得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/bd/ft" 是一种简化的命名约定，常用于网页布局中。下面是对这些缩写的解释：
- page：页面的整体容器，表示整个页面的最外层包裹元素。
- hd：代表页头（header），用于放置页面的标题、导航栏等顶部内容。
- bd：代表页体（body），用于放置页面的主要内容，如文章、图片、表格等。
- ft：代表页脚（footer），用于放置页面的底部内容，如版权信息、联系方式等。
这种命名约定的好处是简洁明了，可以快速理解页面的结构和布局。通过将页面划分为页头、页体和页脚，可以更好地组织和管理页面的各个部分，提高代码的可读性和可维护性。
更好的使用工具（stylus插件）
，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 文件，并在其中编写样式规则：
css
// common.styl
$primary-color = #ff0000
body
font-family Arial, sans-serif
background-color $primary-color
h1
color white- 打开终端，进入 common.styl 文件所在的目录，运行以下命令：
css
Copy Code
stylus -w common.styl -o common.css 这将启动 Stylus 监听模式，并将 common.styl 文件编译为 common.css 文件。每当你在 common.styl 文件中进行更改时，Stylus 将自动重新编译 common.css 文件，以反映出最新的样式更改。 请注意，为了运行上述命令，你需要先在全局范围内安装 Stylus，可以使用 npm i -g stylus 命令进行安装。
stylus的优点
Stylus 作为一种 CSS 预处理器，在实际开发中有以下几个优点：
- 更加简洁、优雅的语法：Stylus 的语法比原生 CSS 更加简洁，可以让我们更快地编写样式规则，同时保持代码的可读性和可维护性。
- 变量和函数支持：Stylus 支持变量和函数，可以提高样式表的重用性和可维护性。通过使用变量和函数，我们可以在整个样式表中轻松更改颜色、字体等属性，而无需手动修改每个样式规则。
- 混合（Mixins）支持：Stylus 的混合功能允许我们将一个样式规则集合包装在一个可重用的块中，并将其应用于多个元素。这可以大大简化样式表的编写，并减少重复代码。
- 自动前缀处理：Stylus 可以自动添加适当的浏览器前缀，以确保样式规则在不同的浏览器中得到正确的渲染。
- 非常灵活的配置：Stylus 提供了非常灵活的配置选项，可以根据项目的需要启用或禁用不同的功能，例如自动压缩、源映射等。
总之，Stylus 通过提供更加简洁、灵活的语法和功能，可以使我们更加高效地编写 CSS 样式表，并提高代码的可重用性和可维护性。
最后一个大招阿里的适配神器 flexible.js
flexible.js 是一款由阿里巴巴的前端团队开发的移动端适配解决方案。它通过对 Viewport 的缩放和 rem 单位的使用，实现了在不同设备上的自适应布局。
具体来说，flexible.js 主要包括以下几个步骤：
- 根据屏幕的宽度计算出一个缩放比例，并将该值设置到 Viewport 的 meta 标签中。
- 计算出 1rem 对应的像素值，并将其动态设置到 HTML 元素的 font-size 属性中。
- 在 CSS 中使用 rem 单位来定义样式规则。这些规则会自动根据 HTML 元素的 font-size 属性进行适配。
通过这种方式，我们可以实现在不同设备上的自适应布局。具体来说，我们只需要在 CSS 中使用 rem 单位来定义样式规则，而不需要关注具体的像素值。当页面在不同设备上打开时，flexible.js 会自动根据屏幕宽度和像素密度等信息进行适配，从而保证页面的布局和样式在不同设备上都可以得到正确的显示。
需要注意的是，flexible.js 并不能完全解决移动端适配的所有问题，还有一些特殊情况需要我们手动处理。例如，一些图片或者 Canvas 等元素可能需要根据不同设备的像素密度进行缩放，而这些操作需要我们手动实现。不过，flexible.js 可以帮助我们简化移动端适配的工作，提高开发效率。
下期我来教大家手动写适配器 喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期在见 拜拜