스타일 컴포넌트 대 SCSS(SCSS) 이하

스타일 컴포넌트 대 SCSS(SCSS) 이하

닫혔어. 이 질문은 좀 더 자세히 설명해야 합니다.초점을 맞춥니다.현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 하나의 문제에 초점을 맞추도록 질문을 업데이트하십시오.

3년 전에 문을 닫았어요

이 질문을 개선하다

우연히 리액트를 발견했다.JS보일러플레이트는 평판이 좋고 커뮤니티에 의해 구동됩니다.스타일링 섹션은 스타일링 컴포넌트 CSS를 더욱 강조했지만 기존 CSS 스타일링 방법론으로의 전환을 멈추지 않았습니다.이 때문에 스타일드 컴포넌트 CSS의 특징과 채택이 필요한 이유에 관심이 쏠렸습니다.

스타일 컴포넌트 CSS에 대한 이해:

1. 컴포넌트 중심 아이디얼로지CSS도 컴포넌트입니다.- 이거 정말 멋지다!
2. 필요한 것을 적재하고 필요할 때 게으른 CSS를 장착합니다.
3. 테마 프로바이더, 스킨, 모듈러 및 다이내믹 - 다른 libs에서도 실현 가능
4. 컴포넌트 DOM 및 그 스타일의 서버측 구조.

질문은 다음과 같습니다.

1. 브라우저는 Javascript 파싱과는 별도로 CSS를 파싱하도록 진화되어 있는데, 왜 우리는 이 파싱에서 벗어나 Javascript에 모든 것을 맞추려고 하는가?

2. 엔드로 이 라이브러리는 실제로 시 하여 styled-component CSS javascript에 .이 라이브러리는 실제로 런타임에 스타일을 해석하여 내부에 넣습니다.<style />각 컴포넌트가 온디맨드 방식으로 로드될 때 태그를 지정합니다.즉, 추가 부하와 로직이 최종적으로 브라우저의 실행 사이클에 기여하는 것을 의미합니다.게게왜 요요?

   된 모든 되며, 되는 것을 합니다).style/ tags - ) / Re-Inventing CSS interpreters - CSS の tag tag tag ）

3. 계산 을 사용하다<style />브라우저 리플로우/재도장 원인이 되는 헤드태그에 있습니까?

4. 이를 통해 얻을 수 있는 성능상의 이점은 무엇입니까?

5. Post-CSS 및 SCSS 클래스명 해싱과 같은 애드온 라이브러리/옵션을 통해 동적 클래스명 해싱은 모든 사람이 말하는 문제를 거의 해결합니다.왜 SC는 아직인가?

커뮤니티, 저를 위해 진실을 밝혀주시거나 제가 틀렸다면 정정해 주세요.

---

CSS 스타일을 변경할 때 브라우저의 퍼포먼스가 얼마나 비싼지에 대해 repaint 또는 DOM reflow에 대해 설명하는 좋은 기사도 있습니다.

• https://developers.google.com/speed/articles/reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
• https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

쓰고 있어요.SCSS )SASS 오랜 , 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」 「 」를 사용하고 있습니다.Styled-Components몇 개의 프로젝트와 몇 개의 대규모 프로젝트도 몇 개 있어요

도 둘 다 Styled-Components제게는 한 걸음 더 나아간 것처럼 느껴집니다.

스타일 컴포넌트 - 장점

1. 완전한 스타일 분리. 팀원끼리 작업할 때 발생할 수 있는 버그를 방지합니다.한 팀원이 다른 팀원의 스타일을 덮어쓸 수 없습니다.(여러 장소가 동일한 스타일의 구성 요소를 공유하지 않는 한)
2. 클래스 이름이 자동 생성될 때 수동으로 처리할 필요가 없음(컴포넌트를 선택하는 것이 클래스 이름보다 다소 용이함)

3. JSX 파일 자체에서 CSS를 사용하는 것이 더 쉽다는 것을 알게 되었습니다(이전부터의 판단과는 반대).

4. 스타일 내에서 javascript 변수를 쉽게 사용할 수 있습니다(테마 변수 2세트 필요 없음).

스타일 컴포넌트 - 단점

1. 각 스타일 컴포넌트는 또 하나의 래퍼 기능이며, 스타일 컴포넌트가 많으면 기능이 많아집니다.즉, 모든 코드를 "컴파일"해야 하기 때문에 효율이 떨어집니다.
2. 가장 큰 단점: 스타일을 변경하면 번들을 다시 컴파일해야 하며 앱 상태가 재설정될 수 있습니다.

