스타일이 지정된 구성 요소 소개 5 분

CSS가 이상합니다. 15 분 안에 기본 사항을 배울 수 있습니다. 그러나 스타일을 구성하는 좋은 방법을 찾으려면 몇 년이 걸릴 수 있습니다.

이것의 일부는 단지 언어 자체의 단점 때문입니다. 기본적으로 CSS는 변수, 루프 또는 함수가 없어 상당히 제한적입니다. 동시에 요소, 클래스, ID 또는 이들의 조합 스타일을 지정할 수 있다는 점에서 매우 관대합니다.

혼돈 스타일 시트

아마 당신이 경험했던 것처럼, 이것은 종종 혼란을위한 레시피입니다. SASS 및 LESS와 같은 전처리 기는 유용한 기능을 많이 추가하지만 CSS 무정부 상태를 막는 데 큰 도움이되지는 않습니다.

이 조직 업무는 BEM과 같은 방법론에 맡겨져 있습니다. 유용한 방법은 전적으로 선택 사항이며 언어 나 툴링 수준에서 시행 할 수 없습니다.

CSS의 새로운 물결

몇 년 동안 빠르게 발전해 왔으며, 새로운 JavaScript 기반 도구가 CSS 작성 방식을 변경하여 근본적으로 이러한 문제를 해결하려고 노력하고 있습니다.

Styled Components는 이러한 라이브러리 중 하나이며 혁신과 친숙 함의 혼합으로 인해 많은 관심을 끌었습니다. 따라서 React를 사용하고 (그렇지 않으면 JavaScript 학습 계획과 React 소개를 확인)이 새로운 CSS 대안을 살펴볼 가치가 있습니다.

나는 최근에 개인 사이트를 재 설계하기 위해이 도구를 사용했고, 오늘 나는 그 과정에서 배운 것들을 공유하고 싶었다.

구성 요소

스타일이 지정된 구성 요소에 대해 이해해야 할 주요 사항은 그 이름을 문자 그대로 사용해야한다는 것입니다. 더 이상 클래스 나 HTML 요소를 기반으로 HTML 요소 나 구성 요소를 스타일링하지 않습니다.

Hello World

h1.title {
  글꼴 크기 : 1.5em;
  색깔 : 자주색;
}

대신 자체 캡슐화 된 스타일을 가진 스타일이 지정된 구성 요소를 정의합니다. 그런 다음 코드베이스 전체에서 자유롭게 사용합니다.

'스타일 구성 요소'에서 스타일 가져 오기;
const 제목 = styled.h1`
  글꼴 크기 : 1.5em;
  색깔 : 자주색;
`;
 Hello World </ Title></pre><p>이것은 사소한 차이처럼 보일 수 있으며 실제로 두 구문은 매우 유사합니다. 그러나 중요한 차이점은 스타일이 이제 구성 요소의 일부라는 것입니다.</p><p>다시 말해, 컴포넌트와 스타일 사이의 중간 단계로 CSS 클래스를 제거하고 있습니다.</p><p>공동 제작자 인 Max Stoiber는 다음과 같이 말합니다.</p><p>"스타일 구성 요소의 기본 아이디어는 스타일과 구성 요소 간의 매핑을 제거하여 모범 사례를 시행하는 것입니다."</p><h3>오프로드 복잡성</h3><p>HTML 요소를 직접 스타일링하는 대신 CSS를 사용하는 요점은 (<font> 태그를 기억하십니까?)이 중간 클래스 클래스를 도입하여 스타일과 마크 업을 분리하는 것이기 때문에 처음에는 직관적이지 않은 것처럼 보입니다.</p><p>그러나 이러한 분리는 많은 복잡성을 야기하며, CSS와 비교할 때 JavaScript와 같은 "실제"프로그래밍 언어는 이러한 복잡성을 처리하는 데 훨씬 더 적합하다는 주장이 있습니다.</p><h3>수업에 대한 소품</h3><p>이 비 클래스 철학에 따라 스타일 구성 요소는 구성 요소의 동작을 사용자 정의 할 때 클래스보다 소품을 사용합니다. 따라서 대신 :</p><pre><h1 className = "title primary"> Hello World </ h1> // 파란색이됩니다.</pre><pre>h1.title {
  글꼴 크기 : 1.5em;
  색깔 : 자주색;
  
  &.일 순위{
    파란색;
  }
}</pre><p>당신은 쓸 것입니다 :</p><pre>const 제목 = styled.h1`
  글꼴 크기 : 1.5em;
  색상 : $ {props => props.primary? 'blue': 'purple'};
`;</pre><pre><Title primary> Hello World </ Title> // 파란색이됩니다</pre><p>보시다시피 스타일 구성 요소를 사용하면 모든 CSS 및 HTML 관련 구현 세부 정보를 유지함으로써 React 구성 요소를 정리할 수 있습니다.</p><p>즉, 스타일 구성 요소 CSS는 여전히 CSS입니다. 따라서 이와 같은 것은 완전히 유효한 코드이지만 (비 관용적이지만)</p><pre>const 제목 = styled.h1`
  글꼴 크기 : 1.5em;
  색깔 : 자주색;
  
  &.일 순위{
    파란색;
  }
