코드 수준을 높여줄 판도를 바꾸는 CSS 사례
- Barbara Streisand원래의
- 2024-12-02 18:43:11706검색
모든 개발자가 있었습니다. 처음에는 단순해 보였지만 곧 다루기 어려워지는 CSS와 씨름했습니다. 이 가이드에서는 일반적인 CSS 함정과 유지 관리가 가능한 현대적인 솔루션을 살펴보겠습니다. 문제가 있는 CSS를 전문적인 CSS로 바꿔보세요!
? 주간 CSS 팁, 코드 조각 및 튜토리얼을 받은 편지함으로 직접 받아보세요 - 100% 무료입니다!
1. 단위: 픽셀에서 벗어나다
잘못된 방법:
.container {
width: 1200px;
font-size: 16px;
margin: 20px;
}
더 나은 방법:
.container {
width: 90vw;
max-width: 75rem;
font-size: 1rem;
margin: 1.25rem;
}
상대 단위를 사용하면 반응형 디자인과 접근성이 향상됩니다. REM은 사용자가 선호하는 글꼴 크기에 따라 확장되며, 뷰포트 단위는 레이아웃이 다양한 화면 크기에 맞게 조정되도록 합니다. 사용자가 기본 글꼴 크기를 확대하거나 변경할 수 있다는 점을 항상 고려하세요.
2. CSS 재설정: 새로 시작하기
잘못된 방법:
/* Starting without any reset, relying on browser defaults */
더 나은 방법:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
CSS를 재설정하면 다양한 브라우저에서 일관된 렌더링이 보장됩니다. box-sizing: border-box 속성은 요소의 전체 너비에 패딩과 테두리를 포함시켜 너비 계산을 직관적으로 만듭니다.
3. Flexbox vs. Float: 최신 레이아웃 솔루션
잘못된 방법:
.container {
overflow: hidden;
}
.sidebar {
float: left;
width: 300px;
}
.main {
margin-left: 320px;
}
더 나은 방법:
.container {
display: flex;
gap: 1.25rem;
}
.sidebar {
flex-basis: 18.75rem;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
Flexbox는 더 적은 코드로 강력하고 유연한 레이아웃을 제공합니다. 플로팅 요소보다 간격, 정렬 및 반응성을 더 우아하게 처리하며 최신 브라우저에서 더 잘 지원됩니다.
4. 색상 관리: 일관성을 위한 변수
잘못된 방법:
.button {
background-color: #007bff;
}
.link {
color: #007bff;
}
더 나은 방법:
:root {
--primary-color: #007bff;
--primary-hover: #0056b3;
}
.button {
background-color: var(--primary-color);
}
.button:hover {
background-color: var(--primary-hover);
}
.link {
color: var(--primary-color);
}
CSS 변수(사용자 정의 속성)를 사용하면 일관된 색상을 더 쉽게 유지하고 테마 전환이 가능합니다. 또한 코드를 더욱 유지 관리하기 쉽게 만들고 불일치 위험을 줄여줍니다.
5. 미디어 쿼리: 모바일 우선 접근 방식
잘못된 방법:
/* Desktop-first approach */
.container {
width: 1200px;
}
@media (max-width: 768px) {
.container {
width: 100%;
}
}
더 나은 방법:
/* Mobile-first approach */
.container {
width: 100%;
}
@media (min-width: 48em) {
.container {
width: 90%;
max-width: 75rem;
}
}
모바일 우선 디자인을 통해 기본 스타일이 작은 기기에서도 작동하도록 하고 점차적으로 더 큰 화면에 대한 경험을 향상시킵니다. 이 접근 방식을 사용하면 일반적으로 더 깔끔하고 유지 관리하기 쉬운 코드가 생성됩니다.
6. 특이성: 단순함 유지
잘못된 방법:
#header div.navigation ul li a.active {
color: blue;
}
더 나은 방법:
.nav-link--active {
color: var(--primary-color);
}
특정성이 낮을수록 스타일을 더 쉽게 유지 관리하고 필요할 때 재정의할 수 있습니다. BEM 명명 규칙 또는 유사한 방법론을 사용하여 깊은 중첩 없이 의미 있고 구체적인 클래스를 만듭니다.
7. 타이포그래피: 유연한 글꼴 크기 조정
잘못된 방법:
.container {
width: 1200px;
font-size: 16px;
margin: 20px;
}
더 나은 방법:
.container {
width: 90vw;
max-width: 75rem;
font-size: 1rem;
margin: 1.25rem;
}
clamp()를 사용하면 최소 크기와 최대 크기 사이에서 원활하게 크기가 조정되는 반응형 타이포그래피가 생성됩니다. 이렇게 하면 글꼴 크기에 대해서만 여러 미디어 쿼리를 수행할 필요가 없습니다.
8. 그리드 레이아웃: 적절한 카드 시스템
잘못된 방법:
/* Starting without any reset, relying on browser defaults */
더 나은 방법:
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
자동 맞춤 및 minmax() 기능을 갖춘 CSS 그리드는 사용 가능한 공간에 자동으로 조정되는 반응형 레이아웃을 생성합니다. 이 접근 방식은 코드가 덜 필요하고 극단적인 경우를 더 잘 처리합니다.
9. 애니메이션: 성능 최적화
잘못된 방법:
.container {
overflow: hidden;
}
.sidebar {
float: left;
width: 300px;
}
.main {
margin-left: 320px;
}
더 나은 방법:
.container {
display: flex;
gap: 1.25rem;
}
.sidebar {
flex-basis: 18.75rem;
flex-shrink: 0;
}
.main {
flex-grow: 1;
}
모두 사용하는 대신 애니메이션에 적용할 정확한 속성을 지정하고 가능하면 성능에 최적화된 변환 및 불투명도를 사용하세요. 자주 애니메이션이 적용되는 요소에는 will-change를 아껴서 사용하세요.
10. 구성 요소 변형에 대한 사용자 정의 속성
잘못된 방법:
.button {
background-color: #007bff;
}
.link {
color: #007bff;
}
더 나은 방법:
:root {
--primary-color: #007bff;
--primary-hover: #0056b3;
}
.button {
background-color: var(--primary-color);
}
.button:hover {
background-color: var(--primary-hover);
}
.link {
color: var(--primary-color);
}
변형에 CSS 사용자 정의 속성을 사용하면 코드 중복이 줄어들고 구성 요소를 더 쉽게 유지 관리할 수 있습니다. 또한 디자인 시스템 전반에 걸쳐 일관된 변형을 더 쉽게 만들 수 있습니다.
결론
최신 CSS는 코드의 유지 관리, 성능 및 확장성을 향상할 수 있는 강력한 도구를 제공합니다. 이러한 모범 사례를 따르면 유지 관리 및 수정이 더 쉬운 더욱 강력한 스타일시트를 만들 수 있습니다. 목표는 단순히 작동하도록 만드는 것이 아니라 사용자와 개발자 모두에게 잘 작동하도록 만드는 것입니다.
위 내용은 코드 수준을 높여줄 판도를 바꾸는 CSS 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!