Web开发需要掌握多种技术。我们习惯于与多种语言密切合作。而且，随着开发Web应用程序变得更加普遍和细致，我们经常寻找创造性的方法来弥合这些语言之间的差距，以使我们的开发环境和工作流程更简单、更高效。最常见的例子通常是在使用模板语言时。例如，可以使用一种语言为更详细的语言（通常是HTML）生成代码。这就是前端框架的关键作用之一——操纵HTML。该领域最著名的是JSX，因为它并不是真正的模板语言；它是JavaScript的语法扩展，使HTML的使用变得非常简洁。Web应用程序经历许多状态组合，单独管理状态通常具有挑战性。这就是为什么CSS有时会被抛到窗外的原因——尽管通过不同的状态和媒体查询来管理样式同样重要且同样具有挑战性。在这个由两部分组成的系列中，我想将CSS放在聚光灯下，并探索弥合它与JavaScript之间的差距。在本系列中，我假设您正在使用像webpack这样的模块解析器。因此，我将在示例中使用React，但相同或相似的原则适用于其他JavaScript框架，包括Vue。CSS领域正朝着多个方向发展，因为有许多挑战需要解决并且没有“正确”的道路。我花了很多精力尝试各种方法，主要是在个人项目上，所以本系列的目的是提供信息，而不是为您提供解决方案。CSS挑战在深入研究代码之前，有必要解释一下在设置Web应用程序样式时最显着的挑战。我将在本系列中讨论范围、条件和动态样式以及可重用性。作用域作用域是一个众所周知的CSS挑战，它是关于编写不影响组件外部的样式，从而避免意外的副作用。我们希望在不影响编码体验的情况下实现功能。条件和动态样式虽然前端应用程序中的状态开始变得更加高级，但CSS仍然是静态的。我们只能有条件地应用样式集——如果按钮是主要的，我们可能会应用“主要”类并在单独的CSS文件中定义其样式以应用它的屏幕样式。有几个预定义的按钮变体是可管理的，但是如果我们想要各种按钮，比如为Twitter、Facebook、Pinterest和可能的许多其他自定义的特定按钮？我们真正想要做的就是传递一种颜色并使用CSS来定义悬停、焦点、禁用等状态。这称为动态样式，因为我们不再在预定义样式之间切换——我们不知道接下来会发生什么。人们可能会想到内联样式来解决这个问题，但它们不支持伪类、属性选择器、媒体查询等。ReusabilityReusingrulesets、mediaqueries等是我最近很少看到的话题，因为它已经被采用了由Sass和Less等预处理器处理。但我仍然想在这个系列中再次提出来。我将在本系列的两个部分中列出一些应对这些挑战的技术及其局限性。没有一种技术比另一种更好，它们甚至并不相互排斥；您可以选择一个或组合它们，具体取决于您的决定是否提高了项目的质量。让我们开始吧我们将使用一个名为Photo的示例组件来演示不同的样式设置技术。我们将呈现响应式图像，可能带有圆角，同时将替代文本显示为标题。它将像这样使用：
