常问问题

以下是关于Stylify CSS及其生态系统的常见问题。

为什么要使用类似CSS的选择器property:value而不是快捷键?
  • 因为你不需要研究什么。这就像CSS,而不是随机命名的某种缩短的类。一个例子:auto-cols-auto是Tailwind的一个类。这个类不是不言自明的,一个不是每天使用Tailwind的开发者必须进入文档或进入开发工具才能看到它的作用。在Stylify中,你可以写这个grid-auto-columns:auto。每个对CSS有一点了解的人都知道它的作用。
  • 另一个原因是可维护性。如果浏览器自带的属性,Tailwind已经缩短了怎么办?例如 shrink => flex-shrink: 1; (来自Tailwind的类)。如果浏览器出现了,例如,一个新的`收缩:自动'。那么,他们将不得不为新的选择器找出一个新的名字,以便让它有意义。这可能会让人困惑。
  • 当使用BEM时,你可能会出现class="page-section__container page-section__container--full-size page-section__container--without-background"。我看不出property:value选择器有什么比这更糟的。

如果你不喜欢类似CSS的选择器,你可以定义自定义的宏,如ml-2(margin-left)或py-3(垂直填充),如果你更喜欢它。

style=""属性有什么区别?
  • 例如,像color:red这样的选择器被生成为.color:red{color:red}。这个选择器可以被重复使用。
  • 内联样式不是响应性的。你不能添加一个@media query。这意味着,你不能在手机上使用font-size 12px,然后在桌面上改变它。另外,切换类比切换样式属性值更容易。
  • 当你在Stylify中添加一个需要红色文本的组件,如.button,它会像这样生成.color:red,.button{color:red}。选择器被简单地附加、重复使用,并且property:value不会被再次生成 => 这意味着更小的包。
  • 在生产中,你也可以将这个选择器最小化为 => .a,.b {color:red}。即使是Medium.com和Facebook也是如此。
  • 但是,迷你化会使块在调试时更难找到,因为不可读的类?不会的,你可以使用空类作为选择器、数据或id属性。另外,在Javascript中,我们通常将类和选择器从const myValue减至const abc,没有人在意。
与纯CSS相比,有什么优势?
  • 选择器是动态生成的 => 在删除CSS时不必记得删除它们,反之亦然。
  • 选择器被组合和重复使用 => .color:red,.button{color:red}
  • 选择器从长的text-align:left被简化为短的a
  • 你打开一个模板文件和一个浏览器,你只需输入选择器。你不必在HTML和CSS之间切换来删除、重命名和手动组合类。
  • CSS的大小不会呈指数级增长,因为重复的CSS property:value最少。有一些文章是关于Facebook的CSS大小。
  • 当前端和后端工程师在一个任务上工作时,那么前端工程师就很容易告诉后端工程师,当他只需要缩进或对齐某些东西时,应该添加哪些类。他不需要编辑CSS并希望它能工作。他只是复制选择器。
  • 动态生成的CSS意味着项目中更少的文件=>更少的修改=>我们通常会生成缓存、实体、迁移、js捆绑等。所以Stylify是动态生成CSS的。至少从我的角度来看,这比手动编写和思考如何预先生成实用程序或手动组合CSS文件更加舒适和高效。
我需要使用硬编码的值吗?
  • 在Stylify中,你可以配置变量并在任何地方使用它们。
  • 只是由开发者决定他是否要在代码中使用硬编码的值。
Stylify和实用优先的CSS会导致模板臃肿,可维护性更差。
  • 你可以定义components。所以模板中不一定要有任何实用性。
  • 还有一种可能就是样式custom selectors。这样你就可以消除很多重复的实用程序。
  • 根据经验,你可以用很多其他的东西来膨胀你的模板=>条件、属性、动态属性、动态加载的模板等等。指责CSS选择器是很奇怪的。
选择器是预先生成的吗?
  • 没有。Stylify会根据需要生成所有的东西。
  • 如果你写了color:blue,它就会生成.color:blue {}。如果你删除它,它将不会被生成。
  • 组件也以同样的方式工作。
  • 只有自定义选择器会被立即生成,因为它无法检测到它们是否被定义。
为什么使用下划线_而不是空格?
  • 这个字符是与空格最 "视觉相似 "的。
  • Stylify不能在选择器中使用空格,因为它们会被进一步优化。用空格来匹配选择器将是不必要的困难,并可能导致很多难以解决的错误和边缘案例。
  • 破折号-字符也不能使用,因为在CSS中,有负值,如calc(100% - 24px),函数如cubic-bezier或动画的属性ease-in-auto
    同时为了保持简单和统一,该字符必须与自定义选择器兼容,如[&_a]{color:red},其中可以定义data-attribute
如果语法与CSS相似,为什么不使用一些属性如x-style呢?
  • 类是开发者使用可重复使用的选择器的一种原生方式。
  • 类属性有原生的js API用于添加、移除、切换
  • x-style这样的属性是无效的。这里唯一可能的方法是使用data-*属性。
  • Stylify不使用选择器的空间,因为它需要选择器是完整的,以便进一步优化,如将一个按钮链接到padding:4px_8pxmangling.padding:4px_8px =>.a
Stylify CSS是一个CSS框架吗?
  • Stylify CSS不是一个CSS框架。它是一个库,可以根据你所写的内容为你的网页项目动态地生成CSS。
  • Stylify CSS使用类似于CSS的语法,没有预先安排的调色板、尺寸、随机快捷键等。
  • 它专注于快速和无缝编码,无需学习CSS框架功能和随机快捷键。这就是为什么它的语法与CSS相似的原因之一。

有兴趣吗?来吧,让Stylify CSS试试吧

开始吧