반응 컴포넌트 스타일링 딜레마

Question

나는 React와 Redux를 사용하여 새로운 프로젝트를 만들기 시작했다. 나는 React를 처음 사용하고 어떤 스타일링 방법을 사용해야하는지 잘 모릅니다. 외관상으로는 성능을 저하시키지 않고 CSS3의 모든 기능을 제공하고 유지 보수 할 수있는 기능을 사용하고 싶습니다. 그래서 선택 사항은 다음과 같습니다

라듐
1. SASS
2. CSS 모듈

내가 SASS와 CSS3.Nevertheless 인라인 작업 오랜 경험을했습니다를 사용하여

인라인 스타일링 스타일링 정말 나를 감동하지만 그것은 autoprefixer 및 기타 좋은 자동화 기능을 제공하지 않습니다 tures. 분명히 궁극적 인 선택은 없지만 가장 효율적인 것은 무엇입니까?

Answer 1

저는 glamor과 glamorous의 조합을 개인적으로 권장합니다. Glamorous는 매력을 키워서 서로 다른 목적으로 활용할 수 있습니다. 당신은 같은 스타일의 일을 더 직관적 인 구성 요소, 반응 만들 수 있습니다, 매력적인으로

css.global('h1', { fontSize: '3rem' }) 

: 매력으로

, 당신은 같은 페이지에 전역 스타일을 삽입 할 수 개인적으로

glamorous.Div({ padding: '2rem', background: 'red' }) 

return <Div>Some text</Div> 

를 I CSS-in-JS와 Sass/LESS 같은 사전 처리기를 사용하거나 CSS와 유사한 도구를 사용하는 것을 선호합니다. 템플릿 태그 나 다른 파일에 CSS를 작성하는 것이 성 가시고 성가시다. 스타일을 지정하기 위해 JavaScript를 직접 활용하면 실제로 익숙해지면 실제로 꽤 즐겁습니다.

뻔뻔 플러그 : 내가이 자동으로 부트 스트랩에서 무엇을 발견처럼 도움 스타일링 클래스를 생성 CSS -에서 - JS 프로젝트에 대한 도우미 라이브러리를 만들었습니다 (예 : .text-center, .ml-auto, .display-block 등). Euphoria이라고 불리는 것을 확인해보십시오!