原子CSS-in-JS与实用程序优先框架

2020年12月30日11:04:22 发表评论 42 次浏览

本文概述

关于如何处理应用程序中的样式, 有很多选择。我们已经从传统的" HTML, CSS和JS"教科书格式转变为拥有更加灵活和高效的选择。最近, 用JS编写CSS的趋势正在增长, 这可以从大量涌现的CSS-in-JS库中看出。实用程序类也已经存在了一段时间, 围绕它们的积极倾向并不会很快消失。在本文中, 我们将介绍原子CSS-in-JS库和实用程序优先CSS框架, 它们之间的比较方式, 缺点以及使用这两个概念的一些出色项目。

用JS编写CSS

使用CSS-in-JS库时, 所有样式和依赖项都与应用程序的逻辑一起编写。这样就无需附加或导入样式表。一个很好的库可以这样工作样式化的组件。假设你有一个React应用-捐赠页面-需要设置样式:

import React, { useState } from "react";
import styled from "styled-components";

const ProductState = {
  products: {
    item: "Face Mask", price: "10", description: "Medical face mask, great for protection against human fluids.", image: "https://res.cloudinary.com/fullstackmafia/image/upload/v1589655457/face-mask_ara8yf.jpg"
  }
};

const App = () => {
  const [state] = useState(ProductState);
  return (
    <div>
      <h2>{state.products.item}</h2>
      <h4>Price: ${state.products.price}</h4>
      <p>
        Description: {state.products.description}
      </p>
      <img width={240} src={state.products.image} alt="Item View" />
      <button>Click Here to Donate</button>
    </div>
  );
};
export default App;

以下代码片段可动态设置全局HTML元素的样式div, 然后保留并将其属性等同于新创建的组件产品分部:

import styled from "styled-components";

 const ProductDiv = styled.div`
   display: grid;
   justify-content: center;
   text-align: center;
   margin: auto;
   border-radius: 5px;
   background-color: #66ccff;
   width: 50%;
   padding: 35px;
 `;

以这种方式创建用于样式的组件非常好, 因为它们可以导出到应用程序的其他部分, 并且无需创建其他组件即可重复使用。的风格的关键字附加到HTML元素, 样式本身包含在模板文字中。嵌入式语法看起来很像传统的CSS, 只是现在它由组件控制。像这样的实例:

// style.css

.ProductHeader h2 {
  font-size: 25px;
  font-family: "Lucida Console", Monaco, monospace;
}

成为这个:

const ProductHeader = styled.h2`
  font-size: 25px;
  font-family: "Lucida Console", Monaco, monospace;
`;

然后, 可以无缝地将最终结果插入应用程序的组件中:

import React, { useState } from "react";
import styled from "styled-components";

const ProductState = {
  products: {
    item: "Face Mask", price: "10", description: "Medical face mask, great for protection against human fluids.", image: "https://res.cloudinary.com/fullstackmafia/image/upload/v1589655457/face-mask_ara8yf.jpg"
  }
};

const ProductDiv = styled.div`
  display: grid;
  justify-content: center;
  text-align: center;
  margin: auto;
  border-radius: 5px;
  background-color: #66ccff;
  width: 50%;
  padding: 35px;
`;

const ProductHeader = styled.h2`
  font-size: 25px;
  font-family: "Lucida Console", Monaco, monospace;
`;

const App = () => {
  const [state] = useState(ProductState);
  return (
    <ProductDiv>
      <ProductHeader>{state.products.item}</ProductHeader>
      // rest of the app is styled accordingly...
    </ProductDiv>
  );
};
export default App;
面膜网站

查看完整的演示

这里

通过这种方式设计应用程序有许多优点:

  • 重用和一次性样式的创建和处理方式相同
  • 这非常适合代码拆分-重要的CSS段可以提取并在多个组件中使用
  • 由于每种CSS样式都封装在一个组件中, 因此只需更改涉及样式的组件的功能, 而不必冒更改应用程序其他部分的风险, 就可以轻松更改应用程序的一部分

实用程序优先CSS框架的案例

用实用程序类编写CSS的原因是只需要专注于在HTML(或某些前端框架的JSX)中应用所有样式。有几个使用这种哲学的图书馆–其中一个是尾风CSS。样式的每一个细节都与它所要表达的元素一起表达。这样会产生非常简单的标记, 如下所示:

<p className="flex justify-center my-4 font-sans text-center">
  Description: This is a Product
</p>

使用实用程序类方法为React应用程序的上一个示例添加样式, 如下所示:

import React, { useState } from "react";
import "./tailwind.generated.css";

const ProductState = {
  products: {
    item: "Face Mask", price: "10", description: "Medical face mask, great for protection against human fluids.", image: "https://res.cloudinary.com/fullstackmafia/image/upload/v1589655457/face-mask_ara8yf.jpg"
  }
};

