2020년 최고의 CSS 기술

저자: Nwose Lotanna✏️
여러 해 동안 CSS와 그 지역사회는 간단한 스타일시트에서 완전한 기술 생태계로 발전했다. 이것은 Bootstrap과 Materialize 등 구조를 뛰어넘고Sass 등 예비 프로세서, 심지어 JS의 CSS 등 비교적 새로운 개념을 뛰어넘었다.2020년의 전단 웹 개발은 CSS 작성에만 관련된 것이 아니라 기술과 주어진 장면에서 어떤 기술을 사용하는지 알아야 한다.
제1회'State of CSS 2019'조사 기록은 현재 전 세계 CSS 사용자의 관점을 완벽하게 보여 주었다.이 데이터 포인트는 CSS 라이브러리와 프레임워크, 특성, 단원과 선택기 등을 포함한다.
이 보고서는 전면적인 개발의 미래에 대한 일별을 제공하여 CSS에 완전히 집중되었다.내가 보기에'CSS 현황'보고서는 이미 첫 번째로 손꼽히는 CSS 개발자만 조사하는 것으로 나는 이것이 앞으로 몇 년 동안 전단 개발자 커뮤니티의 주요 내용이 될 것이라고 희망한다.
이 글에서 우리는 2020년 가장 인기 있는 CSS 기술과 개발자들이 CSS 개념에 대한 포지셔닝, 예를 들어 프로세서, 프레임워크, JS의 새로운 빛나는 CSS를 이해할 것이다.

JS의 CSS

10여 년 전에 CSS는 새로운 발전을 이루었고 핵심 규칙을 덮어쓰고 새로운 기능을 만들어 예비 프로세서라고 불리는 신기술을 형성했다.최근 JS에는 CSS라는 혁명적인 신기술이 등장했다.
JS의 CSS를 사용하면 CSS 대신 JavaScript를 사용하여 프레젠테이션 스타일을 설정할 수 있습니다.그런 다음 응용 프로그램이 실행될 때 JavaScript가 해석되고 CSS가 생성되며 CSS가 DOM에 직접 연결됩니다.이것은 CSS를 구성 요소 수준으로 추상화하고 스타일을 유지보수하는 데 도움이 된다.그것은 CSS 커뮤니티에서 한 시대를 풍미했다.다음은 가장 자주 사용하는 기술들이다.

스타일 구성 요소

styled components는 JS 라이브러리의 CSS로 시각적 원어와 가장 좋은 현대 브라우저 기술로 React 구성 요소의 스타일을 설정할 수 있습니다.이것은 최적화된 CSS 증강 기능으로 응용 프로그램 구성 요소의 스타일을 설계하여 CSS 모듈을 떠올리게 합니다.
그것은 used by more than 200,000 projects으로 강력하고 빠르게 성장하는 지역사회를 가지고 있다.조사 통찰에 따르면 CSS 사용자의 79%가 CSS 사용자(landed just three years ago인 것을 감안하면 상당히 놀랍다)와 33 percent of them are repeat users에 달하는 사용자를 들은 적이 있다.또 26퍼센트가 배우고 싶어 한다.
Here is an article 나는 얼마 전에 양식화 구성 요소에 관한 글을 쓴 적이 있다.

CSS 모듈

CSS 모듈은 클래스 이름과 변환이 로컬에 있는 CSS 파일로 모든 링크와 가져오기는 모듈 요청 형식을 사용합니다. 다음과 같습니다.

import styles from "./style.css";
// import { className } from "./style.css";

이러한 형식은 Interoperable CSS의 하위 스왑 형식으로 컴파일되지만 일반 CSS 파일과 유사한 방식으로 작성됩니다.

.danger-heading {
  color: red;
}

JS 모듈에서 CSS 모듈을 가져오면 로컬 이름에서 글로벌 이름까지의 모든 맵을 포함하는 객체를 내보냅니다.그것은 이미 21 percent of the respondents에 사용되었고 GitHub에서 13,000 times이 주연을 맡았다.여기에는 CSS 사용자를 교육하는 데 도움을 줄 수 있는 더 많은 자원을 방출할 수 있는 큰 인식 격차가 있다.

스타일링 JSX

the official Next.js blog에 따르면 Styled JSX는 JS 라이브러리의 CSS입니다. 패키지와 역할 영역의 CSS를 작성하여 구성 요소의 스타일을 설정할 수 있습니다.하나의 구성 요소에 도입된 스타일은 다른 구성 요소에 영향을 주지 않습니다. 의외의 부작용을 걱정하지 않고 스타일을 추가, 변경, 삭제할 수 있습니다.
GitHub에 따르면 이 휴대전화는 인상적인 350,000 weekly downloads과 현재의 used by 51,000 projects을 가지고 있어 머지않아 매우 큰 응용 전망을 가지고 있다.현재 약 54 percent of the surveyed CSS users명이 들어보지 못했기 때문에 2020년 말까지 이 숫자에 현저한 변화가 일어날 것이라고 나는 믿는다.
JS 라이브러리의 기타 CSS는 JSS, Emotion, Aphrodite 및 Radium을 포함한다.

사전 처리 프로그램

오래전 CSS의 역사에서 Sass와 더 적은 것이 나타났다.이 프로세서들은 이전에 CSS에서 사용하지 않았던 새로운 기능, 예를 들어 변수와 프로그래밍 언어에 끼워 넣은 스타일의 놀라운 개념을 도입했다.이것들은 모두 CSS가 그들을 따라잡기 시작하기 전에 발생한 것이다.

회사 명

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문적인 CSS 확장 언어로 여겨진다.그것은 모든 CSS 버전과 호환되며, 약 13년 동안 정기적으로 유지보수되었고, 매우 멋진 특성을 가지고 있다.많은 프레임워크가 Sass 위에 구축되었는데 그 중 하나는 Compass이다.
현재, Sass는 over 1.5 million projects으로 사용되고 있으며, 대략 80 percent of the survey respondents으로 구성되어 있다. 나는 감히 말하지만, 모든 사람들이 Sass를 좋아한다.

적었어

씬 스타일시트(일반적으로 Less)는 더 적은 CSS 확장을 사용하는 또 다른 스타일시트입니다.js는 더 적은 스타일을 CSS 스타일로 변환합니다.이것은 핵심 JS 개념(예를 들어 혼합과 변수)을 CSS에 도입하여 자바스크립트 개발자가 쉽게 파악할 수 있도록 한다.런타임 시 스타일이 일반 CSS로 사전 처리됩니다.
현재 over 1 million projects에서 사용되고 있으며 98% 가 넘는 CSS 사용자 have heard of it, 그중 25%는 되돌아오는 손님이고 11%는 공부하고 싶습니다.
다른 프리프로세서 라이브러리는 Stylus이며, 끊임없이 증가하는 커뮤니티도 있습니다.

CSS 프레임워크

Bootstrap과 같은 사용자 인터페이스 패키지가 없으면 CSS 기술에 대한 논의는 완전하지 않습니다.이것은 CSS 사용자의 생활을 가볍게 한다. 특히 클라이언트를 위한 사용자 인터페이스를 구축하고자 하는 초보자들이다.이 절에서 우리는 그중의 수요량이 매우 많은 틀을 소개할 것이다.

독자적으로 창립하다

Bootstrap은 HTML, CSS, JS를 개발하는 데 사용되는 최초의 모바일 패키지입니다.Sass 변수와mixin, 응답 격자 시스템, 광범위한 사전 구축 구성 요소와 jQuery 기반의 강력한 플러그인을 사용하여 아이디어의 원형을 신속하게 만들거나 전체 응용 프로그램을 구축할 수 있습니다.
조사기관 인사이츠에 따르면 현재 more than 1.3 million users명이 이 소프트웨어를 사용하고 있으며 수량은 45 percent are return users명에 달한다.여러 해 동안 일부 사람들은 업데이트와 더 재미있는 프레임워크로 방향을 바꾸었지만, Bootstrap은 여전히 대량의 사용자 기반을 보존하고 있다.

