An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
Simple React like button with Stylify CSS. From Utilities to Components, mangled selectors, and 50% smaller production build.
Write CSS-like selectors directly into the template and style your React app quickly with Stylify CSS.
Learn how to use Stylify CSS. to style a button quickly using only utilities and then clean the template using components. Learn why the output in production can be 50% and more smaller.
Table of content
- The Code
- Production build - 50% smaller
- Template cleanup
- Syntax explanation
- Checkout Stackblitz Playground
The Code
Here is the code behind the button:
import { useState } from 'react';import './stylify.css';function LikeButton() { const [count, setCount] = useState(0); return ( <button className=" color:#222 font-weight:bold border:0 background:#fff font-size:16px padding:8px_16px border-radius:4px cursor:pointer box-shadow:0_.3em_.6em_rgba(0,0,0,0.3) transition:background_0.3s,scale_0.3 align-items:center display:inline-flex [&:hover_span:first-of-type]{transform:scale(1.5)} [span]{display:inline-flex} " onClick={() => setCount(count + 1)} > <span className=" margin-right:8px font-size:24px transition:transform_0.3s "></span> <span className="margin-right:6px">Like</span> <span className=" background:#eee padding:4px align-items:center justify-content:center border-radius:50% min-width:24px min-height:24px ">{count}</span> </button> );}export default LikeButton;
The generated CSS for example above:
.color\:\#222{color: #222}.font-weight\:bold{font-weight: bold}.border\:0{border: 0}.background\:\#fff{background: #fff}.font-size\:16px{font-size: 16px}.padding\:8px_16px{padding: 8px 16px}.border-radius\:4px{border-radius: 4px}.cursor\:pointer{cursor: pointer}.box-shadow\:0_\.3em_\.6em_rgba\(0\,0\,0\,0\.3\){box-shadow: 0 .3em .6em rgba(0,0,0,0.3)}.transition\:background_0\.3s\,scale_0\.3{transition: background 0.3s,scale 0.3}.align-items\:center{align-items: center}.\[span\]\{display\:inline\-flex\} span,.display\:inline-flex{display: inline-flex}.margin-right\:8px{margin-right: 8px}.font-size\:24px{font-size: 24px}.transition\:transform_0\.3s{transition: transform 0.3s}.margin-right\:6px{margin-right: 6px}.background\:\#eee{background: #eee}.padding\:4px{padding: 4px}.justify-content\:center{justify-content: center}.border-radius\:50\%{border-radius: 50%}.min-width\:24px{min-width: 24px}.min-height\:24px{min-height: 24px}.\[\&\:hover\_span\:first\-of\-type\]\{transform\:scale\(1\.5\)\}:hover span:first-of-type,.transform\:scale\(1\.5\){transform: scale(1.5)}
Production build - 50% smaller
When you allow Stylify to mangle selectors, then the output looks like this:
.c{color:#222}.d{font-weight:bold}.e{border:0}.f{background:#fff}.g{font-size:16px}.h{padding:8px 16px}.i{border-radius:4px}.j{cursor:pointer}.k{box-shadow:0 .3em .6em rgba(0,0,0,0.3)}.l{transition:background 0.3s,scale 0.3}.m{align-items:center}.b span,.n{display:inline-flex}.o{margin-right:8px}.p{font-size:24px}.q{transition:transform 0.3s}.r{margin-right:6px}.s{background:#eee}.t{padding:4px}.u{justify-content:center}.v{border-radius:50%}.w{min-width:24px}.x{min-height:24px}.a:hover span:first-of-type,.y{transform:scale(1.5)}
Also the selectors in JSX are minified
<button className="c d e f g h i j k l m n a b" onClick={() => setCount(count + 1)}> <span className="o p q"></span> <span className="r">Like</span> <span className="s t m u v w x">{count}</span></button>
CSS size:
- Dev: 1101 bytes
- Production: 556 bytes
The size savings are around 50% (The size is similar in gzipped mode). If we take the mangled HTML, the difference will be even bigger.
Template cleanup
What if we have a lot of utilities and want to move them out of the template? With Stylify you can do that using reusable components. They can be defined within a comment (expects js object without surrounding brackets) in the file where they are used or in a global config.
// .../* stylify-components'like-button': ` color:#222 font-weight:bold border:0 background:#fff font-size:16px padding:8px_16px border-radius:4px cursor:pointer box-shadow:0_.3em_.6em_rgba(0,0,0,0.3) transition:background_0.3s,scale_0.3 align-items:center display:inline-flex span { display:inline-flex } &:hover span:first-of-type { transform:scale(1.5) }`,'like-button__hearth': 'margin-right:8px font-size:24px transition:transform_0.3s','like-button__counter': ` background:#eee padding:4px align-items:center justify-content:center border-radius:50% min-width:24px min-height:24px`/stylify-components*/function LikeButton() { // ... return ( <button className="like-button" onClick={() => setCount(count + 1)}> <span className="like-button__hearth"></span> <span className="margin-right:6px">Like</span> <span className="like-button__counter">{count}</span> </button> );}// ...
In production, the components are also mangled.
Syntax explanation
In the example above, you can see Stylify using CSS-like selectors. With a few differences.
_
within a selector is used instead of space[span]{display:inline-flex}
is an inline custom selector. This allows you to style custom selectors.&
inside[&:hover_span:first-of-type]
always refers to the upper level like in SCSS- The indented syntax in components is also like in SCSS. Except, to keep things simple, it supports only nesting and chaining
span { display:inline-flex }&:hover span:first-of-type { transform:scale(1.5) }
Checkout Stackblitz Playground
You can try the playground on Stackblitz.
Let me know what you think!
I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement .
Stay in touch:
@8machy
@stylifycss
stylifycss.com
dev.to/machy8
medium.com/@8machy
Original Link: https://dev.to/machy8/simple-react-like-button-with-stylify-css-from-utilities-to-components-mangled-selectors-and-50-smaller-production-build-dg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To