2019년 React에서 JS의 CSS-CSS 및 인라인 스타일 살펴보기

JS의 CSS는 유일한 React가 아닙니다. 그러나 저는 React를 좋아합니다. 이것은 바로 제가 가장 좋아하는 JS 라이브러리 중 하나입니다. 전단 응용 프로그램을 작성할 수 있기 때문에 JS 솔루션의 CSS, 특히 React, 그리고 제가 그것들에 대한 느낌을 토론할 것입니다!

일반 CSS 소개

깊이 연구하기 전에, 나는 우리가 먼저 React 응용 프로그램의 상하문에서 좋은ol'CSS를 사용하면 무엇을 실현할 수 있는지 보아야 한다고 생각한다.

// Button.js
import React from 'react'
import './Button.css'

const Button = () => {
  return(
    <button className="button button-green">
      I think I'm green
    </button>
  )
} 

/* Button.css*/
.button{
  border-style: solid;
  border-width: 2px;
  border-radius: 2rem;
}

.button-green {
  background-color: green;
  border-color: white;
  color: white;
}

그래서 이게 정상으로 보이는 거 맞죠?className를 제외하고는 일반적인 HTML과 CSS처럼 보입니다.Reactclass === className에 익숙하지 않은 경우 class 는 JS에서 보존 문자이고 JSX는 내장형 JS가 있는 HTML이기 때문에 0이 아닙니다.

React에서 CSS를 사용할 때 발생한 문제

우리가 시작하기 전에, 나는 절대로 CSS의 전문가나 대가가 아니라는 것을 성명해야 한다.나는 그것으로 내 발을 차서 보기에 좋은 반응 규칙을 세울 수 있다.나는 어떤 미친 CSS 기교도 말할 수 없고, 순수한 CSS로 애니메이션 Pikachu를 만들 수도 없다.
그렇기 때문에 나는 CSS의 모든 함정이나 그 함정을 복구하기 위한 CSS의 새로운 기능에 대해 이야기하는 척도 하지 않기 때문에 2014년부터 이 우수한 resource을 포기할 것이다.나는 너로 하여금 그것이 여전히 유효한지 아닌지를 결정하게 할 것이다.

글로벌 네임스페이스❌

내가 국경원법을 쓸 수 있다고요?

When the time comes, you won't have to.

내 위의 링크를 보면 전역 이름 공간이 CSS 덮어쓰기의 첫 번째 문제라는 것을 알 수 있습니다.그러나 우리는 이런 진동을 느꼈다. 이것이 바로 경계원법과 같은 명명약정이 존재하는 이유다.
CSS 예제의 .button 및 .button-green 은 이미 우리가 도입한 2개의 전역 이름 공간이다.
응용 프로그램이 증가함에 따라, 나는 작성된 CSS 규칙도 끊임없이 증가하고 있음을 발견했다.작은 조정과 사용하지 않은 스타일을 통해 불필요한 중복 스타일을 만들어 응용 프로그램을 확대합니다.일부 설정은 사용하지 않은 CSS가 가방에 포함되지 않도록 보장하지만, 코드 라이브러리에서 사라지지 않습니다. 큰일입니다.

느슨한 결합❌

react 프로그램을 만들어서 구성 요소 스타일을 같은 디렉터리에 저장할 수 있지만, 구성 요소 파일에 엄격하게 연결된 것은 없습니다.반대로 선택기에 지정한 규칙을 인용하고 있습니다.비록 파일 구조는 다르지만, 이 양식들은 다른 곳에서 인용할 수 있다.이것은 단지 또 다른 고려해야 할 일일 뿐이다.

육중한 컨트롤❌

CSS만 사용할 때, 변경 요소 클래스를 기반으로 모든 스타일의 변경을 제어하는 과정에서 많거나 적거나 갇힐 수 있습니다.Vanilla Javascript나 JQuery에서 더 자연스러운 것 같지만 React를 사용할 때 항상 거칠게 느껴집니다.단독 구성 요소에서 보기에 직접 접근할 수 있지만, 이 모든 논리는 CSS 클래스의 다른 조합을 참조하는 데 사용됩니다.

내연 스타일 알아요.

