4에서 내 머리를 놀라게 한 CSS에 관한 기사

Front in Sampa 2024에서 CSS 아키텍처의 3가지 기둥에 대해 발표하면서 이론적 관점에서 CSS에 대해 많은 것을 읽을 수 있는 기회를 얻었습니다. 대규모 CSS 개발

이번 투어에서 저는 CSS에 대한 관점을 발견했고, 이는 호기심을 다시 불러일으켰을 뿐만 아니라 세상에 대한 새로운 관점으로 새로운 결정을 내릴 수 있게 해주었습니다.

순환적 복잡성: CSS의 논리 작성자: Harry Roberts

순환 복잡성은 프로그램 복잡성의 척도입니다. 각 흐름 제어와 각 출력은 메서드, 클래스 또는 애플리케이션의 복잡성을 증가시킵니다.

CSS에서 복잡성은 느리고 재사용이 불가능하며 지나치게 구체적인 선택기를 의미할 수 있습니다.

div.sidebar .login-box a.btn span {}

/*
Pode ser lido como

IF (inside .btn)
AND IF (on a)
AND IF (inside .login-box)
AND IF (inside .sidebar)
AND IF (on div)

*/

"선발자를 미니 프로그램으로 생각하세요"

CSSWizardry 블로그 기사 링크(영어)

Ahmad Shadeed의 조건부 CSS

CSS를 논리 연산이 포함된 언어로 보는 것의 가치에 대해 이야기하면 상황 조건에 따라 코드를 사용할 수 있도록 논리적 평가를 수행하는 미디어 쿼리뿐만 아니라 모든 대화형 상태, 다음 선택기의 존재 여부, 선택기 색인 또는 특정 하위 항목(:has 사용)의 존재에서.

:has, 컨테이너 쿼리 및 이미 존재하지만 아직 탐색되지 않은 지원 쿼리로 인한 새로운 속성과 패러다임 변화에 대해 매우 최신 정보를 제공하는 기사입니다.

Ahmad Shadeed의 블로그 기사(영문) 링크

Amelia Wattenberger의 CSS 캐스케이드

계단식 스타일시트가 있지만 CSS가 작성되는 방식과 순서와 관련된 CSS 오류를 보는 것은 매우 일반적입니다. Amelia Wattenberger의 이 아름다운 블로그 게시물에서 그녀는 폭포수 작동 방식을 보여주고 이를 염두에 두고 CSS를 생각하는 방법에 대한 통찰력을 제공합니다.

Amelia Wattenberger의 블로그 기사 링크(영어)

CSS-in-JS의 간략한 역사: 우리가 어떻게 여기까지 왔고 어디로 갈 것인가 - Dan Ward

CSS-in-JS를 더 많이 사용해야 할수록 번들 크기, 런타임 변경, 혼란스러운 재사용 대 공동 배치 아키텍처 등 부정적인 점이 더 많이 귀찮게 되었습니다. CSS 변수를 사용하면 스타일을 통해 변수를 삽입하는 것보다 화살표 기능을 선호하는 것이 훨씬 더 쓸모 없게 됩니다. 훨씬 간단하고 CSS가 이러한 유형의 범위를 잘 처리합니다.

이 기사 전체에서 언급된 놀라운 링크를 통해 이 기사가 존재하는 이유와 방법을 이해할 수 있습니다.

매체에 실린 영어 기사 링크

CSS와 중요한 경로 - Stoyan Stefanov

CSS는 느린 웹 로딩, 사용되지 않고 과도한 CSS, 상호 작용 시 필요한 것보다 더 많은 노드에 영향을 미치는 선택기와 작업, 더 적은 오버헤드와 더 많은 아키텍처가 필요한 복잡하고 느린 선택기에서도 가장 큰 문제입니다.

이 기사에서는 브라우저가 이 중요한 자산을 로드하고, 컴파일하고, 우선순위를 지정하는 방식과 최종 사용자가 해당 자산으로 이동하는 과정을 덜 고통스럽게 만드는 방법을 이해하게 됩니다.

Stoyan Stefanov 블로그 기사 링크(영어)

읽은 후 Frontend United의 CSS 성능에 대한 Harry Roberts의 동영상을 시청하세요

반응형 웹 디자인

Ethan Marcotte는 공간 점유에 특정 방식으로 반응하는 건축 조립체를 기반으로 "반응성"이라는 용어를 만들었습니다. 이 엿볼 수 있는 내용은 200년에 John Alsopp이 쓴 글에서 영감을 받아 더 적은 수의 규칙을 요구하는 더 자유로운 웹을 요구했습니다. 장치 수가 증가하는 세상에서 사용자는 인터페이스 작성 방식을 변화시켰으며 인터페이스를 보는 방식도 변화할 것입니다.

A List Apart 블로그의 영어 기사 링크

읽은 후 반응성에 대한 현대적인 시각을 보여주는 Jen Simmons의 동영상(내재 레이아웃)을 시청하세요

닫으려면

CSS 로딩의 미래 - Jake Archibald

저는 Google 채널에서 HTTP 203을 보고 있는 Jake를 만났고 그 이후로 그의 블로그를 팔로우하고 있습니다. 이 기사에서 그는 접힌 부분에 링크를 포함할 수 있는 가능성을 탐구합니다. "접힌 부분" 아래의 스타일을 점진적으로 로드합니다.

가능한지 몰랐나요? 응, TIL도 마찬가지야!

Jake의 블로그에 있는 영어 기사 링크

읽은 후 Chrome for Developers 채널에서 HTTP 203 쇼를 보고 Jake와 그의 손님에게서 많은 것을 배웁니다

위 내용은 4에서 내 머리를 놀라게 한 CSS에 관한 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!