`;</pre><pre><Title className = "primary"> Hello World </ Title> // 파란색이됩니다</pre><p>이것은 스타일이 지정된 구성 요소를 쉽게 넣을 수있는 기능 중 하나입니다. 의심스러운 경우 언제든지 아는 내용으로 넘어갈 수 있습니다!</p><h3>경고</h3><p>스타일 구성 요소는 아직 젊은 프로젝트이며 일부 기능은 아직 완전히 지원되지 않는다는 점도 언급해야합니다. 예를 들어 부모에서 자식 구성 요소의 스타일을 지정하려면 현재 CSS 클래스를 사용해야합니다 (적어도 styled-components v2가 나올 때까지).</p><p>서버에 CSS를 사전 렌더링 할 수있는 "공식적인"방법은 없지만 스타일을 수동으로 주입하면 가능합니다.</p><p>스타일 구성 요소가 자체 무작위 클래스 이름을 생성한다는 사실은 브라우저의 개발 도구를 사용하여 스타일이 원래 정의 된 위치를 파악하기 어렵게 만들 수 있습니다.</p><p>그러나 가장 고무적인 점은 스타일 구성 요소 핵심 팀이 이러한 모든 문제를 알고 있으며이를 하나씩 해결하는 데 어려움을 겪고 있다는 것입니다. 버전 2가 곧 출시 될 예정이며 정말 기대됩니다!</p><h3>더 알아보기</h3><p>여기서의 목표는 스타일이 지정된 구성 요소의 작동 방식을 자세히 설명하는 것이 아니라 체크 아웃 할 가치가 있는지 스스로 결정할 수 있도록 약간의 개요를 제공하는 것입니다.</p><p>궁금한 점이 있으면 여기에서 스타일 구성 요소에 대해 자세히 알아볼 수있는 곳이 있습니다.</p><ul><li>Max Stoiber는 최근 Smashing Magazine의 스타일 구성 요소에 대한 기사를 작성했습니다.</li><li>스타일이 지정된 구성 요소 저장소 자체에는 광범위한 설명서가 있습니다.</li><li>Jamie Dixon의이 기사에서는 스타일이 지정된 구성 요소로 전환 할 때 얻을 수있는 몇 가지 이점에 대해 간략하게 설명합니다.</li><li>라이브러리가 실제로 어떻게 구현되는지에 대해 더 배우려면 Max의이 기사를 확인하십시오.</li></ul><p>그리고 더 나아가고 싶다면 새로운 웨이브 CSS에 대한 다른 글래머를 확인하십시오!</p><p>자체 홍보 시간 : Google은 양식, 데이터로드 및 사용자 계정으로 완전한 스택 형 React 및 GraphQL 앱을 만드는 가장 쉬운 방법 인 Nova에 도움이되는 오픈 소스 기고자를 찾고 있습니다. 아직 스타일 구성 요소를 사용하지 않지만 가장 먼저 구현할 수 있습니다.</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">또한보십시오</h4><a href="/design/building-a-color-palette-framework-76db07/" title="컬러 팔레트 프레임 워크 구축">컬러 팔레트 프레임 워크 구축</a><a href="/design/design-thinking-a-manual-for-innovation-d0eeae/" title="디자인 사고 : 혁신을위한 매뉴얼">디자인 사고 : 혁신을위한 매뉴얼</a><a href="/design/mind-the-gap-41a878/" title="격차 해소">격차 해소</a><a href="/design/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-af861f/" title="Wikipedia의 페이지 미리보기를 디자인 한 방법 및 향후에 수행 할 수있는 작업">Wikipedia의 페이지 미리보기를 디자인 한 방법 및 향후에 수행 할 수있는 작업</a><a href="/design/introducing-boosts-an-all-new-way-to-show-your-support-in-basecamp-fde145/" title="부스트 소개 :베이스 캠프에서 지원을 보여주는 완전히 새로운 방법">부스트 소개 :베이스 캠프에서 지원을 보여주는 완전히 새로운 방법</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sk flag"></i></a><a href="https://ru.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ru flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="dk flag"></i></a><a href="https://el.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="gr flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fi flag"></i></a><a href="https://fr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fr flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="in flag"></i></a><a href="https://hr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hr flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="it flag"></i></a><a href="https://ja.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="jp flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>