在scss中注释模块结构

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

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

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

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

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

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

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

简单说下该注释方法:

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云技术沙龙

黄文俊:Serverless架构及场景介绍

大家好,自我介绍一下,目前我是腾讯云无服务器云函数产品负责人。我做了很多年后端开发。今天是从一个程序员角度讲解一下我们怎么样用Serverless架构。

2476
来自专栏java、Spring、技术分享

从零开始学架构读书笔记

  软件架构的出现是为了解决系统规模增加后出现了系统耦合严重,开发效率低,逻辑复杂,扩展困难等问题。所以架构设计是为了解决软件复杂度而存在的,所以架构设计的目地...

1104
来自专栏张善友的专栏

C#动态编译引擎-CS-Script

什么是CS-Script? CS-Script是一种以CLR(公共语言运行库)为基础的脚本系统,它使用ECMA标准的C#作为编程语言,它面向微软的CLR运行库(...

1866
来自专栏Java架构师历程

微服务架构是什么

架构师在软件行业一直有很高的位置,并且在开会中的架构师都带有主角光环。 架构师是可以说是软件的设计者,运用我们学会就会忘记的23种设计模式、企业架构模式、面向对...

732
来自专栏web前端教室

web前端架构-新一次的尝试机会

上一家电商公司烧了半年,有点烧不动了,我就赶紧跑了。 感谢上一家电商公司,让我有机会操刀搞了一次电商交易类网站的架构体验。 这次换了一家公司,做语音媒体的。就是...

1849
来自专栏纯洁的微笑

Spring Cloud在国内中小型公司能用起来吗?

今天吃完饭休息的时候瞎逛知乎,突然看到这个一个问题《Spring Cloud在国内中小型公司能用起来吗?》,吸引了我的注意。仔细的看了题主的问题,发现这是一个好...

36913
来自专栏Java帮帮-微信公众号-技术文章全总结

【大牛经验】千万级并发实现的秘密

千万级并发实现的秘密 先解释一下什么是10k问题: 什么是 10K 问题? 在 1999 年,Dan Kegel 向网络服务器提出了一个骇人听闻的难题: 是时候...

3815
来自专栏CSDN技术头条

微博广告推荐中有关Hadoop的那些事

一、背景 微博,一个DAU上亿、每日发博量几千万的社交性产品,拥有庞大的数据集。如何高效得从如此规模的数据集中挖掘出有价值的信息,以增强用户粘性,提高信息传播速...

1875
来自专栏码神联盟

架构 | 目前在企业架构中流行的技术

软件开发技术日新月异,流行的技术三五年就换一茬,目前在企业架构中都流行哪些技术呢? Spring Boot 采用约定优于配置的原则实现的一个可以快速搭建项目的...

3218
来自专栏较真的前端

把前端监控做到极致 [含分享现场视频]

1654

扫码关注云+社区