处理 CSS 框架
为了减少对 Bootstrap 等框架的依赖，我的建议是停止将特定于框架的类直接应用于 HTML。相反，我会鼓励以下做法：
%our-warning-button { @extend .btn; @extend .btn-warning;}.empty-shopping-cart-button { @extend %our-warning-button;}
这种方法有助于将应用程序与 CSS 框架分离，将它们视为你自己的内部 CSS 框架的“装饰器”。你现在可以轻松地交换框架，覆盖样式，甚至可以滚动自己的代码而不会影响前期速度。
集中样式的能力意味着 UI 设计人员可以在不使用迷宫组件的情况下处理 CSS。使用领域特定语言还可以与整个组织内的非技术团队成员和利益相关者进行更好的沟通。
最后（也是最重要的），你现在可以清楚地分离结构和风格之间的关注点。
处理 SPA 框架
这可能是有争议的，但我建议从 React 切换到 Vue.js，这就是为什么：
<template><!--Structure--></template><script><!--Behaviour--></script><style><!--Style--></style>
你在这里看到的是 Vue 的“ 单个文件组件 ”，它鼓励分离。我非常喜欢 Vue（以及他们对简约的一般承诺）。
我认为使用 Vue 有一个令人难以置信的强大商业案例，因为它降低了非JavaScript 开发人员跳槽和贡献的障碍。除了他们的专业知识的价值，他们还将释放你的多面手在其他发挥巨大作用。
不要误会我的意思，Vue 拥有像 React 这样的框架的所有特征。它非常灵活，可以让你创造出任何你喜欢的。类似地，React 可以以这样一种方式实现，即它开始变得更加平易近人（虽然远不到 Vue 的程度）。
总的来说，我的建议只是采用强制分离的编码实践。我会说：简化为一套简单的规则：
切勿在模板中放入任何不直接引用预先计算的数据、方法或组件的内容。
仅通过你自己设计的类应用样式，并避免不惜一切代价使用样式属性。
以上将代码库划分为智能和愚蠢的组件（https://alligator.io/react/smart-dumb-components/）应该使你的 HTML 逻辑和样式免费。它可能会消除一些捷径，可以弥补前期成本，并具备良好的长期可维护性。 |
|
收藏
淘帖
踩
