前端页面开发之专业性
1. 先结构，后样式
1.1 BEM 使用起来
BEM (Block Element Modifier)是一种命名约定，有助于在前端开发中创建可维护和可扩展的样式。按照 BEM 的规范，我们将页面分为块（Block）、元素（Element）、修饰符（Modifier）三种元素，有助于清晰地定义页面结构与样式。
1.2 page + hd/bd/ft
页面划分为头部（hd）、主体（bd）、底部（ft）等模块，以提高代码的组织性和可读性。
2. npm i -g stylus
2.1 node 是全栈 js 的命令行，后端 开发
Node.js作为JavaScript的运行环境，使得JavaScript可以在服务器端运行，实现全栈开发。
2.2 npm 是node的包管理器
npm（Node Package Manager）用于管理和分发Node.js模块，简化了项目的依赖管理。
2.3 stylus 包是用来提升css开发速度
Stylus是一种CSS预处理器，通过简化语法、支持变量等功能提高CSS代码的开发效率。
2.4 i install 的简称
在npm中，i是install命令的简称，用于安装依赖包。
2.5 -g 全局
通过-g参数安装stylus全局，使其可在命令行任何位置调用。
2.6 stylus --version
通过该命令查看stylus的版本信息。
3. common.styl .styl后缀
3.1 stylus 是css的超集 省去 ：；{} 提高效率
Stylus是CSS的超集，支持简洁的语法，省略了冒号、分号和大括号，提高了代码的可读性和编写效率。
3.2 tab 缩进
采用tab缩进风格，保持代码的一致性和整洁。
3.3 失败，重新运行 stylus -w common.styl -o common.css
使用-w参数，监听common.styl文件的改变，并自动重新编译生成common.css。
3.4 stylus嵌套
在Stylus中支持样式的嵌套，有助于组织和结构化样式表，同时能够自动补全CSS前缀。
像这样，是不是非常方便。
记得下载stylus插件
4. stylus 的功能
4.1 支持变量
Stylus支持变量，这使得在样式中定义和使用颜色、尺寸等变量变得更加方便，提高了可维护性。
5. 阿里的适配神器 flexible.js
5.1 移动端不要用px 绝对单位。用rem vw/vh 相对单位
在移动端开发中，避免使用绝对单位px，而是使用相对单位rem、vw和vh，以适应不同屏幕尺寸。
5.2 1rem = html font-size
通过设置html元素的font-size为1rem，实现相对单位的统一。
5.3 不同的手机 html font-size 会去设置，不一样
不同手机的屏幕尺寸和分辨率导致html font-size设置不同，需要进行适配。
5.4 iPhone 是设计稿的标准尺寸 375pt 750px 414pt
以iPhone为设计稿标准，设置不同屏幕的html font-size，确保适配。
6. 移动端适配手写
6.1 立即执行函数，不影响外界的把功能完成了
使用立即执行函数，确保功能完成时不影响外部环境。
6.2 1rem = 屏幕宽度 / 10 兼容所用手机宽度
通过计算屏幕宽度，实现1rem等于屏幕宽度除以10，以兼容不同手机宽度。
6.3 设计稿上 750px = 2*350pt Photoshop px单位的
设计稿上的750px相当于2倍iPhone设计稿的350pt。
6.4 onresize
通过监听窗口大小变化事件onresize，实时调整适配参数。
6.5 dry 设计模式原则 封装，复用
遵循DRY（Don't Repeat Yourself）设计原则，封装适配逻辑，提高代码的可维护性和复用性。
6.6 DOM 性能不太好 缓存dom元素
由于DOM操作性能相对较低，建议缓存DOM元素以减少操作次数。
6.7 script标签 src属性加载一个资源，同步，会阻塞html 的下载进程，一定要放在头部，放在css之前
通过将script标签的src属性放在头部，确保资源同步加载，避免阻塞HTML的下载进程，尤其要在CSS之前加载。
