前端开发-快速编写页面样式的进阶技巧

目录

首先，在写html、wxml时，带上样式类名

然后，利用vscode插件【CSS Tree】，来快速生成对应的类名

最后，对照着html格式，来写样式文件

---

对于俺这种木得票子的打工仔，缺少扩展显示器等外设，写代码、切文档、改样式需要反复缩放界面，很烦~

总结一些开发中的技巧，提升开发速度和开发舒适度

首先，在写html、wxml时，带上样式类名

就像这样，在构建html的时候就同时把样式类名写好，静态页面编写的时候，可以随便写一些填充内容来占位

例如：想要下面这样的效果，就先搭建静态页面，写好样式名称，为后续的样式修改打基础

现在因为没有编写css样式，所以内容很乱，但是没关系，接下来就进行样式的编写，以达到想要的样式效果

然后，利用vscode插件【CSS Tree】，来快速生成对应的类名

 如何使用【CSS Tree】请参考我的另一篇博客：(1条消息) vscode插件使用留底_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120058093按下我设置的快捷键【ctrl + alt + p】，生成选中html的对应css内容

•  因为这个插件生成的内容是 嵌套 的  所以要开发者使用less或者sass来编写样式文件【详细如何使用less来生成css、wxss请参考我的另一篇博客：(1条消息) Easy LESS的基础使用_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120288835】
• 生成内容中的view指<view>标签，留着不会影响样式的指向效果，如果觉得不美观要删掉，可以通过【ctrl+shift+L】来选中所有的view，然后【shift+home】同时多选所有view字符，再一起del删除掉，就可以了。关于vscode快捷键的使用，可以参考我另一篇博客：(1条消息) vscode快捷键多行批量操作_五速无头怪的博客-CSDN博客_vs多行注释快捷键https://blog.csdn.net/black_cat7/article/details/120269742
• 有时候会生成出一些undefined，自己手动删除即可

 最后，对照着html格式，来写样式文件

【ctrl + \ 分窗显示】 这样左右就能对照着改了，加上样式就有上面的效果了

 这样就能得到想要的前端样式效果了，开发速度比一个个类名复制粘贴，反复缩放快很多。