Styled-Components class bloat
Shows an example of how using too many string templates as mixins vs the documented way of extending styles will lead to bloat
bad templateString/Body.tsx http://localhost:3000/?whichComponent=templateString
import { box } from "../styles/box.styles";
import React from "react";
import styled from "styled-components";
const BoxDiv = styled.div`
${box}
`;
const Body: React.FC = () => {
return (
<BoxDiv>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</BoxDiv>
);
};
export default Body;
good extend/Body.tsx http://localhost:3000/?whichComponent=extend
import { BoxDiv } from "../styles/box.styles";
import React from "react";
const Body: React.FC = () => {
return (
<BoxDiv>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</BoxDiv>
);
};
export default Body;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent