CSS 클래스 기반 스타일 관리로 유지보수성과 효율성 강화

안녕하세요! 오늘은 CSS 클래스 기반 스타일 관리를 통해 유지보수성과 효율성을 강화한 이야기를 풀어보려고 합니다.

스타일 작업을 할 때, JavaScript에서 직접 스타일을 조작하는 대신 CSS 클래스 기반으로 작업하면 어떤 장점이 있는지 한번 알아볼게요!

 

왜 CSS 클래스를 사용했냐고요? 저는 CSS 클래스 기반 스타일 작업을 하면서 한 가지 깨달음을 얻었습니다.

JavaScript로 스타일을 직접 조작하다 보면 코드가 복잡해지고, 유지보수가 어렵더라고요.

그래서 CSS로 스타일을 정의해두고 JavaScript에서는 클래스 이름만 추가/삭제하는 방식으로 작업해보기로 했습니다.

이 방법을 사용하니, JavaScript에서 스타일 조작에 들이는 시간을 줄이고, 코드 검증 시간도 단축할 수 있었어요. 이 방식, 정말 추천합니다! (하루 종일 걸릴 작업 8시간? 이 5~6시간 걸렸어요)

 

문제는 무엇이었냐면요: JavaScript에서 직접 스타일을 조작할 경우, 코드가 점점 복잡해지고 유지보수가 어렵다는 것이었습니다.

 

그래서 어떻게 해결했냐고요? CSS 클래스명을 사전에 정의하고, JavaScript에서 해당 클래스를 추가하거나 삭제하는 방식으로 변경했습니다. 이렇게 하니 유지보수성도 높아지고, 코드의 가독성도 향상됐어요.

 

성과는 어땠냐고요?

• 기존 방식 대비 개발 시간을 30% 단축할 수 있었습니다.
• CSS를 통해 스타일을 변경하면서 코드의 가독성과 재사용성이 크게 향상되었습니다.
• JavaScript에서 직접 스타일을 조작하는 코드를 제거하여 코드 품질도 개선되었습니다.

예시 코드를 보여드릴게요! 

아래 예제는 스타일이 간단해 보이지만, 실제 업무에서는 이보다 훨씬 복잡하고 어려운 스타일 작업이 많습니다. JavaScript로 직접 스타일을 설정하는 방식은 특정 조건에 따라 동적으로 스타일을 변경해야 할 때 유용합니다.

// JavaScript로 스타일을 직접 설정하는 예시
const box = document.getElementById('box');
const button = document.getElementById('toggleButton');

button.addEventListener('click', () => {
    if (!box.style.backgroundColor || box.style.backgroundColor === 'gray') {
        box.style.backgroundColor = 'blue';
    } else {
        box.style.display = 'none';
    }
});

이 방법은 특정 스타일을 동적으로 조절해야 할 때 JavaScript에서 바로 속성을 조작하는 방식입니다. 이제 CSS 클래스를 이용한 방식과 비교해볼까요?

<style>
    /* CSS */
    .none {
        display: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: gray;
        transition: background-color 0.3s;
    }
    .box.active {
        background-color: blue;
    }
</style>


<!-- HTML -->
<div id="box" class="box"></div>
<button id="toggleButton">Toggle Active</button>

<script>
    // JavaScript
    const box = document.getElementById('box');
    const button = document.getElementById('toggleButton');

    button.addEventListener('click', () => {
        if (!box.classList.contains('active')) {
            box.classList.toggle('active');
        } else {
            box.classList.toggle('none');
        }
    });
</script>

 

어디에 활용했냐고요? 페이지 전환 애니메이션, 버튼 활성화/비활성화, 상태에 따른 UI 변경, 모달 창 활성화 등 다양한 상황에서 이 방식을 적용했습니다.

 

그럼 진짜 css가 최고일까요? 

JavaScript vs CSS: 스타일 처리는 어디에서 하는 것이 더 효율적일까요?

CSS에서 스타일을 처리하는 방식

• 장점:
  • 가독성: 스타일은 CSS에서 관리하므로 JavaScript 코드는 로직에 집중할 수 있습니다.
  • 재사용성: CSS 클래스는 여러 곳에서 재사용할 수 있습니다.
  • 성능: 브라우저는 CSS 변경을 최적화하여 렌더링 성능을 높입니다.
  • 유지보수성: 디자인 변경 시 CSS만 수정하면 되므로 편리합니다.
• 단점:
  • 특정 동적 스타일은 JavaScript로 처리해야 하는 경우가 있습니다 (예: 스크롤 이벤트에 따라 동적으로 변경).

JavaScript에서 스타일을 처리하는 방식

• 장점:
  • 동적 스타일링: 실시간 계산(예: 윈도우 크기에 따라 동적 스타일 변경)이 필요할 때 유용합니다.
  • 세밀한 제어: JavaScript로 특정 요소의 특정 속성을 세밀히 제어할 수 있습니다.
  • 인터랙션 로직: 사용자 이벤트(클릭, 호버 등)와 밀접하게 연동할 수 있습니다.
• 단점:
  • 가독성 저하: JavaScript 코드가 복잡해질 수 있습니다.
  • 유지보수성 저하: 스타일 변경 시 CSS와 JavaScript 모두 수정해야 할 가능성이 있습니다.
  • 성능 문제: DOM 직접 조작이 많으면 브라우저 성능 저하를 초래할 수 있습니다.

 

결국 무엇이 더 좋냐고요? 사실 정답은 상황에 따라 다르다는 것입니다. CSS와 JavaScript를 상황에 맞게 사용하는 것이 중요해요. 실제 사용 사례에 따라 적절한 방법을 선택하는 것이 가장 효율적입니다.

너무 원론적이죠? 하지만 개발해야 하는 UI를 보고 동작을 봐서 CSS가 좋을지, 라이브러리를 사용하는 것이 좋을지, JavaScript를 활용하는 것이 좋은지 빠르게 판단하는 경험이 중요하다고 생각해요. 다양한 포트폴리오나 사이드 프로젝트를 통해 경험을 늘려가면 더 빠르게 결정할 수 있게 됩니다. 저도 그 과정 중에 있어요