왜 우리는 줄곧 JS의 CSS에 대해 이야기하고 있습니까?

html/css 처음 쓴 거 기억나?너무 좋아요, 그렇죠?

<div style="color: blue">Hello world</div>

이렇게 간단하고, 이렇게 순수하다.
그리고 당연히 고급 개발자™ css를 이렇게 쓰지 말고 단독 파일에 넣으세요.

<div class="blue-text">Hello world</div>

/* style.css */
.blue-text {
  color: blue;
}

더 많은 요소와 페이지를 구축하면 style.css 이 길어지기 시작하므로 여러 파일로 분할합니다.

/* landing-page.css */
.heading {
  font-size: 64px;
}
button {
  background: orange;
}

/* forms.css */
button {
  background: blue;
}

곧 하나의 요소에 대한 스타일이 충돌하기 시작하고 다른 요소를 덮어쓰는 것을 깨닫게 될 것입니다.어떤 형식의 이름 간격을 사용해서 이 스타일의 범위를 만들 수 있습니다.
그렇게 지도 모른다, 아마, 아마...

<form>
  <input placeholder="email" />
  <button>Submit<button>
</form>

/* form.css */
form button {
  background: blue;
}

또는 더 고급스러운 것, 예를 들면BEM:

<form class="form">
  <input class="form__input" placeholder="email" />
  <button class="form__button">Submit<button>
</form>

/* form.css */
.form__button {
  background: blue;
}

나는 경계원법(그리고 OOCSS, ITCSS 등 약정에 기초한 다른 방법)을 매우 좋아한다.당신은 팀에서 흔히 볼 수 있는 관례를 채택하기만 하면 까다로운 문제를 해결할 수 있습니다.
어쨌든, 당신이 여기서 해결해야 할 문제는 스타일의 범위를 특정한 상하문으로 구분하는 것입니다.
같은 문제와 해결 방안도 React land에 도입되었다.LoginForm 예:

function LoginForm() {
  return (
    <form className="form">
      <input placeholder="username" type="text " />
      <input placeholder="password" type="password" />
      <button className="button">Submit</button>
    </form>
  )
}

우리는 이 단추가 응용 프로그램의 다른 단추와 충돌할지 모른다.우리는 반드시 이곳에서 어떤 범위를 사용해야 한다.여전히 React에서 BEM과 같은 이름 공간을 사용할 수 있습니다.

<button className="form__button">Submit</button>

이것이 바로 이야기가 재미있는 곳이다.React 구성 요소에서, 우리는 더 이상plainHTML을 작성하지 않고, JSX을 작성합니다.
JSX의 위 줄은 구축할 때 이javascript 블록으로 변환됩니다.

React.createElement(
  'button',
  { className: 'form__button' },
  'Submit'
)

현재 프로그래밍 언어 (javascript) 의 모든 기능을 사용할 수 있습니다.너는 순수한 CSS가 할 수 없는 일을 할 수 있다.
 

JS의 CSS 약속

수동으로 완성하지 않고 범위나 이름 간격을 만드는 작업을 언어로 연기할 수 있습니다.
CSS Modules는 js 생태계에서 css의 포털 약물이다.
이것은 네가 쓴 것이다.

/* form.css */

button {
  /* look ma, no name spacing */
  background: blue;
}

import styles from './form.css'

function LoginForm() {
  return (
    <form>
      <button className={styles.button}>Submit</button>
    </form>
  )
}

이것이 바로 styles.buttonget의 컴파일 목적입니다.

function LoginForm() {
  return (
    <form>
      <button className="form__button__abc1">Submit</button>
    </form>
  )
}

이것은 당신이 손으로 쓴 내용과 매우 비슷하지만, 충돌을 피하는 책임에서 벗어날 수 있다.나는 나의 풍격을 국부적인 범위의 풍격으로 쓸 수 있다는 것을 발견했고, 이것은 나로 하여금 믿을 수 없는 해방을 느끼게 했다.
 

JS 라이브러리의 다음 CSS

우리는 도구/자동화 위치에서 언어의 힘을 이용할 수 있고, 그것을 창작 풍격으로 이끌 수 있습니까?
이것이 바로 그것이 논쟁을 일으키는 곳이다.JS의 모든 CSS는 약간의 다른 방법을 채택하여 균형을 통해 어떤 새로운 기능을 실현한다.
예를 들어 jsxstyle 요소에서 고전적인 내연 스타일처럼 보이는 스타일을 작성할 수 있지만, 패키지 플러그인을 통해 파일에 추출할 수 있습니다.

<Block component="button" backgroundColor="blue" />

한편, styled-components css에서 혼합 운행할 때 논리를 허용한다.이것은 터치 설정 없이 사용할 수 있지만 스타일을 추출할 수 없다는 것을 의미합니다.

const Button = styled.button`
  background: ${getBackground};
`

function getBackground(props) {
  if (props.appearance === 'primary') return 'blue'
  else if (props.appearance === 'disabled') return 'grey'
  else return 'white'
}

linaria 태그를 통해 재미있는 중간 노선을 취했습니다. 구성 요소 옆에 클래스를 만들 수 있습니다. 이 클래스는 구축 과정에서babel 플러그인을 사용하여 추출할 수 있습니다.이것은 자바스크립트를 사용할 수 있지만, 앞의 예시처럼 실행 논리에 의존할 수 없다는 것을 의미합니다.

const button = css`
  background: ${colors.blue};
`

function MyComponent() {
  return <button className={button}>Click me</button>
}

보시다시피 모든 라이브러리는 일부 내용을 표에 넣고 다른 내용을 교환합니다.이것이 바로 그것이 왜 이렇게 논란이 되는지, 너는 어떤 라이브러리에서 그것의 결함을 찾을 수 있다.css 네임스페이스 스타일의 작업을 자동화하지만 과도한 공정으로 간주될 수 있는 설정이 필요합니다(우리는 이미 수동 경계 원법이 있어 아무런 설정 없이 작업할 수 있습니다.)css-modules 다른 한편,babel/webpack 설정은 필요하지 않지만, 라이브러리가 실행될 때 나타나서javascript 패키지의 크기를 약간 증가시켜야 합니다.
 
프로젝트에 대한 유효한 평가를 선택해야 합니다.
design system in Auth0에 대해 우리는 styled-components를 선택했다. 왜냐하면 이것은 우리가 기본적인 영패와 디자인 모델을 바탕으로 유연한 구성 요소를 만드는 데 도움을 주었기 때문이다.
지난주에 나는 표 논리를 포함하는 일련의 페이지를 구축해야만 했다. 나는 styled-components 를 사용하는 것을 매우 좋아한다. 왜냐하면 이것은 내가 전역과 페이지의 특정한 양식을 작성하는 데 도움을 주었기 때문이다. 경계원법과 같은 수동적인 방법이 필요하지 않기 때문이다.
너는 내 친구가 만든 이것comparison table을 사용할 수 있다.
이게 당신의 여행에 도움이 됐으면 좋겠어요.
Sid