打造前端利器之从BEM到Stylus

前言：

作为一名前端开发者，我们时刻追求更高效的工作方式和更优雅的代码风格。在本文中，我将分享一些前端开发的利器，包括BEM命名风格、Stylus样式预处理器，这些工具和技术不仅能提高开发效率，还能使你的代码更加模块化和易维护。

1. 先结构，后样式：BEM（国际命名风格）

在前端开发中，良好的命名规范是代码可读性和可维护性的关键。BEM（块、元素、修饰符）是一种广泛使用的国际命名风格，通过规范化命名，使得样式的组织更加清晰。例如：

/* BEM命名示例 */
.block {
  /* 块级样式 */
}

.block__element {
  /* 元素级样式 */
}

.block_modifier {
  /* 修饰符样式 */
}

2. Stylus样式预处理器

为了更高效地书写CSS，我们可以使用Stylus，一个功能强大的CSS预处理器。通过简洁的语法和嵌套规则，Stylus能够极大地提高开发效率。安装Stylus的命令如下：在vscode终端上运行如下代码npm i -g stylus

stylus --version 查版本号，查得到版本号，就说明已经安装好了

然后在vscode里下载一个stylus的插件

• stylus 是css的超集 可以省去 ：；{} 提高效率
• 一切以tab 缩进为准
• stylus嵌套 BE里写样式的时候，自动补全CSS前缀

创建一个.styl类型的文件，这里以common.styl为例

.page_ft
        display: flex
        padding-top: 0.59rem
        margin-bottom: 0.259rem
        font-size .46rem
        color: white
        .page_call
            flex: 1
            margin-left: 0.25rem
        .page_cannel
            width 1.88rem

在终端输入stylus -w common.styl -o common.css 命令，在写styl文件的同时可以帮你自动生成css文件，按ctrl+s保存时生效，保存一次写入一次，ctrl+c终止退出

生成的css文件如下

.page .page_ft {
  display: flex;
  padding-top: 0.59rem;
  margin-bottom: 0.259rem;
  font-size: 0.46rem;
  color: #fff;
}
.page .page_ft .page_call {
  flex: 1;
  margin-left: 0.25rem;
}
.page .page_ft .page_cannel {
  width: 1.88rem;
}

在开发过程中利用stylus进行辅助开发，开发效率将会大大提高，你学会了吗