모듈이 없는 React 응용 프로그램의 또 다른 스타일은 내연 스타일입니다.지금 뒤에 있는 사람들이 내연 스타일이 얼마나 나쁜지 상관하지 마라. 왜냐하면 그것은 사실상 내가 위장하고 있기 때문이다.HTML의 내연 스타일은 엉망이고, 클래스 기반 스타일은 엉망이라는 것을 우리는 모두 알고 있다.하지만 JSX입니다.

// Button.js
import React from 'react'

const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
    color: "white"
  };

  return(
    <button style={buttonGreen}>
      I think I'm green
    </button>
  )
}

이거 그렇게 안 좋아 보이죠?
여기에서 CSS 규칙이 완전히 같지 않다는 것을 알 수 있습니다.우리는 꼬치 사례를 보지 못하고 낙타 사례를 우리의 규칙으로 사용했다.그것들은 자바스크립트 대상에 비추고, 그 값은 인용부호에 봉인되어 문자열로 쓰인다.

글로벌 네임스페이스✅

우리의 내연 스타일 예시에서 buttonGreen 는 이 파일의 로컬 변수이기 때문에 우리는 응용 프로그램에서 임의의 buttonGreen 변수를 가지고 충돌하거나 특정한 명명 약정을 따르지 않을 수 있다.

느슨한 결합✅

이러한 스타일은 로컬에서 정의되기 때문에 내보내고 가져오려고 노력하지 않으면 사용할 수 없습니다.이상적인 상황에서 나쁜 일이 발생하는 것을 막을 충분한 절차가 있다.
개발자들이 더 목적적인 방식으로React를 사용하여 다시 사용할 수 있는 유니버설 구성 요소를 만드는 것을 촉진시켰다고 생각합니다.

육중한 컨트롤✅

// Button.js
import React from 'react'

const Button = ({backgroundColour, colour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    color: colour,
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}

// SomePage.js
import React from 'react';
import Button from 'Button';

const SomePage = () => (
  <Button backgroundColour="blue" colour="white">I'm going to be blue</Button>
)

현재, 이것은 매우 간단한 예이지만, 우리는 이미 구성 요소에 전달된 일부 도구를 통해 색깔을 Button 특정하게 제어한 것을 볼 수 있다.나는 이런 방법을 좋아한다. 왜냐하면 그것은 문서에서 나온 것이고 구성 요소의 모든 논리를 보존했기 때문이다.나는 구성 요소 중의 도구가 무엇을 제어하는지 확실히 알고 있다. 구성 요소의 사용은 매우 명확하다. 이것은 배경색을 파란색으로 설정하고 색을 흰색으로 설정한다.

나는 내연 스타일의 어떤 것도 좋아하지 않는다

스타일에 객체 사용

나는 이런 풍격의 문법을 좋아하지 않는다.이러한 위반은 CSS를 Javascript 객체로 변환하는 번거로운 작업을 초래할 수 있습니다. ; 를 , 로 대체하고 규칙을 "" 에 포장하며 키를 낙타 봉의 대소문자로 봉합니다.당신의 디자이너에게 이런 방법은 그것을 보자마자 폐쇄될 것이다. 이것은 이미 충분히 무섭다.

내연 스타일은 여전히 내연이다

결국, 이것은 여전히 내연 스타일입니다. 당신의 HTML은 여전히 추악한 스타일 속성으로 끝날 것입니다.

개인적으로 React에서 내연 스타일을 사용합니까?

아니.
하지만 이것은 JS에서 사랑하는 오래된 CSS의 끝이 아니다!멋진 패키지가 있습니다. 멋진 일을 했고 JS에서 CSS의 가독성, 확장성, 성능에 관한 여러 가지 문제를 해결하려고 했습니다.
이 시리즈에서 나는 이러한 해결 방안의 다양성을 연구하려고 한다. 그것이 높은 등급이든 밑에 숨겨져 있든.
본문을 작성할 때 저는 스타일화된 구성 요소, 감정과 JS를 사용했습니다.그중 하나가 멋있다고 생각되면 언제든지 댓글을 남겨주세요!
만약 네가 나를 따르거나 거기서 이야기를 나누고 싶다면, 나도 있다.나는 때때로 물건을 거기에 붙인다!