在scss中注释模块结构

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

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

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

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

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

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

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

简单说下该注释方法:

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏熊二哥

React快速入门

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

2038
来自专栏大数据钻研

前端面试那些坑

HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有...

3146
来自专栏猿湿Xoong

一个bit一个bit的进行 Base64 白话科普,看不懂算你输

954
来自专栏Google Dart

AngularDart 4.0 高级-管道 顶

每个应用程序都以一个简单的任务开始:获取数据,转换它们,并将它们展示给用户。 获取数据可以像创建本地变量一样简单,也可以像通过WebSocket传输流数据一样复...

562
来自专栏IMWeb前端团队

如何在前端编码时实现人肉双向编译

本文作者:IMWeb yisbug 原文出处:IMWeb社区 未经同意,禁止转载 如何在前端编码时实现人肉双向编译 React+flux是目前最火的前...

1785
来自专栏ThoughtWorks

前端不止:Web性能优化 - 关键渲染路径以及优化策略

我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?”

882
来自专栏编程

灵活的 overflow

来源: 大漠 https://www.w3cplus.com/css/flexible-overflow.html 说到对于CSSer而言并不会陌生,用来控制内...

18610
来自专栏撸码那些事

【封装那些事】 未利用封装

1434
来自专栏撸码那些事

【封装那些事】 未利用封装

客户代码使用显式类型检查(使用一系列if-else或switch语句检查对象的类型),而不利用出层次结构内已封装的类型变化时,将导致这种坏味。

3899
来自专栏WeTest质量开放平台团队的专栏

【《Effective C#》提炼总结】提高Unity中C#代码质量的21条准则

我们知道,在C++领域,作为进阶阅读材料,必看的书是《Effective C++》。 而《Effective C#》之于C# ,是类似《Effective C+...

933

扫码关注云+社区