const App = () => {
  const [state] = useState(ProductState);
  return (
  <div className="grid justify-center m-auto mt-32 p-16 w-1/2 bg-gray-200 rounded-md">
    <h2 className="flex justify-center my-4 font-sans text-center text-xl">
      {state.products.item}
    </h2>
     /* rest of the app is styled accordingly... */
  </div>
  );
};
export default App;
网站以10美元的价格出售口罩

你可以查看完整的演示

这里

如上述代码示例所示, 重点放在标记上, 并且重要的一点是, 必须尽可能严格地对每个类进行分类, 否则, 将失去实用程序类的基本含义。与样式化组件不同, 在样式化组件中, 组件名称具有存在性, 而实用程序类例如格, 自动, 要么文字中心可以轻松地将其放置在标记中的任何位置, 因此重要的是要跟踪设置的规则并确保它们都承担单一职责。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

原子CSS-in-JS与实用程序优先框架1

实用程序类的一个主要优点是它对初学者友好的方法。假设你有一个按钮想要添加一个徘徊属性-使用实用程序类将非常简单:

<button className="bg-red-400 hover:bg-grey-700 text-white font-bold rounded">
  Click Here to Donate
</button>

尽管可以忽略不计, 但实用程序类节省了一定的空间和文件大小。对于创建的每个样式化组件, 都有一个额外的变量声明, 一个衬里实用程序类具有简单的命令, 例如文字-xl可能就是你所需要的, 而不是为更新的标头的字体大小创建新的组件。

这两个概念的缺点

CSS-in-JS

尽管有论点认为编写CSS-in-JS可以提高效率, 但是它确实有一些缺点。对于初学者来说, 它不是非常适合初学者。 CSS-in-JS库倾向于为几乎每个库所特有的各种概念提供逻辑定义。看看这个概念样式化的组件使你可以在一个组件中引用另一个组件:

import React from "react";
import styled from "styled-components";

  const Link = styled.a`
    display: grid;
    justify-content: center;
    padding: 5px 10px;
    background: #ffd9b3;
    color: #003300;
  `;
  const HotButton = styled.button`
    flex: none;
    transition: background 2s;
    width: 50px;
    height: 50px;
    ${Link}:hover & {
      background: #80bfff;
    }
  `;

  const App = () => {
    return (
      <Link>
       <HotButton>
         Click To Review
      </HotButton>
    </Link>
    );
  };

export default App;

的链接通过在其他组件中引用它来设置组件的样式–热键。这肯定是重写组件样式的好方法, 但是如果大规模使用它, 可能会导致问题, 并使样式无法维护。

另一个关键问题(听起来似乎不太可能)是安全性。像这样的图书馆样式化的组件可让你将JavaScript嵌入CSS, 这意味着, 如果存在敏感代码(例如CSS中的用户输入), 则你的应用很容易受到XSS攻击。因此, 重要的是要使用户输入等内容远离你的风格, 并且对于团队中的其他所有人(如果是协作项目)也要理解这一点。考虑到这种安全风险, 值得一提的是, 对JS组件进行样式设置是否值得。

实用程序类

实用程序类主要问题的一线希望是, 如果很少使用实用程序类而不是大规模使用实用程序类, 则可以避免这些问题。实用程序类基于元素的外观保持不变并且在大型项目中常常并非如此。当你开始有很多嵌入一个特定规则的元素, 但它们没有遵循该规则时, 你就会知道存在问题。说有向左飘浮在其标记中, 但与中心和右侧对齐。

另一个关键问题是设计响应能力。在不使标记难以理解的情况下, 可以在多大程度上修改元素之间的空间?还有, 当规则像太空x-40和-空间-x-40经常使用, 它们可能会互换, 事情可能会变得非常不愉快。

此外, 使用实用程序类时, 规则执行可能会变得非常不一致。为了使样式生效, 协作者可以轻松地发现自己在元素中添加了不同的实用程序类。这种偏差一点一点地可以很容易地导致广泛的代码库出现巨大的不一致。不用说, 如果不可能的话, 这将使代码维护非常困难。

总结

正确使用CSS-in-JS和实用程序类都是很好的概念。但是, 对于他们两个人而言, 重要的是要有非常熟悉这两个概念或为所涉及项目设置的任何特定规则的团队成员或贡献者。

你的前端占用了用户的CPU吗?

随着Web前端变得越来越复杂, 资源贪婪功能对浏览器的需求也越来越大。如果你有兴趣监视和跟踪生产中所有用户的客户端CPU使用率, 内存使用率等,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR, 它记录了Web应用程序或网站中发生的一切。你不必猜测为什么会发生问题, 而是可以汇总并报告关键的前端性能指标, 重播用户会话以及应用程序状态, 记录网络请求, 并自动发现所有错误。

现代化调试Web应用程序的方式—免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: