2024 년 CSS 상태

CSS 그리드, 서브 그리드 및 컨테이너 쿼리는 이제 주류이므로 뷰포트가 아닌 컨테이너 크기를 기반으로 반응 형 모듈 식 설계를 가능하게합니다. 2. 네이티브 CSS 중첩은 널리 지원되며, 전처리에 대한 의존도를 줄이고 유지 관리 가능성을 향상시킵니다. 3. 유틸리티 우선 CSS (예 : Tailwind)는 지배적이지만 JIT, 임의의 값 및 Hybrid 접근법을 맞춤 구성 요소와 결합한 하이브리드 접근법으로 진화하고 있습니다. 4. CSS 사용자 정의 속성은 설계 시스템의 핵심이며, 선호하는 컬러 체계 및 JavaScript 통합을 통해 동적 테마, 다크 모드 및 접근성을 가능하게합니다. 5. @scope 효율성을 향상시키는 사용하지 않는 CSS 감지, 중요한 인라인, 코드 분할 및 스코핑 스타일로 성능 인식이 증가하고 있습니다. 6. 레거시 엔터프라이즈 환경에서도 지속되지만 Sass와 같은 사전 처리기는 기본 CSS 기능을 따라 잡기 때문에 감소하고 있습니다. 전반적으로 2024 년의 CSS는 프레임 워크 나 구축 단계없이 모듈성, 성능 및 개발자 경험을 수용하는 성숙하고 강력한 언어입니다.

2024는 CSS를 그 어느 때보 다 강력하고 유능한 언어로 사용하여 스타일 도구가 아니라 현대 웹 개발 워크 플로의 본격적인 부분입니다. CSS 상태는 브라우저에서 배송, 더 나은 개발자 툴링 및 현대 방법론의 채택 증가를 통해 혁신과 실용성의 균형을 유지하는 성숙 생태계를 반영합니다.

올해 주요 트렌드, 도구 및 시프트 형성 CSS를 살펴보십시오.

1. 현대 레이아웃은 이제 주류입니다

플로트 나 Flexbox에도 의존하는 시대는 사라지고 있습니다. 2024 년에는 CSS 그리드 및 서브 그리드 가 널리 지원되고 생산에 사용됩니다. 그러나 실제 게임 체인저는 모든 주요 브라우저에서 기본적으로 선적 된 컨테이너 쿼리 의 광범위한 채택이었습니다.

• 컨테이너 쿼리를 사용하면 뷰포트뿐만 아니라 컨테이너 크기에 따라 구성 요소가 적응할 수 있습니다. 디자인 시스템의 재사용 가능한 UI 구성 요소에 적합합니다.
• 개발자는 @container 규칙 및 size 기능과 짝을 이루어 진정한 모듈 식 디자인을 만듭니다.
• 예 : JavaScript 또는 래퍼 클래스가 필요하지 않고 부모가 좁아지면 카드 구성 요소가 수평에서 수직 레이아웃으로 전환 할 수 있습니다.

 .card {
  컨테이너 유형 : 인라인 크기;
}

@Container (max-width : 300px) {
  .card {
    플렉스 방향 : 열;
  }
}

이와 함께, 종횡비는 이제 표준이며 해킹없이 반응 형 미디어 및 그리드 항목을 단순화합니다.

2. CSS 중첩은 (마지막으로) 기본입니다

가장 많이 요청 된 기능 중 하나 인 CSS 중첩 은 현재 Chrome, Safari 및 Firefox에서 깃발 뒤에 지원됩니다 (2024 년에 전체 출시 예상). 이로 인해 기본 중첩을 위해 Sass와 같은 전처리에 대한 의존도가 줄어 듭니다.

 .card {
  패딩 : 1rem;

  &__제목 {
    글꼴 크기 : 1.25REM;
  }

  & : 호버 {
    배경 : #f5f5f5;
  }
}

SASS 사용자에게 친숙한 & syntax를 사용하지만 전처리기 (Mixin 또는 기능 없음)에 비해 여전히 제한적입니다. 그럼에도 불구하고 이것은 빌드 단계가없는 깨끗하고 유지 관리 가능한 CSS를 향한 큰 단계입니다.

많은 팀이 특히 Astro 또는 일반 HTML/CSS 설정과 같은 새로운 프레임 워크를 사용하는 프로젝트에서 신중하게 채택하기 시작했습니다.

3. 유틸리티 우선 CSS는 여전히 지배적입니다 (그러나 진화)

Tailwind CSS는 가장 인기있는 유틸리티 우선 프레임 워크로 남아 있지만 2024는 경쟁과 세련미가 점점 커지고 있습니다.

