我是个前端作弊者
再见 Bootstrap，你好 Bulma！
我想要个性！
例子
那么，究竟是为什么这么多麻烦呢？
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我是一名全栈开发人员。我使用 Visual Studio 进行开发，用 C# 和 .NET Core 编写代码，部署到 Azure，而且我必须承认，我前端开发有点“作弊”。
拜托，.NET Core Web 应用演示本身就预装了 Bootstrap 和 jQuery。我们都会在某些时候作弊，但我现在想让我的作弊方式多样化，并消除我的依赖项。
这是我最新的策略。
再见 Bootstrap，你好 Bulma！
Bootstrap 能做到的，Bulma 都能做得更好！
嗯，也不完全是这样，让我解释一下原因。
Bulma 没有 JS 文件。
我唯一觉得需要用到 JavaScript 的时候是什么？或许是 jQuery 数据表，但我会专门创建一个“数据表布局”，并且只在必要时才使用 jQuery 表格。而 Bootstrap 和 jQuery 的这种耦合正是我想要摆脱的。
几乎所有其他东西？专栏、表格、主图？布尔玛全都搞定了！
我希望风格就是风格。
我不喜欢用 JavaScript 来实现悬停、表单验证等效果。HTML5 已经增加了验证选项，CSS 也提供了丰富的变换功能。为什么我非得引入 jQuery 和各种动画库才能实现简单的文本动画呢？
令人沮丧的是，我依赖大量的代码，而我却可以用一个单独的 CSS 文件 Bulma 来完成列、表格、封面设计等等。
我想要个性！
这个功能很好用，所有内容加载速度都很快，但是没有“动画效果”，没有“炫酷效果”。
现在怎么办？我干脆屈服，直接导入 jQuery 和 WOW.js 算了？我的意思是，我也可以……
或者，我可以用像Animista这样的工具来挑选我需要的动画。它的用户界面很棒，我可以精确地选择我需要的动画，不多也不少。如果出现问题，我只需注释掉相应的 CSS 代码，一切就又回到原计划了！
例子
所以，我想做一个简单的鼠标悬停效果。当用户将鼠标悬停在图像上时，图像和文字就会出现。我参考了W3Schools 上的基础 CSS/HTML 示例，很快就实现了（我把“容器”类替换成了“flip”类，以避免与 Bulma 冲突）。
为了增添一些趣味性，我参考了Animista 网站上的文字模糊聚焦效果示例，并尝试将其动画与我的鼠标悬停效果结合起来。这就是最终效果……
以下是HTML代码：
<div class="flip">
<img src="~/images/flip_images/branches.jpg" alt="Avatar" class="flip-image" style="width:100%">
<div class="flip-middle">
<div class="flip-text"><a href="/Home/Locations">LOCATIONS</a><br /><div class="is-size-6">Over 80 Years of Service</div></div>
</div>
</div>
以下是 CSS 代码（W3 + Animista 的组合）：
.flip {
position: relative;
padding: 0.3rem;
}
.flip-image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.flip-middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.flip:hover .flip-image {
opacity: 0.3;
}
.flip:hover .flip-middle {
opacity: 1;
/* below credit of Animista*/
-webkit-animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.flip-text {
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
color: #565656;
}
/* ----------------------------------------------
* Generated by Animista on 2018-8-7 13:40:21
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation text-focus-in
* ----------------------------------------
*/
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
/* ---------------------------------------------- */
最终效果很简单：鼠标悬停在图片上，图片会逐渐淡出，并出现一个透明的白色叠加层。一个动画文字会在中心位置模糊聚焦，点击即可进入链接。
纯CSS！（布尔玛+动漫风格MOD）
那么，究竟是为什么这么多麻烦呢？
去年我做了一个网站，它当时非常重要，现在依然如此。这个网站接受支付。它需要一个特定版本的 jQuery 才能运行其自带的库，该库会对信用卡号进行加密，然后发送到 API（这样就不会存储信用卡号，从而避免了 PCI 合规性问题）。这本来没问题，但当时我的设计使用了另一个版本的 jQuery，以及一大堆库。这些库的功能五花八门，从封面背景图片、动画到表单验证等等。我精简了所有库，网站确实能正常运行。然而，不知怎么的，其中一个库与新版 Edge 浏览器冲突，导致大量关于通过 API 发送无效信用卡的投诉。所有错误都与 Edge 浏览器中的表单下拉菜单有关。
Chrome 和 Firefox 都能正常处理。
总结要点：
尽量减少依赖。
而这正是我开始做的。