我喜欢用Svelte编写样式

Svelte的受欢迎程度不断增长（超过24,000个Github星星）当之无愧。由Rich Harris（也在滚动后面）创建，可以说是最简单的JavaScript框架。尽管其性能，内置状态管理和干净的标记令人信服，但其CSS处理是我的出色功能。

单文件组件：优雅的简单性

React的文档著名地指出：“ React对样式的定义没有意见。” Svelte采用了另一种方法：“一个没有内置方式可以在组件中添加样式的UI框架是未完成的，” Harris说。

Svelte可让您直接在组件中编写CSS，从而镜像标准项目工作流程。 CSS-IN-JS解决方案仍然是一种选项，但是Svelte的方法通过将JavaScript，Markup和样式组合在单个.svelte文件中来简化开发，这是VUE用户熟悉的概念。

 // button.svelte
按钮 {
  边界拉迪乌斯：0;
  背景色：aqua;
}
<slot></slot>

范围范围：无冲突的样式

Svelte的默认示范样式可以防止组件之间的样式冲突。类似于CSS模块或CSS-IN-JS，它在编译过程中生成了唯一的类名称。这允许在没有复杂的类名称管理的情况下使用简单的选择器（例如div和button ）。组件中的多个按钮仍然需要分类的类，并且这些类也被范围范围。

虽然生成的类名称（例如svelte-433xyz ）在DevTools中似乎是隐秘的，但这种方法比BEM命名约定要简单得多。您可以将Svelte的示范样式与用于全球样式，公用事业类或CSS框架的外部样式表相结合。

全球风格：保持控制

可以在链接的样式表中定义全局样式，或者在必要时使用以下方式在Svelte组件中使用:global 。这允许在需要时有针对性的范围范围。例如，模态组件可能会使用：

 ：global（.noscroll）{
  溢出：隐藏；
}

未使用的样式检测：提高效率

Svelte的编译器标志未使用的样式，通过识别和消除冗余代码来提高效率。

简明条件类：简化的语法

Svelte简化了有条件的类应用程序。当JavaScript变量和类名称匹配时，语法非常简洁：

导出让big = false;
导出令ghost = false;

.big {font-size：20px;显示：块;宽度：100％； }
.ghost {Background-Color：透明;边界：固体电流2px; }

<slot></slot>

ghost和big类是根据相应的道具应用的。即使名称不匹配，也可以通过单个道具有效地传递多个类：

令class_name ='';
导出{class_name作为class};
<slot></slot>

这样使用：

<button class="my-class another-class">点击我</button>

从BEM到Svelte：简单革命

比较BEM风格的卡片组件：

 .c-card {border-radius：3px;边界：实心2px; }
.c-card__title {text-transform：uppercase; }
.c-card__Text {颜色：灰色; }
。 }

相当于它的同等学历：

 div {border-radius：3px;边界：实心2px; }
h2 {text-transform：uppercase; }
p {颜色：灰色; }
。 }
<div class:featured="">
  <h2 id="标题">{标题}</h2>
  <p><slot></slot></p>
</div>

Svelte版本明显更简洁和可读。

预处理器兼容性：扩展选项

尽管对敏捷的关键较少，但通过svelte-preprocess支持了预处理器。这允许使用Sass，Simest，手写笔和Postcss。对于Sass，在样式标签中安装svelte-preprocess和node-sass ，配置rollup.config.js ，然后使用type="text/scss"或lang="scss" 。

 $ pink：RGB（200，0，220）;
p {颜色：黑色;跨度{颜色：$ pink; }}}

动态值和CSS变量：强大的组合

尽管Svelte无法直接使用CSS中的JavaScript变量，但CSS变量提供了解决方法：

导出令cols = 4;
ul {
  显示：网格；
  宽度：100％；
  网格柱隙：16px;
  网格 - 行隙：16px;
  网格板柱：重复（var（ - 列），1fr）;
}
<slot></slot>

总之，Svelte提供了一种非常直观且用户友好的API，超过了我使用的其他方法（Sass，Shadow Dom，CSS-In-JS，BEM，BEM，Atomic CSS和PostCSS）。要深入研究，请参阅里奇·哈里斯（Rich Harris）的“仅写CSS的禅宗”。

以上是我喜欢用Svelte编写样式的详细内容。更多信息请关注PHP中文网其他相关文章！