코드 수준을 높여줄 판도를 바꾸는 CSS 사례

모든 개발자가 있었습니다. 처음에는 단순해 보였지만 곧 다루기 어려워지는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!