• Windi CSS 와 UnOCS는 특히 Vite 기반 프로젝트에서 속도와 유연성에 대한 견인력을 얻고 있습니다.
• Tailwind 자체는 기본적으로 JIT (Just-In-Time) , 작은 번들 및 theme() 및 플러그인을 통해 더 나은 사용자 정의로 향상되었습니다.
• 더 많은 팀이 HTML을 떠나지 않고 일회성 스타일을 위해 임의의 값 ( w-[237px] , bg-[#ff3e82] )를 사용하고 있습니다.

그러나 푸시 백은 의미론과 유지 관리에 대한 개발자로부터 계속됩니다. 결과적으로, 우리는 레이아웃 및 구조를위한 유틸리티 클래스를 사용하지만 복잡한 구성 요소를위한 맞춤형 클래스를 사용하는 하이브리드 접근 방식이 증가하고 있습니다.

4. CSS 사용자 정의 속성은 설계 시스템의 핵심입니다

CSS 변수 (사용자 정의 속성)는 더 이상 실험적이지 않습니다. 그들은 테마, 다크 모드 및 동적 스타일의 중심입니다.

2024 년에 팀은보다 체계적으로 사용하고 있습니다.

• :root , 구성 요소 또는 미디어 쿼리 내의 범위 변수.
• 런타임 테마 전환을위한 JavaScript와의 통합.
• 콜로 스키 메인을 선호하고 접근성을 위해 변수와 짝을 이루는 감소 된 모션을 선호합니다.

 : 루트 {
  --text- 프라이 사항 : #1a1a1a;
  --BG- 프라이 사항 : #ffffff;
}

@Media (Color-Scheme를 선호 : Dark) {
  : 루트 {
    --text- 프라이 사항 : #e0e0e0;
    -BG- 프라이밍 : #121212;
  }
}

스타일 사전 또는 Theo 와 같은 도구는 플랫폼 전체의 설계 토큰을 동기화하여 CSS 변수를 더 큰 설계 엔지니어링 워크 플로의 일부로 만듭니다.

5. 성능과 번들 인식이 높아지고 있습니다

웹 성능이 여전히 중요하므로 개발자는 CSS Bloat에 대해 더 신중합니다.

• 사용하지 않은 CSS 탐지는 이제 Chrome Devtools 및 Lighthouse에 내장되어 팀이 스타일을 감사하게합니다.
• @scope (Emerging Feature)를 통한 CSS 스코프 격리는 스타일을 안전하게 제거하거나 게으른로드하는 방법으로 테스트되고 있습니다.
• Build Tools (Webpack 또는 Vite와 같은)를 통한 중요한 CSS Inlining 및 Code-Splitting은 SSR 및 SSG 앱에서 표준입니다.

또한 작고 집중된 스타일 시트 로 조용한 전환이 있습니다. 일부 팀은 성능에 민감한 앱을 위해 손으로 쓴 CSS를 선호하여 글로벌 프레임 워크를 포기하고 있습니다.

6. 전처리 토론이 어리 석다

SASS 사용량은 나쁘기 때문에가 아니라 기본 CSS가 따라 잡기 때문에 감소하고 있습니다.

• 중첩, 변수 및 계산 ( calc() , clamp() )는 이제 편집없이 작동합니다.
• 개발자는 플러그인 (예 : postcss-preset-env )을 사용하여 PostCSS와 같은 우체국을 선택하여 오늘날 향후 CSS를 사용하고 있습니다.
• 빌드 프리 워크 플로우 (예 : Astro, Lelty)는 최소한의 툴링으로 기본 CS를 선호합니다.

즉, Sass는 레거시 코드베이스와 복잡한 테마 요구를 가진 대기업에서 여전히 강력합니다.

최종 생각

2024 년 CSS는 그 어느 때보 다 더 유능하고 성능이 뛰어나고 개발자 친화적입니다. 이 언어는 항상 자바 스크립트 또는 프레임 워크가 필요하지 않고 실제 설계, 응답 성, 테마 및 성능 (수분 설계, 응답 성, 테마 및 성능)을 해결하기 위해 발전하고 있습니다.

트렌드는 분명합니다. 더 얇은 툴링, 더 똑똑한 기본 기능 및 유지 관리에 중점을 둡니다 . 유틸리티 클래스를 사용하거나 일반 CSS 작성 또는 건물 설계 시스템을 사용하든 기초는 그 어느 때보 다 중요합니다.

기본적으로 CSS는 자라면서 개발자가 마침내 그럴만 한 존중을주고 있습니다.

위 내용은 2024 년 CSS 상태의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!