专栏首页IMWeb前端团队在scss中注释模块结构

在scss中注释模块结构

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

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

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

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

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

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

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

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

简单说下该注释方法:

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在scss中注释模块结构

    一般来说,有重构的团队,工作流程是这样的:设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 ...这样我们总是有静态页面在备份的,下次遇到修改什么...

    IMWeb前端团队
  • 编写graphql服务

    graphql用一种高效清晰的规范来替代目前正流行的RESTful架构。通过灵活的结构化查询语言让查询更高效,静态类型和规范提升前后端联调效率。作为一名前端我非...

    IMWeb前端团队
  • React入门心得及使用tips

    1 前言 React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开...

    IMWeb前端团队
  • 在scss中注释模块结构

    一般来说,有重构的团队,工作流程是这样的:设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 ...这样我们总是有静态页面在备份的,下次遇到修改什么...

    IMWeb前端团队
  • Linux本地信息收集

    我们在获取到webshell之后,经常会遇到Linux的操作系统,这是我们需要对Linux系统本地的敏感资源进行信息收集,下面就是一些有用的信息获取方式。

    信安之路
  • 前端架构探索与实践

    从思考、到探索、到脚手架的产生,后面经过一系列的项目开发,不断优化和改良。目前已经成功应用到房产中间页(改名天猫房产)中。这里,做一下总结。

    Nealyang
  • 【项目实践】后端接口统一规范的同时,如何优雅得扩展规范?

    之前写过如何通过参数校验 + 统一相应码 + 统一异常处理来构建一个优雅后端接口体系:

    IT大咖说
  • 聊聊rocketmq的updateTopicRouteInfoFromNameServer

    本文主要研究一下rocketmq的updateTopicRouteInfoFromNameServer

    codecraft
  • Spring Security源码分析之LogoutFilter

    JavaEdge
  • Java开发知识之Java控制语句

      不管任何语言都有控制语句 if else if else whie do while for .... 首先讲解的是java的复合语句

    IBinary

扫码关注云+社区

领取腾讯云代金券