단점은 일부 시나리오에서만 볼 수 있지만 반드시 모든 것은 아닙니다.

---

SCSS/LES의 장점은 위의 단점과 반대되는 것으로 볼 수 있지만 변수(IMHO)를 사용할 때 혼합이나 빠른 개발 등의 단점이 몇 가지 더 있습니다.로컬 셀렉터 변수를 정의하는 것은 "추악한" 경우가 있습니다.

다음의 간단한 예를 비교해 주세요.

SCSS§:

.icon{
  $size: '20px';
  width: $size;
  height: $size;
  margin-left: $size/2;
}

Styled-Components「 」 「 」 。

const Icon = styled.i(props => {
  const size = 20; // easier to use Number instead of String for calculations 
  return `
    width: ${size}px;
    height: ${size}px;
    margin-left: ${size/2}px;
`});

변수는 분명히 '외부'에서 정의되었을 .Icon한 후 된 서브컴포넌트로 되어 CSS와더 수 때문입니다.

const Header = styled.header`
   > ul{
     ...
   }

   li{
     ...
   }

   img{...}

   navigation{...}
`

각각의 HTML 요소를 독자적인 스타일 컴포넌트로 추출하는 것이 바람직하다고는 할 수 없습니다.앱 전체에서 반복되거나 반복될 수 있는 컴포넌트에 대해 대부분 실행됩니다.

SAS 믹스입니다만, javascript 기능으로 변환할 수 있기 때문에, 여기서 SAS의 장점은 별로 없습니다.

전체적으로 스타일드 컴포넌트를 사용하는 것은 즐겁고 간단하지만 스타일과 프레임워크/컴포넌트의 결합이 긴밀해지는 부작용이 있습니다.또한 퍼포먼스 저하도 있습니다(실제로 느려지는 것은 없지만 그래도 마찬가지입니다.

브라우저는 Javascript 파싱과는 별도로 CSS를 파싱하도록 진화되어 있는데, 왜 우리는 이 파싱에서 벗어나 Javascript에 모든 것을 맞추려고 하는가?

Javascript와 HTML(JSX)을 혼재시키고 CSS(JSS 또는 기타)를 혼재시키면 컴포넌트가 단일 파일에 적합한 솔리드모듈이 됩니다.더 이상 스타일을 별도의 파일에 보관할 필요가 없습니다.

그 후 기능 마법이 발생합니다.JSX는 "HTML"을 반환하는 원시 데이터의 순수 함수이므로(실제로 반환되지 않음), CSS-in-JS는 "CSS"를 반환하는 순수 함수 또는 원시 데이터입니다(실제로 반환되지 않음).이 시점부터 JSX와 CSS-in-JS에 대해 읽어볼 가치가 있다고 생각합니다.

Styled-component CSS는 javascript 라이브러리를 클라이언트 엔드로 발송합니다.이 라이브러리는 실제로 런타임에 스타일을 해석하여 내부에 넣습니다.<style />각 컴포넌트가 온디맨드 방식으로 로드될 때 태그를 지정합니다.즉, 추가 부하와 로직이 최종적으로 브라우저의 실행 사이클에 기여하는 것을 의미합니다.

런타임뿐만 아니라.CSS-in-JSS는 CSS를 반환하는 데이터의 함수이기 때문에 임의의 플랫폼에서 사용할 수 있습니다.노드를 선택하고 SSR를 추가하면style즉, CSS를 전달받은 최초의 경우와 동일하게 해석됩니다.

이게 왜 필요하죠?

리액트나 리덕스와 마찬가지로 jQuery와 마찬가지로 개발에도 편리하고 다른 lib와 마찬가지로 네트워크 부하와 브라우저 퍼포먼스 비용도 듭니다.

당신은 도서관이 문제를 해결해주기 때문에 도서관을 이용합니다.문제가 없을 것 같으면 왜 도서관을 이용하죠?

계산 을 사용하다<style />브라우저 리플로우/재도장 원인이 되는 헤드태그에 있습니까?

리플로우를 강요하는 것들이 너무 많아.

브라우저는 스마트합니다.스타일이 바뀌지 않으면 다시 칠하려고도 하지 않아요.즉, 차이를 계산하지 않기 때문에 CPU 시간이 소요됩니다.

스타일 계산의 범위와 복잡성에 대한 좋은 소개가 있습니다. 주제를 더 깊이 이해하기 위해 읽을 가치가 있습니다.

언급URL : https://stackoverflow.com/questions/46747038/styled-components-vs-sass-scss-or-less