2021년에는 JS 프레임워크에서 5개의 CSS 사용 예정

작성자Nwose Lotanna Victor
인터넷 개발이 끊임없이 발전함에 따라 새로운 업무 방식이 끊임없이 나타나고 지역사회도 이에 따라 세워진다.JS 프레임워크를 사용하여 전방 개발을 처리할 때 구성 요소의 스타일링은 모든 구성 요소에 각각 전용 스타일시트를 제공하는 데 사용되었고 이러한 스타일링은 DOM에 적용되었다.

소개하다.

CSS는 개발자에게 정말 힘든 일입니다. 크로스 구성 요소 유지보수 스타일과 상하문 전환은 힘든 일이 될 수 있습니다. 만약 이전에div나 단추를 가운데에 놓으려고 시도했다면, 이 점을 고려할 수 있습니다.JavaScript를 주로 사용하는 개발자는 스타일을 혁신하기 시작했고 JS에서도 완성할 수 있는지 물었다.
JS의 CSS는 자바스크립트를 사용하여 구성 요소의 스타일을 온라인으로 설정하는 새로운 스타일링 방법으로 컴파일할 때 JS가 해석되고 CSS 규칙이 생성되어 DOM에 전송된다.이것은 당신이 CSS 학습 곡선의 부담을 부담할 필요도, 완전히 이해할 필요도 없다는 것을 의미한다. 왜냐하면 그것은 현재 당신에게 완전히 추상적이기 때문이다.이런 방법은 유지보수가 쉽고 사용하기 쉽다는 약속(당신이 이미 알고 있는 JS를 고집하는 것처럼), 어떤 것은 심지어 전문적인 기능으로 CSS를 강화할 수 있다.
오늘 게시물에서는 바로 워크플로우에서 시험적으로 사용할 수 있는 JS 프레임워크의 CSS에 대해 설명합니다.

스타일 지정 어셈블리

이것은 현재 존재하는 JS 라이브러리에서 가장 유행하는 CSS이며, JS의 CSS라는 단어도 Styled Components에서 매우 유행한다.널리 사용됨에 따라 over 35,000 stars on GitHub 매달 1000만 개 이상의 프로젝트가 사용되고 있으며, 스타일링 구성 요소는 ES6 템플릿 텍스트를 사용하여 CSS 스타일을 내연적으로 정의할 수 있습니다.React 커뮤니티에서는 React 구성 요소의 스타일 디자인이 쉽기 때문에 인기가 많다.이것이 바로 버튼 설계의 간단함이다.

import styled from 'styled-components'
const Button = styled.button``

스타일 정의는 다음과 같습니다.

const Button = styled.button`
    background: transparent;
    border-radius: 3px;
    border: 2px solid palevioletred;
    color: palevioletred;
    margin: 0 1em;
    padding: 0.25em 1em;
`

스타일링 구성 요소는 많은 장점이 있습니다. 앞에서 언급한 일반 구성 요소를 제외하고, SASS를 사용하는 것처럼 선택기를 끼워 넣을 수 있습니다.클래스 이름 오류를 걱정할 필요가 없습니다. 클래스 이름이 자동으로 생성되어 DOM에 들어갈 때 관리되기 때문입니다.

정감

Emotion JS 라이브러리의 CSS로서 첫 번째 특별한 점은 프레임과 무관하기 때문에 Vue와 Angular 프로젝트에서 사용할 수도 있고 React에서 사용할 수도 있습니다.With over13,000 stars on GitHub Emotion은 매우 유연한 라이브러리로 JS 라이브러리의 다른 CSS를 바탕으로 구축된 것으로 그의 또 다른 장점은 예측성이 있기 때문에 CSS에 대해 아는 것이 적더라도 문제 없이 사용할 수 있다.아주 멋진 문서가 있습니다. 익숙한 vu 스타일일 수도 있고, 성능도 아주 좋습니다.
감정의 서스펜딩 버튼은 다음과 같습니다.

import { css, cx } from '@emotion/css'

const color = 'white'

