在scss中注释模块结构

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

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

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

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

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

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

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

简单说下该注释方法:

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏*坤的Blog

phpmyadmin安全预防

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

953
来自专栏性能与架构

LinkedIn 即时通信系统的优化

前言 LinkedIn 的即时通信系统目前单台机器可以处理数十万的持久连接,这是不断调优的结果。 最近,他们在官网博客中发布了优化过程,介绍了即时通信系统的技术...

3168
来自专栏编程

当你在 Linux 上启动一个进程时会发生什么?

英文:Julia Evans,编译:Linux中国 / jessie-pang linux.cn/article-9256-1.html 本文是关于 fork ...

1837
来自专栏FreeBuf

利用雅虎小型企业服务平台的目录遍历漏洞查看客户的信用卡信息

在这篇文章中,我将跟大家介绍如何利用雅虎小型企业服务平台的目录遍历漏洞查看客户的信用卡信息。在过去的一年半时间里,我一直都在对雅虎平台的安全性进行分析,而本文所...

2417
来自专栏布尔

后rtx集成时代

基本结构:客户端向服务器发送命令(如给目标rtx号码发送提醒、短信、访问组织和用户信息等)。 ? 1.首先要把原生API做一个基础接口封装,将RTXSDK内部的...

20610
来自专栏琯琯博客

awesome-sysadmin-cn资源

系统管理员 资源列表,内容包括:备份/克隆软件、云计算/云存储、协作软件、配置管理、日志管理、监控、项目管理 备份 备份软件 Amanda:客户端-服务器模型备...

51412
来自专栏JAVA高级架构开发

高可用 Redis 服务架构分析与搭建

基于内存的Redis应该是目前各种web开发业务中最为常用的key-value数据库了,我们经常在业务中用其存储用户登陆态(Session存储),加速一些热数据...

1350
来自专栏Netkiller

Linux Token Auth 一次性密码认证

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

3945
来自专栏jeremy的技术点滴

开发者的博客写作环境

2747
来自专栏Coding01

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

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

2685

扫码关注云+社区