React에서 CSS를 어떻게 활용합니까?스스로 결론을 내려 하였다
개시하다
최근 CSS에 대한 학습을 요약해 봅시다.특히 React의 CSS에서 저는 어떻게 해야 할지 고민을 많이 했기 때문에 제 마음속의 결론을 썼으면 좋겠다고 생각합니다!
CSS의 세계적 동향
우선 세계 CSS의 동향을 살펴봅시다.2021년stateoffcss 사이트를 살펴보겠습니다.
최근 움직임으로 CSS 모듈즈가 많이 사용되고 있고, Tailwind CSS가 급격히 늘어나는 것은 잘 알고 있다.
사전 및 후면 프로세서
stateoffcss에 나타나는 프로세서와 프로세서를 설명합니다.
프로세싱 프로그램
개별 언어(메타언어)로 작성된 스타일 구문을 CSS 구문으로 변환합니다.
예: Sass, Less, Stylus
포스트 프로세서
편리한 플러그인 등을 통해 CSS 문을 더 좋은 CSS로 변환합니다.(자동 성형 또는 접두사 추가 등)
예: PostCSS
CSS Modules
CSS Modules 를 살펴보겠습니다.*module.css에서 스타일을 기술하고 구성 요소 내 import에서 사용합니다.
style.module.css
.errorButton {
color: white;
background-color: red;
}
import styles from './Button.module.css'
const Button = () => (
<button className={styles.errorButton}>
Destroy
</button>
)
CSS-in-JS
다음은 바로 js에서 CSS-in-JS를 기술하여 소개할 수 있습니다.
styled-components
CSS-in-JS라면 스타일드-components를 들 수 있을 것 같습니다.다음과 같이 기술하다.
sample.jsx
import styled from "styled-components"
export default function Home() {
//Titleはh１タグ
const Title = styled.h1`
// スタイルを記述
font-size: 1.5em;
text-align: center;
//coler属性は値が渡されれば値に応じて設定
color: ${props => props.color ? props.color : "palevioletred"};
`;
// Wrapperはsectionタグ
const Wrapper= styled.section`
// スタイル
padding: 4em;
background: papayawhip;
`;
return (
<Wrapper>
<Title color="red">Hello!</Title> {/*赤*/}
<Title color="#4169e1">World</Title> {/*青*/}
<Title>styled-components</Title> {/*ピンク*/}
</Wrapper>
);
}
CSS 프레임워크
구성 요소와 스타일의 프로그램 라이브러리를 제공합니다.
tailwind CSS
sample.tsx
const App = () => {
return (
<div className="md:flex space-x-4 text-white">
<button className="bg-blue-400">Apply</button>
<button>Cancel</button>
</div>
)}
UI 라이브러리
material UI
<Button variant="contained" color="success">
Success
</Button>
Chakra UI
chakra.tsx
<Button
size='md'
height='48px'
width='200px'
border='2px'
borderColor='green.500'
>
Button
</Button>
SCSS x BEM
사전 프로세서로 사용된 Sass를 설명하겠습니다.Sass가 자주 주는 디자인 기법에는 BEM이 있다.이 두 그룹이 묘사하기에는 좀 지루하지만 이름 충돌을 피하면서 보수적인 스타일을 묘사할 수 있다.
그러나 구성 요소 가이드에 있어서는 적합하지 않다고 생각합니다.즉, 구성 요소가 가리키는 방향을 이용하지 않고 '}' 스타일에 직접 맞추면 SCSS x BEM은 매우 좋은 수법이다.그러나 구성 요소를 중심으로 하는 경우 모든 위젯(소단위)이 스타일을 닫고 설명하기 때문에 이름의 충돌이 발생하기 어렵다.
이 때문에 BEM과 SCSS는 오히려 지루해 보이고 명명 시간과 기술량이 늘어나 여분의 시간이 필요하다.
결과적으로 리액트에서는 너무 사용하지 않는 것이 좋다고 생각합니다.
sample.scss
.article-list {
width: 100%;
&__article-title {
font-size: 20px;
}
}
뭐가 좋을까?
리액트에서 구성 요소 방향으로 디자인(Atomic 디자인 등)한다면 UI 블라인드(Chakra UI 등)를 활용하면서 Tailwind CSS를 활용하는 것이 현 상황에 가장 적합하다는 게 제 견해입니다.
이유는 다음과 같다.
두 번째도 그 이름과 같다.TailwindCSS는 실용 프로그램이라고는 하지만 패딩 설정, 술집 스타일, 스마트폰 등 스펀지 대응 방법 등을 상세히 기술할 수 있다.
세 번째는 CSS 파일이 분리되지 않아도 되고 나타나는 속도도 빠르고 파일 수도 줄어들기 때문이다.나는 보수주의에 충실할지 고민 중이다.
최후
잘못된 점이 있으면 지적해 주십시오.
참고 자료
Reference
이 문제에 관하여(React에서 CSS를 어떻게 활용합니까?스스로 결론을 내려 하였다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/yuki_tu/articles/38c8df79522563텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
