[CSS] 웹 개발에서 피해야 할 10가지 공통 CSS 실수

이 포스팅은 dev.to사이트를 둘러보다가, 참고하면 좋을만한 CSS관련 포스팅이 있어서 영어 원문에서 번역하여 작성하였다. (원본 포스팅)

 

대부분의 웹 개발자가 하는 일반적인 실수들과 이를 식별하고 피하는 것이 더 나은 웹 개발과 유용한 코드 작성을 도울 수 있는 방법에 대한 내용이다.

 

 

1. Shorthand 사용

CSS의 Shorthand는 여러 속성의 값을 동시에 설정할 수 있는 CSS 속성 그룹이다. 이 값들은 공백으로 구분된다. 예를 들어, border 속성은 margin-top, margin-right, margin-left 및 margin-bottom 속성을 대표하는 Shorthand이다.

// Shorthand를 사용하지 않는 경우
.example {
margin-top: 10px;
margin-bottom: 19px;
margin-left: 10px;
margin-right: 19px;
}

// 더 나은 방법
.example {
margin: 10px 19px;
}

 

 

2. Responsive design

웹사이트가 반응형이 되면 px 대신 백분율을 사용하자. 아래 예제에서 1000px 너비의 컨테이너 클래스는 올바르지 않다. 왜냐하면 화면 장치는 서로 다른 크기일 수 있으므로 그때도 1000px만을 사용한다. 대신 100%를 사용하자.

// 올바르지 않은 방법
.container {
width: 1000px;
}

// 반응형을 위한 올바른 방법
.container {
width: 100%;
}

 

 

3. 동일한 코드 반복

다른 클래스에 속성을 적용하려면 중복 코드를 작성하지 말자. 쉼표(,)로 구분된 클래스를 사용하자.

 

추가 속성이 필요한 경우 다른 클래스를 사용하고 해당 클래스에 CSS를 작성하면 중복 코드가 줄어든다.

// 올바르지 않음
.box1 {
width: 50%;
margin: 20px;
}

.box2 {
width: 50%;
margin: 20px;
}

// 올바른 방법
.box1, .box2 {
width: 50%;
margin: 20px;
}

 

 

4. 글꼴 대체 누락

글꼴 대체 누락이란 주된 글꼴이 아직 로드되지 않았거나 페이지 콘텐츠를 렌더링하는 데 필요한 글자가 누락된 경우 사용되는 글꼴이다.

 

 

예를 들어, 아래의 CSS는 "Arial"에 대한 글꼴 대체로 "Helvetica" 글꼴 패밀리를 사용하도록 지정한다.

// 좋지 않은 방법
body {
font-family: Helvetica;
}

// 올바른 방법
body {
font-family: Helvetica, Arial, sans-serif;
}

일부 브라우저는 특정 CSS 글꼴 패밀리를 지원하지 않을 수 있으므로 대체 글꼴을 사용하면 기본 글꼴 대신 다음 글꼴 패밀리를 지원한다.

 

 

5.  색상 이름 사용

색상 이름 대신 16진수 색상 코드를 사용하자.

// 좋지 않은 방법
.example {
color: green;
}

// 올바른 방법
.example {
color: #00ff00;
}

 

 

6. Selector 복잡성

특정 요소에 직접 클래스를 사용할 수 있는 경우 다른 Selector를 사용하여 복잡하게 만들지 않아야 한다.

// 가끔은 좋을 수 있지만 복잡하게 가지 않는 것이 좋습니다.
header .navigation ul.nav-links {
  list-style-type: none;
}

//단순성을 위해 클래스를 사용하고 읽기 및 이해하기 쉽게 만든다.

// 더 나은 방법
.nav-links {
  list-style-type: none;
}

 

 

7. Z-Index 오용

많은 개발자가 요소를 앞에 배치하기 위해 매우 높은 z-인덱스 값을 사용한다. 그리고 다른 요소를 앞에 배치하려면 z-인덱스 값이 더 높아져 어려워진다.

.modal-container{
  z-index:545;
}
.modal{
  z-index:5345345;
}

 

장기적으로 어렵지 않도록 중간 값을 사용하자.

.modal-container {
  z-index: 1;
}

.modal {
  z-index: 2;
}

 

 

 

8. 일관성 없는 이름

웹 페이지 콘텐츠를 준비할 때 CSS 클래스 또는 ID 이름은 다른 개발자가 즉시 이해할 수 있도록 작성해야 한다.

.header {
  font-size: 2rem;
}

 

 

9. 클래스와 ID 사용 시기

요소에서 값을 가져올 때 "id"를 사용하고 디자인을 준비할 때는 클래스를 사용하자. ID는 고유하기 때문에 데이터에 쉽게 액세스할 수 있으며 클래스는 여러 번 사용할 수 있다.

 

1)  ID: ID는 고유하기 때문에 데이터에 쉽게 액세스할 수 있으며 클래스를 사용하려면 [0]을 추가해야 합니다.

let name = document.getElementById('name').value;
console.log(name);

 

 

2) 클래스: 클래스는 재사용할 수 있으므로 이 방법을 따르는 것이 좋습니다.

.classData {
    margin: 20px;
}

 

 

10. 크로스 브라우저 호환성 무시

다른 브라우저는 CSS 규칙을 다르게 해석할 수 있으므로 다양한 플랫폼에서 일관된 시각적 표시를 위해 CSS 코드를 여러 브라우저에서 테스트하고 CSS 접두사 또는 브라우저별 접두사를 고려하자.

 

새로운 CSS 속성을 코드에 작성하기 전에 어떤 브라우저가 어떤 CSS 속성을 지원하는지 확인하기 위해 https://caniuse.com/ 를 사용할 수 있다.

 

결론적으로, CSS (Cascading Style Sheets)에서 일반적인 실수를 피하는 것은 웹 페이지를 잘 설계하고 효율적으로 만드는 데 중요하다. CSS는 웹 콘텐츠의 시각적 표현과 레이아웃을 제어하는 데 중요한 역할을 한다. 이러한 실수를 피함으로써 CSS 코드를 깨끗하고 유지 관리 가능하며 다양한 브라우저와 장치에서 호환되도록 할 수 있다.

 

 

---

#Reference

https://dev.to/aviligonda/10-common-mistakes-in-css-532j?utm_source=oneoneone