의미 사용자 인터페이스

의미 사용자 인터페이스는 개발 프레임워크로 인성화된 HTML을 사용하여 미관적이고 신속한 레이아웃을 만드는 데 도움이 된다.간결한 HTML을 통해 의미 사용자 인터페이스는 단어와 클래스를 교환 가능한 개념으로 간주한다.over 11,000 projects명이 그것을 사용했는데 64 percent of CSS users명이 그것을 들은 적이 있고 21%가 공부하고 싶어 한다.

부르마

Bulma는 Flexbox 기반의 무료 소스 CSS 프레임워크로 200000명이 넘는 개발자가 사용하고 있다.그것은 100% 빠른 응답, 이동 중심, 모듈화, 오픈입니다.현재 over 86,000 projects에서 사용되고 있으며 10%의 조사 대상이 used Bulma more than once으로 보고되었다.460,000 monthly downloads이 생겼고 Bulma 지역사회가 성장하고 지역사회에 더욱 광범위한 인식 기회가 생겼다.

순수했어css

순수했어css는 모든 웹 프로젝트에서 사용할 수 있는 소형, 응답이 빠른 css 모듈입니다.Pure는 Normalize.css에 구축되어 원본 HTML 요소와 가장 흔히 볼 수 있는 UI 구성 요소에 레이아웃과 스타일을 제공합니다.Pure는 정말 작습니다. - 전체 모듈 집합의 시계는 3.8kB에서 축소되고 압축됩니다.
현재 over 3,000 projects에서 사용되고 있으며, 18 percent of the surveyed을 초과하여 이미 사용하거나 그것을 배우고 싶습니다.

CSS 사용자 순풍 CSS

Tailwind CSS는 사용자 정의 디자인을 신속하게 구축하는 데 사용되는 실용적인 CSS 프레임워크입니다.Tailwind CSS는 고도로 맞춤형 가능한 저급 CSS 프레임워크로 맞춤형 디자인을 구축하는 데 필요한 모든 구축 블록을 제공합니다. 귀찮은 고집이 필요 없습니다.
현재 에서 사용되고 있으며 조사의 취미 지시 지표에 따라 가장 인기 있는 CSS 프레임워크로 more than 25,000 projects 사용자는 그것을 배우고 싶어 합니다.
기타 CSS 프레임워크는 14 percent of surveyed CSS, Materialize, Foundation, Ant design, UI Kit과 Primer을 포함한다.

초광속자 결론

이 글은 JS의 CSS부터 프로세서, 심지어 프레임워크에 이르기까지 다양한 CSS 기술과 지역 사회에 대한 수요를 보여 줍니다.JS의 CSS는 CSS 커뮤니티의 최신 기술 중 하나입니다. 저는 이 기술의 미래에 대해 흥분합니다. 특히 양식화된 구성 요소와 Tailwind CSS 등 라이브러리와 프레임워크의 성장에 흥분합니다.당신이 가장 좋아하는 CSS 기술은 무엇입니까?댓글로 알려주세요!

당신의 프런트엔드가 사용자의 CPU를 점용했습니까?

웹 전단이 갈수록 복잡해지면서 자원 탐욕의 기능이 브라우저에 대한 요구가 높아지고 있다.운영 중인 모든 사용자를 위해 클라이언트 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있으면 으로 문의하십시오.
try LogRocket.
은 웹 응용 프로그램에 사용되는 DVR처럼 웹 응용 프로그램이나 사이트에서 발생하는 모든 것을 기록합니다.중요한 프런트엔드 성능 지표를 수집하여 보고하고, 사용자 세션과 응용 프로그램 상태를 재생하고, 네트워크 요청을 기록하며, 문제의 원인을 추측하지 않고 모든 오류를 자동으로 표시할 수 있습니다.
디버그 웹 응용 프로그램 업데이트 방법 - LogRocket
게시물 Start monitoring for free.이 The most in-demand CSS technologies in 2020에 먼저 올라왔습니다.