在scss中注释模块结构

一般来说,有重构的团队,工作流程是这样的:设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 ...这样我们总是有静态页面在备份的,下次遇到修改什么的或者换一个人,还是可以由这个简单的静态页面熟悉下html结构。

而没有重构或一个人一条龙服务的,那就是:设计师出稿 > 边写页面边拉取数据实现交互...这种模式下,是不存在静态页面备份的,如果碰到修改什么或者换人,那看到的直接就是源代码中的各种逻辑判断,如果是你自己写的代码那恭喜你,如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧,当然最后还是免不了各种bug。

最近因为改版一个模块,所以想去改善下这种方式,经过各种弯路,最后选择在scss文件中注释html结构。因为scss是按模块组织文件的,一个模块一个scss文件,所以这是非常合适的。

腾讯课堂课程卡片模块为例:

可以看出这个模块存在几种逻辑判断,每种都有些小差异,如果另外一个地方要用到这个卡片或者略做修改,你要从线上扒html结构的话,要想扒出个齐全的逻辑还是比较困难的,而如果让你去阅读源码,里面各种判断输出也够头大的。

下面为我在scss文件中注释的结构:

是不是结构清晰明了,各种逻辑判断一目了然

简单说下该注释方法:

  • 以emmet书写方法为骨架
  • ()表示特殊化追加的class,[]表示需要的属性,{}表示标签内的文本内容
  • 单行判断采用单行注释法,以if开头
  • 多行判断采用if,else,end if

当然这中方法也有局限性,但是用在以模块化开发的scss文件中却是再好不过。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏*坤的Blog

phpmyadmin安全预防

之前服务器总是本人黑,千疮百孔,只能一步步的去做一些安全防范,如何防范自然先从如何渗透开始.

14630
来自专栏Rainbond开源「容器云平台」

【技能】学会了它,你就可以轻松泡妹子了!

16240
来自专栏FreeBuf

一种会话劫持技术通杀全部Windows版本,但这真的是漏洞吗…

大家知道本地系统访问权限的Windows用户可以重置其他用户的密码,但其实,本地权限用户还可以劫持其他用户的会话呢,包括管理员用户,而这个过程不需要知道用户密码...

24950
来自专栏Netkiller

Linux Token Auth 一次性密码认证

Linux Token Auth 一次性密码认证 http://netkiller.github.io/journal/token.html 目录 1. 什么是...

45250
来自专栏java一日一条

Nginx引入线程池 性能提升9倍

正如我们所知,NGINX采用了异步、事件驱动的方法来处理连接。这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作...

9810
来自专栏Youngxj

[免费域名]免费撸.tk、.ml、.gq、.ga、.cf域名亲测教程

5.9K70
来自专栏jeremy的技术点滴

开发者的博客写作环境

29870
来自专栏编程

如何将py单个文件及py工程生成exe?

如何将py单个文件及py工程生成exe?有时候我们想把代码打包起来,类似java打成jar一样,供别人去使用 ,今天小编来写写。 其实我们可以使用pyinsta...

223100
来自专栏Coding01

推荐一个 PHP 网络请求插件 Guzzle

在写后台代码时,避免不了需要与其他第三方接口交互,如向服务号下发模板消息,有时可能需要下发超过 10 万条。这时不得不考虑使用异步和「多线程」的网络请求。

44150
来自专栏编程坑太多

『高级篇』docker之了解kubernetes(31)

PS:(梳理概念)pod里面包括N个容器,service里面包括pod,Deployment可能包括service或者是pod。

16240

扫码关注云+社区

领取腾讯云代金券