🎭 CSS 유틸리티 클래스 남용: 스타일 재사용성 저하와 HTML 비대화

Why Wrong?

How to Fix?

// 문제가 있는 코드
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Submit
</button>

<div className="w-full max-w-sm bg-white rounded-lg border border-gray-200 shadow-md">
    <div className="flex justify-end px-4 pt-4">
        <button id="dropdownButton" data-dropdown-toggle="dropdown" className="inline-block text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white" >
            <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"/>
            </svg>
        </button>
    </div>
    <div className="flex flex-col items-center pb-10">
        <img className="mb-3 w-24 h-24 rounded-full shadow-lg" src="/docs/images/people/profile-picture-3.jpg" alt="Bonnie image"/>
        <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
        <span className="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
        <div className="flex mt-4 space-x-3 md:mt-6">
            <a href="#" className="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add friend</a>
            <a href="#" className="inline-flex items-center py-2 px-4 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700">Message</a>
        </div>
    </div>
</div>

// 수정된 코드 (CSS Modules 사용)
import styles from './Button.module.css';

<button className={styles.primaryButton}>Submit</button>

// Button.module.css
.primaryButton {
  background-color: #3490dc;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.primaryButton:hover {
  background-color: #2779bd;
}

//수정된 코드 (tailwindcss의 @apply 사용)
<button className="custom-button">Submit</button>

<style>
.custom-button {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>


//수정된 코드 (컴포넌트 기반 스타일링)
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #3490dc;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  &:hover {
    background-color: #2779bd;
  }
`;

<StyledButton>Submit</StyledButton>

You Might Also Like