I introduced the React CSS solution that is now popular. In this post, I’ll dive right into the details of one of my favorite solutions: Tachyons

Personally, Tachyons are great for small, non-stylefocused projects and writing demos, but that doesn’t mean you can’t do big projects and beautiful home pages with Tachyons: see tachyons.io/gallery/ for more on tachyons

0. Selection criteria

When you’re excited to finish your documentation, before you start using a new CSS framework, you need to think carefully about whether it works in all of your scenarios. Here are a few things I’ve concluded:

  • Did React development pain points be addressed: local CSS, dynamic CSS?
  • Does it support all CSS and even SASS usage? Pseudo-classes, nesting, animation, media queries?
  • Is it compatible with third-party UI libraries you need to use?
  • Can it coexist well with pure CSS, or with other CSS frameworks, in case there is a solution B?
  • Performance? The size?

1. tachyons

In my experience, few people catch a cold with Tachyons just by glancing at the documentation, and the real sense of its charm is in use. After watching a video of using Tachyons in real life, I went on board. When I mentioned it to my colleagues, they were not too enthusiastic, but they decided to use it immediately after watching me use it in real life.

Unlike all previous CSS frameworks that try to provide many component-sized CSS classes, Tachyons doesn’t even have a class like BTN. Bootstrap and other CSS frameworks share one of the drawbacks of frameworks: it’s all fun and games when you’re completely within the framework, but when you want to customize it, you’re in for a lot of pain. As if going in the opposite direction, Tachyons offers extremely detailed classes. Check out Tachyons. IO /components/ for example, a button:

<div class="ph3">
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="# 0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="# 0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="# 0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="# 0">Button Text</a>
</div>
Copy the code

Take the second row of class from left to right: Font-size :.875rem; hover fade effect; border-radius 1 unit; border-width 2 units; border-width 3 units; Padding 2, margin 2, display:block, purple.

Atomic classes:

This is the basic concept behind Tachyons, extremely detailed “atomic classes,” with the benefits of:

  1. The source code is extremely simple and easy to read, the source code.
  2. 14kB Uncompressed size. I tried to use Tachyons instead of pure CSS, which not only made the style more uniform, but also made CSS files smaller
  3. Customization becomes a breeze: For example, think widerbw3Can.
  4. You never have to worry about naming conflicts, you never have to worry about style overwriting, as soon as you write the next class, the UI changes; As long as everyone uses Tachyons, each other’s work will never affect the other.
  5. Write once will have the experience, greatly improved the development speed.

Simply put, using Tachyons feels like writing inline CSS in a well-defined minimalist language.

Why is feasible

If Tachyons are so good, why hasn’t there been a CSS library like this before? Because this concept, like inline CSS, only really becomes feasible in the wave of componentized development. With traditional development, writing each button like this would not be as easy as using a BTN class. But with frameworks like React, reuse of code is taken care of by components. It is possible to write a Button component:

const Button = ({ children, color }) = > (
    <a className= `f6 link dim br1 ba bw2 ph3 pv2 mb2 dibThe ${color} `href="# 0">{children}</a>
)
Copy the code

Use the following

<Button color='hot-pink'>registered</Button>
Copy the code

More benefits

  1. Dynamic CSS is easily accomplished using template strings
  2. The reusability of styles increases dramatically

tachyons > inline css

If you thought Tachyons were just inline style, you’ll love tachyons in every detail:

  1. Elegant media enquiries:
<div className="mw6 mw5-m mw4-l">// Max-width: 32rem, 16rem, 8rem<div className="w3 w5-ns">// Width: 4rem for mobile, 16rem for non-mobileCopy the code

Using Tachyons, you can write the phone’s style, then add -m, -L, and -ns to it in a matter of minutes.

  1. Come with good style specification, not only length width and color, project style unified:
/* For example, shadow */
.shadow-1 { box-shadow: 0 0 4px 2px rgba(0, 0, 0,.2); }.shadow-2 { box-shadow: 0 0 8px 2px rgba(0, 0, 0,.2); }.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0,.2); }.shadow-4 { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0,.2); }.shadow-5 { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0,.2); }Copy the code
  1. The debug class. This is almost one of my favorite things about Tachyons, adding these two classes to your code even when you’re not using them:
.debug * { outline: 1px solid gold; }
.debug-grid { background: transparent url( data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat  top left; }Copy the code

Debug-grid will represent the presence of element boxes with a grid, and Debug will give all child element boxes a gold edge. When a style isn’t formatted the way you want it to be, adding a debug, debug-grid class to the element will probably find out why.

  1. Convenience in detail
/* Vertical */
.pv2 {
    padding-top:.5rem;
    padding-bottom:.5rem;
}
/* Horizontal */
.ph3 {
    padding-left: 1rem;
    padding-right: 1rem;
}
Copy the code

And other solutions, tripartite library compatibility

The tripartite library is compatible as long as it provides props for className, which is perfectly compatible with other CSS solutions because it’s the original CSS. So the parts that Tachyons can’t handle well just need to use other solutions or native CSS. It’s worth noting that if you don’t like Tachyons’ existing classes, just write your own. In my opinion, Tachyons is just an idea for writing tachyons.css for your team.

The last

  1. Let’s take a look at a few lines of adaptation that Tachyons can do.

  2. Friendship call tailwind. CSS. Tachyons is a tachyons inspired CSS solution that is designed to be able to complete any complex project in tachyons style. It is much more powerful than Tachyons and requires some learning. Take a look at their detailed documentation if you are interested.

  3. Styled – JSX, talks about personal favorites for the Big React project CSS solution.

React Picks: My favorites from 10 popular CSS solutions