이봐! 마지막 기사 이후 오랜 시간이 지났고 여러분 모두와 연결을 놓쳤습니다. 돌아와서 웹 데브 여행에 유용한 팁을 공유하게되어 기쁩니다!

오늘, 5 개의 CSS 관행을 탐색합시다 . 이 통찰력이 도움이되기를 바랍니다. 갑시다 ?

1. 지나치게 특정 선택기

매우 구체적인 선택기를 작성하면 CSS를 관리하고 디버그하기가 더 어려워 질 수 있습니다. 선택기를 간단하고 재사용 할 수 있도록하십시오.

피하다:

#header .nav .link.active:hover {
    color: red;
}

더 나은:

.nav-link:hover {
    color: red;
}

불필요한 복잡성을 피하기 위해 필요한 경우에만 특이성을 사용하십시오.

2. 오버로드 글로벌 선택기

범용 또는 지나치게 광범위한 선택기를 사용하여 사이트의 많은 부분에 영향을 줄 수 있습니다.

피하다:

* {
    margin: 0;
    padding: 0;
}

더 나은:

html, body {
    margin: 0;
    padding: 0;
}

예상치 못한 부작용을 방지하기 위해 글로벌 선택기의 사용을 줄입니다.

3. 하드 코딩 색상 또는 값

하드 코딩은 업데이트를 어렵게 만듭니다. 모든 곳에서 임의의 값을 사용하는 대신 일관성을 위해 변수를 사용하십시오.

피하다:

.primary-btn {
    color: #3498db;
    margin: 20px;
}

더 나은:

:root {
    --primary-color: #3498db;
    --default-margin: 20px;
}
.primary-btn {
    color: var(--primary-color);
    margin: var(--default-margin);
}

4. 일관되지 않은 단위

믹싱 단위 (예 : PX, REM, %)가 일관되지 않은 설계 및 응답 성 문제로 이어집니다.

피하다:

font-size: 16px;  
margin: 1rem;  
width: 50%;

더 나은:

font-size: 1rem;  
margin: 1rem;  
width: 50%;

글꼴에는 rem과 같은 일관된 단위를 사용하고 레이아웃에는 %를 사용하십시오.

5. 브라우저 호환성 잊어 브라우저 지원을 고려하지 않고 새로운 CSS 기능을 사용하면 일부 사용자의 디자인을 깨뜨릴 수 있습니다.

div { 종횡비 : 16 / 9; }

div {
    aspect-ratio: 16 / 9;
}

@supports (Sategratio : 1) { div { 종횡비 : 16 / 9; } }

@supports (aspect-ratio: 1) {
    div {
        aspect-ratio: 16 / 9;
    }
}

이러한 일반적인 CSS 관행을 피하면서

더 읽기 쉬운 관리 가능 도 제공합니다.  이 게시물이 도움이 되었기를 바랍니다! 다음 기사에서 뵙겠습니다!