Обробка імен класів у вашому проекті

Я брав участь у кількох малих стартапах, які значною мірою покладаються на стажерів для створення своїх MVP. Ці позиції зазвичай не оплачуються, а стажери в основному отримують досвід і можливості для налагодження контактів.

Однак такі стартапи часто не приділяють достатньо уваги якості коду. У цьому пості я виділю деякі поширені проблеми, з якими я стикався, і запропоную кращі підходи.

Проблема

Поширена помилка серед початківців — це те, як вони обробляють умовні імена класів, працюючи з CSS/SCSS модулями. Ось приклад:

className={  
 status === 'active'   
 ? `${styles.button} ${styles.active}`   
 : `${styles.button}`  
}

className={  
 status === 'disabled'   
 ? styles.disabled   
 : ''  
}

Хоча це працює, воно може швидко стати важким для читання і підтримки. На щастя, є простий спосіб покращити цей підхід.

Рішення: Використання бібліотеки classnames

Бібліотека classnames надає корисну утиліту cn() (або classNames()). Ця функція дозволяє конкатенувати імена класів і фільтрувати неприпустимі значення, такі як false, undefined або null.

Давайте рефакторимо попередні приклади, використовуючи classnames:

className={cn(styles.button, status === 'active' && styles.active)}

className={cn(status === 'disabled' && styles.disabled)}

Значно чистіше і легше для читання, правда?

Кращі практики для умовних імен класів

1. Використовуйте булеві змінні для простих умов

Коли у вас є лише два стани, такі як enabled і disabled, визначте булеву змінну, щоб зробити ваш код більш виразним:

const isDisabled = status === 'disabled';  
className={cn(isDisabled && styles.disabled)}

2. Використовуйте Enum або типи для декількох станів

Якщо у вас більше ніж два стани, ви можете безпосередньо відображати їх на CSS модульні класи. Наприклад:

type ButtonStatus = 'enabled' | 'disabled' | 'default';  
const status: ButtonStatus = 'enabled';  

...  

className={cn(styles[status])}

Таким чином, ваші стилі стають більш керованими, а код залишається лаконічним.

Написання власної функції cn

Якщо ви не хочете додавати додаткову залежність, таку як classnames, ви можете реалізувати базову версію функції cn самостійно. Ось як:

export const cn = (...args: unknown[]): string =>   
 args.filter(isString).join(' ');  

const isString = (value: unknown): value is string =>  
 typeof value === 'string' && value.length > 0;

Ця проста утиліта фільтрує нестрокові значення і з'єднує решту в один рядок, імітуючи функціональність бібліотеки classnames.

Використовуючи ці підходи, ви зробите свій код більш читабельним, підтримуваним і масштабованим. Стартапи та команди, навіть ті, що залежать від стажерів, можуть отримати велику вигоду від таких чистих практик. Якість коду — це інвестиція, яка виправдовується в довгостроковій перспективі!

Перекладено з: Handling Class Names in Your Project