render(
    <div
    className={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
        color: ${color};
        }
    `}
    >
    Hover to change color.
    </div>
)

오픈 소스 세션 재방송

생산 환경에서 웹 응용 프로그램을 디버깅하는 것은 어렵고 시간도 소모될 수 있다.OpenReplay는 풀스토리, 로그 로켓과 Hotjar의 소스 대체품이다.사용자가 한 모든 것을 감시하고 재방송할 수 있으며, 모든 문제에 대한 응용 프로그램의 표현을 보여 줍니다.
이것은 브라우저의 검사기를 열고 사용자의 어깨를 보는 것과 같다.
OpenReplay는 현재 유일하게 사용할 수 있는 오픈 소스 대안입니다.

즐거움 디버깅, 현대 전단 팀-Start monitoring your web app for free.

실을 꿰매다

이것은 매우 흥미로운 예이다.GitHub의 거의4,000 stars는 JS 라이브러리의 CSS로 운행 시간이 거의 0이다.서버 측 렌더링을 지원하며 변형을 지원합니다.기본적으로 CSS는 바늘귀가 있는 JS 라이브러리로 다시 상상된다.그것도 프레임워크와 무관하기 때문에 모든 전방 개발 라이브러리에 사용할 수 있습니다.CSS 속성까지 사용자 정의할 수 있는 스마트 토큰이 포함되어 있습니다.
봉합을 사용하면 스타일 주입을 할 수 있기 때문에 전체 라이브러리를 다운로드할 필요가 없습니다.Stitches는 모든 유형의 API, 토큰 인식 속성 및 사용자 정의 UTIL을 통해 재미있고 직관적인 전방위적인 경험을 제공합니다.
간단한 버튼은 다음과 같이 생성됩니다.

import { styled } from '@stitches/react';

const Button = styled('button', {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    '&:hover': {
    backgroundColor: 'lightgray',
    },
});

실을 꿰매다 라듐

Radium은 내연 양식의 CSS를 완전히 없애고 모든 양식을 글로벌화하는 급진적인 방법을 채택했다.이것은 기본적으로 우리에게 범위화된 양식을 제공했고 선택기를 사용하지 않아 죽은 코드나 중복된 기회를 없앴으며 표현력을 완전히 갖추고 있다.기본적으로 내연 스타일이 제한되어 있다고 말할 수 있지만, Radium은 미디어 조회, 브라우저, 마우스 상태 (예를 들어 누르거나 멈추기) 를 처리할 수 있는 표준 인터페이스를 제공합니다.
라듐의 버튼은 다음과 같습니다.

import Radium from 'radium';
import React from 'react';
import color from 'color';

class Button extends React.Component {
    static propTypes = {
    kind: PropTypes.oneOf(['primary', 'warning']).isRequired
    };

render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
        <button style={[styles.base, styles[this.props.kind]]}>
        {this.props.children}
        </button>
    );
    }
}

Button = Radium(Button);

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
    base: {
    color: '#fff',

// Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or [@media](http://twitter.com/media)) with the additional rules.
    ':hover': {
        background: color('#0074d9')
        .lighten(0.2)
        .hexString()
    }
    },

primary: {
    background: '#0074D9'
    },

warning: {
    background: '#FF4136'
    }
};

이것은 React 응용 프로그램을 위한 것으로 JS 라이브러리의 대다수 CSS에도 전용 React 라이브러리가 있습니다.

JSS

는 JavaScript의 CSS 추상화로 구성 요소 상태에 따라 규칙을 동적으로 출력합니다.그것은 초경량이다. 그것의 위대한 점은 통합이다. 통합은 React 통합, 스타일화된 구성 요소 통합, 그리고 많은 플러그인을 가지고 있다.JS의 일부 CSS는 어떻게 스타일을 생성하고 DOM에 주입 스타일을 연결했는지 기억하십니까? JSS는 구식 방식으로 스타일시트를 주입하기 전에 메인 스타일시트를 출력합니다.많은 유용한 플러그인은 JS 라이브러리의 다른 CSS에서 사용할 수 있는 기능을 실현할 수 있다. 예를 들어 플러그인, 전역 선택기, 플러그인 격리 등이다.
버튼은 다음과 같습니다.

import React from 'react'
import {render} from 'react-dom'
import {createUseStyles} from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const useStyles = createUseStyles({
    myButton: {
    color: 'green',
    margin: {
        // jss-expand gives more readable syntax
        top: 5, // jss-default-unit makes this 5px
        right: 0,
        bottom: 0,
        left: '1rem'
    },
    '& span': {
        // jss-nested applies this to a child span
        fontWeight: 'bold' // jss-camel-case turns this into 'font-weight'
    }
    },
    myLabel: {
    fontStyle: 'italic'
    }
})

const Button = ({children}) => {
    const classes = useStyles()
    return (
    <button className={classes.myButton}>
        <span className={classes.myLabel}>{children}</span>
    </button>
    )
}

const App = () => <Button>Submit</Button>

render(<App />, document.getElementById('root'))

JSS 결론

우리는 JS에서 CSS의 개념과 그것이 어떻게 우리의 업무 절차에서 우리에게 유용한지 이미 잘 알고 있다.우리는 또한 일부 JS 라이브러리의 CSS를 보았는데, 우리는 지금 사용하기 시작할 수 있다.여기 를 클릭하면 매년 수천 명의 개발자들이 피드백을 공유할 수 있습니다.뭐가 제일 좋아요? 왜요?