DevTools에서 CSS 캐스케이드를 가르쳐야 합니까?

CSS 캐스케이드와 CSS 선택기의 특성과 밀접한 관계를 가진 주제는 웹 개발 커뮤니티에서 자주 오해를 받는다.불행하게도, 많은 개발자들이 CSS의 진정한 작업 원리를 이해하지 못했다는 인상을 받았다.
예를 들어'JS의 CSS'와 Tailwind 같은 유행 해결 방안은 이 핵심 웹 기술에 대한 전면적인 이해에 도움이 되지 않을 것이다.부족한 지식이 다음과 같은 문제를 가져왔다.
앞으로 CSS를 이해하는 것이 그리 중요하지 않을까요?어쩌면 언젠가...이 가능하다, ~할 수 있다,...
나는 현재 브라우저가 어떻게 스타일을 응용하는지 이해하는 것이 매우 중요하다고 생각합니까?그럼요!
참고: CSS 솔루션을 사용하는 것에 동의하지 않거나 권장하지 않습니다.I prefer less complex frontends these days, 하지만 너는 너를 안다!
지난 며칠 동안 개발자 교육 문제를 고민해 왔지만 개발자 도구에서 등급을 가르치는 생각은 머릿속에 떠오르지 않았다.이 글은 작은 개발 도구를 제시했는데, 나는 그것이 더 많은 개발자들이 CSS를 이해하는 데 도움을 줄 것이라고 믿는다.

간단히 말해서 CSS 전일성(초고속)

우리 빨리 불완전하게 복습합시다.If you want to learn more on the topic, read this MDN article about the CSS cascade 또는 the CSS cascading specification.
여러 CSS 선택기와 규칙이 같은 HTML 요소와 일치하는 경우 어떤 스타일을 적용해야 합니까?color 요소가 다섯 개의 다른 h1 성명을 가지고 있을 때 코드 라이브러리에서 무슨 일이 일어날까요?
이 문제는 CSS 캐스케이드와 선택기의 특성이 작용하는 부분이다.CSS 선언의 적용은 해당 선언의 정의 위치에 따라 달라집니다.인라인 스타일이 빨간색을 지정했습니까?파란색은 주 스타일시트의 고도로 복잡한 선택기에서 설정됩니까?각종 요소가 어떤 스타일을 응용할지 결정하는 데 역할을 발휘한다.일반적으로 가장 구체적인 성명이 이긴다.
브라우저에서 CSS의 특이성을 어떻게 계산하는지 알아보기have a look at the CSS spec.세 가지 다른 구성 부분을 고려해야 한다.

CSS 선택기의 ID 선택기 수(=a)

CSS 선택기의 클래스 선택기, 속성 선택기와 위조 클래스의 수량(=B)

CSS 선택기에서 원소 유형 선택기와 위조 원소의 수량(=C)

이 세 숫자는 서로 다른 권한을 가지고 선택기의 특이성 값(예를 들어0 x A, 1 x B, 0 x C = 0,1,0에 결합된다.
id를 포함하는 선택기는 항상 클래스 선택기(1,0,0 > 0,1,0보다 구체적입니다.클래스나 속성을 포함하는 선택기는 항상 원소 선택기(0,1,0 > 0,0,1보다 구체적이다.
같은 요소에서 같은 속성을 정의하는 여러 선택기를 처리하려면 가장 특이한 선택기와 스타일이 적용됩니다.

/* 
  Consider this element:
  <div class="class-selector" id="id-selector">
    Hello world!
  </div>
*/ 

/* 
  Specificity: 0 x A, 0 x B, 1 x C -> 0,0,1
  (because there's an element in the selector)
*/
div {
  color: red;
}

/* 
  Specificity: 0 x A, 1 x B, 0 x C -> 0,1,0
  (because there's a class in the selector)
*/
.class-selector {
  color: blue;
}

/* 
  Specificity: 1 x A, 0 x B, 0 x C -> 1,0,0
  (because there's an id in the selector)
*/
#id-selector {
  color: yellow;
}

이 세 개의 CSS 선택기의 순서에 상관없이 div의 텍스트 색은 모두 노란색일 것이다. 왜냐하면 #id-selector가 가장 높은 특이성을 가지고 있기 때문이다(1,0,0.
그렇다면 사람들은 이 점을 어떻게 알고 있을까?

개발자 도구 교육의 중요성

나는 the importance of DevTool warnings two years ago을 썼는데, 나는 여전히 브라우저 개발 도구가 개발자 교육에서 매우 중요한 역할을 한다고 믿는다.웹 개발은 다양한 분야를 포함하기 때문에 뛰어난 사용자 체험을 가진 사이트를 구축하는 데 무엇이 필요한지 이해하기 어렵다.하루가 끝날 때, 너는 네가 무엇을 모르는지 모른다.
개발자 도구는 지난 몇 년 동안 현저한 개선이 있었다.구글 크롬의 등대 감시 도구는 사이트의 질을 평가하는 실제 기준이 되었다.그것은 개선이 필요한 부분을 보여 주고 다른 자원과 일치된 관계를 유지한다.

Firefox는 CSS 도구에서 CSS가 작동하지 않는 시간과 원인을 설명하는 가치 있는 힌트를 제공하기 시작했다.

보시다시피 개발자 도구는 오늘의 교육 개발자의 임무를 맡고 있습니다.폭포를 설명하면 좋지 않을까요?

CSS 캐스케이드에 "자세히 알아보기" 리소스를 제공할 수 있습니까?

큰 코드 라이브러리에서 대량의 CSS를 처리할 때, 서로 경쟁하는 CSS 성명을 자주 발견할 수 있다.여러 선택기가 서로 덮어씁니다.개발 도구에서 적용된 요소 스타일을 검사할 때 어떤 스타일이 적용되고 덮어쓰였는지 보여 줍니다.

덮어쓰는 스타일이 그어졌습니다. 아주 좋지만, 이것은 거의 당신이 얻은 전부입니다.왜 다른 속성을 적용하지 않고 다른 속성을 적용하는지에 대해서는 다른 정보가 없습니다.
오늘 나는 DevTools에 또 다른 보기가 있다는 것을 알게 되었다. 이것은 '계산' 패널의 선택기와 일치하는 속성의 순위를 보여 준다.이것은 위대한 첫걸음이다!

계산된 특성 세부 정보는 일치하는 스타일을 모두 보여 줍니다.이 목록은 선택기의 특정성에 따라 정렬됩니다.불행하게도, 이런 관점은 목록의 순서를 설명할 수 없으며, 나는 이것이 놓친 기회라고 생각한다.
만약 이 보기가 선택기의 특수성을 표시하고 CSS 등급에 추가 자원을 제공한다면 좋지 않습니까?

나는 위의 추가가 개발자가 CSS를 이해하는 데 큰 도움을 줄 수 있다고 생각한다.내가 생각할 수 있는 유일한 단점은 추가 정보가 개발자들을 어찌할 바를 모르게 할 수도 있지만, 나는 이 위험을 무릅쓰고 더 많은 사람들이 CSS를 정확하게 배우도록 하고 싶다.
당신은 이 제의가 어떻다고 생각합니까?브라우저 공급업체가 유사한 제품을 제조하고 있습니까?나는 이 화제에 대해 이야기하고 싶다.전화drop me an email에 오신 것을 환영합니다.
편집: 사실증명.👏