技术负债，百度词条给出的解释如下：

技术负债（英语：Technical debt），又译技术债，也称为设计负债（design debt）、代码负债（code debt），是编程及软件工程中的一个比喻。指开发人员为了加速软件开发，在应该采用最佳方案时进行了妥协，改用了短期内能加速软件开发的方案，从而在未来给自己带来的额外开发负担。这种技术上的选择，就像一笔债务一样，虽然眼前看起来可以得到好处，但必须在未来偿还。软件工程师必须付出额外的时间和精力持续修复之前的妥协所造成的问题及副作用，或是进行重构，把架构改善为最佳实现方式。

这可是我最近读书时学到的新名词，一听就比洪哥经常挂在嘴边的“屎山代码”高级，对吧？

然后呢，这篇就是想说说我最近都有哪些地方深切的感觉到技术负债的存在了。

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

昂，举个栗子。我之前在糖果屋微调合集里写过一个副标题悬停显示文章描述对吧？而且我还沾沾自喜的把这个方案移植到flexcard的友链样式上，还有nota注释外挂标签上。

这个的实现原理是用hover选择器调整before伪类元素的显隐样式，然后问题就来了，因为我经常要用overflow:hidden;所以总是导致子元素在absolute定位下根本显示不全。到最后只能用fixed定位。但其实我最初的打算就是把注释标签写成气泡那样，刚刚好显示在被注释元素的右下角。

那如果我换成兄弟相邻选择器的话呢，悬停卡片和显示描述就完全可以分开来写布局了。方便程度和美观程度完全不可同日而语。尤其是我还能用relative定位实现那种悬停显示气泡效果。（今明两天还能摸鱼的话就实装到新款nota标签上去。）

还有我以前写过的SAO风格右键菜单，每个二级选项的位置我当初是用的计算公式，在行内样式里通过联立方程组强行计算出偏移量的。这个方案我也写到了butterfly-heo反编译日记里。但是如果用transform变换的话……哦，等下，这个好像确实是联立公式计算偏移量的方案更优势。至少不用担心因为filter滤镜属性导致transform属性失效。emmmm,这不重要，重要的是transform变换属性很好用。

换个例子，比如我之前写的SAO风格侧栏卡片，上面有个小小的圆角梯形突起对吧，那个是我用伪类实现的，但是伪类拼接在不同屏幕比下，由于终归是和下面卡片分属两个元素，总是会或多或少出现拼接错位，看着就非常的不美观，而如果我用clip-path属性直接裁剪边框，那我只需要注意调整margin和padding属性就可以保证自适应的美观了。

还有flex布局，我也是在写首页卡片魔改的时候才知道可以通过order重新编排子元素的排列位置的。以前我可是傻乎乎的用left、top、bottom、right等定位硬生生的把各个布局强行扭过来的。（主要体现在对twikoo评论气泡的魔改上）等下个月我的twikoo读取次数余量恢复过来，然后网站没有再被打了我再考虑去优化一下它。现在每天还是被打30多G呢，我还是再躲躲吧。

那我目前面临的主要问题呢，就在于我已经没有寒暑假了，小长假的时候我总是克制不住自己的玩心，总是沉迷游戏。所以难以置信的事就是，我最认真开发UI样式的时候，居然是在工作摸鱼的时间！