사샤 그리프 공개적으로 궁금해 CSS가 너무 커졌는지 여부. 지난 몇 년 동안 브라우저에 탑재된 모든 기능과 함께 — 컨테이너 쿼리! 상대 색상 구문! 캐스케이드 레이어! 논리적 속성! 미디어 쿼리의 범위! 개별 변환! :has() 선택자! — 그리고 가능한 지평선에 있는 모든 것 — CSS 토글! 중첩! 색상 혼합! 스크롤 링크 애니메이션! 범위 스타일! — 요즘 CSS에 대한 학습 곡선은 신규 및 노련한 프론트 엔드 모두에 대해 확실히 다릅니다.
대부분의 CSS 속성과 작동 방식을 알 수 있었던 때가 있었습니다. 그 시절은 적어도 나 같은 늙은 손에게는 오래 전에 사라졌습니다. 그러나 그런 종류의 질문은 다음과 같습니다. 당신이 절대적으로 알아야 할 CSS는 무엇입니까?
빈카스 스토니스 최근 목록을 찔렀다. 크리스 하나를 함께 넣어 CSS3 이후 출시된 기능을 기반으로 합니다. 목록에 포함할 항목에 대한 아이디어가 있을 것입니다. 상위 5개를 조합하고 속성과 선택기로만 제한해야 한다면 다음과 같이 보일 수 있습니다.
writing-mode
나는 그것에 대해 충분히 말할 수 없다 writing-mode 재산. 특히 학습 관점에서 중요한 점은 사용자의 언어에 관계없이 레이아웃 제작을 설명하는 포괄적인 원칙을 설정한다는 것입니다. 에 대한 좋은 이해 writing-mode 에 대한 이해로 이어질 것입니다. 논리적 속성 및 값, 문서 흐름을 이해하고 block, inline, start및 end 물리적 방향보다는
display
나는 누군가가 CSS에 대한 확실한 이해 없이 좋은 CSS를 작성할 수 있다고 믿기가 어렵습니다. display 재산. 레이아웃을 만들기 위한 속성이자 프레임워크입니다. 그것 없이는 Flexbox나 CSS Grid가 없기 때문에 중요한 기능을 이해하기 위한 게이트키퍼와 같은 역할을 합니다.
게다가 display 재산은 완벽하게 보완합니다 writing-mode. 딱 한 번 필요한 것입니다. writing-mode 문서 흐름과 논리적 방향에 노출되었습니다. 요소의 정상적인 흐름을 변경하거나(예: 블록 요소를 인라인 요소로 변경) 레이아웃을 시작하려면(예: 유연한 레이아웃 컨텍스트 생성) 속성이 필요합니다. display 놀이로 제공됩니다.
margin / padding / border
Uh, 나는 여기에서 완전히 부정 행위를하고 있지만 배우는 것을 생각합니다. margin, padding및 border 함께하는 것은 일종의 피할 수 없는 일입니다. 그것들은 모두 박스 모델, 모두 간격 및 스타일 지정에 도움이 되며 모두 익숙해져야 합니다. CSS 길이 단위. 이러한 속성의 용도와 요소의 계산된 크기에 기여하는 방법을 알면 훨씬 더 많은 스타일을 제어할 수 있고 요소가 왜 크기인지에 대한 혼란을 없앨 수 있습니다. 일반적인 CSS 골칫거리입니다!
::before 및 ::after
내가 약간 속이는 또 다른 곳. 예, ::before 및 ::after 두 개의 개별 유사 요소이지만 다시 한 번, 다른 하나 없이 하나에 대해 배우는 것을 상상할 수 없습니다. 투퍼입니다!
나는 이것이 존재하고 모든 것을 만드는 데 사용될 수 있다는 것을 알게 된 것이 얼마나 놀라운 일인지 기억합니다. 멋진 UI 효과 완료 단일 div 삽화. 그것은 새로운 가능성을 열어주고 CSS가 실제로 얼마나 강력한지 처음으로 엿볼 수 있는 기회를 제공합니다.
@media
Oof, 나는 이미 목록의 다섯 번째이자 마지막 항목에 있으며 여기에 속하는 CSS 장점이 여전히 많은 것 같습니다. 하지만 마지막으로 하나를 선택해야 한다면 미디어 쿼리. 왜요? 유연하고 유연한 레이아웃과 다양한 보기 컨텍스트를 만드는 데 가장 중요한 요소이기 때문입니다. 컨테이너 쿼리 성숙해지면서 이것을 내 목록에서 제외할 수도 있지만 지금은 @media 반응형 디자인을 위한 훌륭한 입문서입니다.
그 너머, @media CSS의 조건부 특성에 대한 좋은 첫 단계입니다. 사용 중인 장치 유형(예: screen or print) 또는 브라우저의 뷰포트가 특정 기준(예: width >= 768px) @media 구문은 다양한 조건에 최적화된 레이아웃을 만드는 데 매우 유용합니다.
아, 그리고 우리는 방법에 대해 언급조차 하지 않았습니다. @media 능력 덕분에 접근성과 관련이 있습니다. 사용자의 기본 설정에 따라 스타일 적용 (예 : prefers-reduced-motion). 따라서 조건부 레이아웃을 만드는 것 외에도 미디어 쿼리는 포괄적인 디자인을 이해하기 위한 좋은 다음 단계입니다.
정직한 언급
CSS를 꼭 알아야 할 XNUMX가지 속성 및 선택기 목록으로 추출하는 것은 어려운 일입니다. 특히 오늘날 CSS가 XNUMX년 전보다 더 강력해진 지금은 더욱 그렇습니다. 다음과 같이 (순서 없이) 포함하고 싶은 다른 항목이 많이 있습니다.
calc()has()colorfontoverflowposition(특히 이)z-index
그러나 나는 내 선택을 고수합니다. 속성 목록을 외우는 것보다 CSS를 배우는 것이 더 중요합니다. 그것은 여정이며 제가 선택한 다섯 가지는 좋은 스타일 규칙을 작성하기 위한 단계와 CSS를 더 깊이 파고들기 위한 다음 단계를 설정하는 멋지고 작은 학습 경로를 개척했다고 생각합니다.
좋아, 말해봐!
내 목록에 동의하지 않습니까? 당신은해야합니다! 나는 당신이 현명한 의견을 갖고 있다고 확신하며 어떻게 상위 5위 목록을 완성했는지 알고 싶습니다.
