Різні логічні способи групування CSS-властивостей

17

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

Є такий CSS:

.module {
background: rgba(198, 148, 72, 0.75);
color: #222;
clear: both;
margin: 0 0 2rem 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border: 2px solid black;
border-radius: 4px;
padding: 1rem;
font-family: sans-serif;
font-size: 0.9 rem;
line-height: 1.4;
opacity: 1;
transform: opacity 0.2 s ease-in-out;
transform-origin: right center;
}

Хоча я і не особливо проти «рандомного» пристрої (ніякої логіки в структуруванні стилів), я бачу аргументи проти нього. Якщо в коді буде дублікат, його буде складно знайти, а також доведеться попотіти при налагодженні. Зараз я подумав про це і зрозумів, що зі мною це відбувалося дуже часто.

Також скажу, що у мене є свій стиль написання. Типи подвійного пробіли, прогалини перед відкриваючою дужкою, одного пробілу після коми і т. д. Але це вже інша стаття.

Давайте подивимося, як до цього набору правил можна застосувати різні логіки угруповання.

За алфавітом

Перебудуємо стилі за алфавітом:

.module {
background: rgba(198, 148, 72, 0.75);
border: 2px solid black;
border-radius: 4px;
clear: both;
color: #222;
display: flex;
flex-direction: column;
font-family: sans-serif;
font-size: 0.9 rem;
line-height: 1.4;
margin: 0 0 2rem 0;
opacity: 1;
overflow: hidden;
padding: 1rem;
position: relative;
transform: opacity 0.2 s ease-in-out;
transform-origin: right center;
}

Тепер у стилях є певна логіка. Якщо ви шукайте властивість opacity, ви можете швидко пробігтися по коду до букви О. Необхідно повністю довіряти алфавітній сортування, в чому я бачу заклик.

Jerry Low великий захисник: «Алфавітний порядок універсально зрозумілий. Більшість людей можуть сортувати речі за алфавітом без перевантаження мізків… З основних плюсів алфавітній сортування CSS-властивостей можна виділити швидкість і недвусмысленность. Але особисто для мене найбільший плюс це те, що тут не потрібно нічого вивчати.»

Частина властивостей групується природним чином. Зверніть увагу, що властивості font і transform об’єднані просто за своїм іменування. Чисто випадково властивості flexbox йдуть один за одним, але пропускаються filter і fill. Що-то, що за логікою речей має йти один за одним, наприклад, margin і padding, йде в різнобій. І це веде нас до…

Групування за типом

Ми вже зрозуміли, що угруповання за «типом» частково працює сама по собі за дотримання алфавітного порядку. Тим не менш, у такій структурі буде багато винятків, так чому б не згрупувати властивості з того, що вони роблять, а по тому, як вони називаються. Я написав слово «тип» в лапках, тому що угрупування за типом – це повністю наша думка, це не семантична і не програмна концепція.

Додамо кілька порожніх рядків, щоб розділити типи, і код буде виглядати приблизно так:

.module {
background: rgba(198, 148, 72, 0.75);
color: #222;
opacity: 1;
border: 2px solid black;
border-radius: 4px;
font-family: sans-serif;
font-size: 0.9 rem;
line-height: 1.4;
position: relative;
display: flex;
flex-direction: column;
clear: both;
overflow: hidden;
margin: 0 0 2rem 0;
padding: 1rem;
transform: opacity 0.2 s ease-in-out;
transform-origin: right center;
}

Тоді виникає питання: як сортувати групи типів? У який тип що піде? Як сортувати властивості всередині типів? На ці питання не обов’язково відповідати, це просто їжа для роздумів.

Michael Arestad не особливо піклується про те, як сортування виконується властивості, і він каже: «Зазвичай люди добре групують властивості по позиціонуванню, бокс моделі та шрифтів і без навчання.»

Але він дає чітко зрозуміти, що просто «читаності» не досить в суперечці: «Легкість читання для мене не аргумент. Її легко збити, так як нас хвилює тільки легкість знаходження властивості. Це так само легко з методами, і найчастіше, з мого досвіду, починається у браузері.»

Угруповання по довжині

Хочете щось дивне? Ось так робить набагато більше людей, ніж ви думаєте:

.module {
background: rgba(198, 148, 72, 0.75);
transform: opacity 0.2 s ease-in-out;
transform-origin: right center;
border: 2px solid black;
font-family: sans-serif;
flex-direction: column;
margin: 0 0 2rem 0;
position: relative;
border-radius: 4px;
font-size: 0.9 rem;
overflow: hidden;
line-height: 1.4;
display: flex;
padding: 1rem;
color: #222;
clear: both;
opacity: 1;
}

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

CSS Comb

Варто згадати CSS Comb, проект організуючий CSS-властивості.

Різні логічні способи групування CSS-властивостей

Інструмент з великою кількістю налаштувань. Можна пройти налаштування з 24 кроків, щоб код був точно таким, як ви хочете. Ось це мені подобається. Я тільки що створив свій конфіг і буду використовувати його. Сервіс виглядає ще більш привабливо в командній роботі. Так ви отримуєте переваги логічної сортування (якщо вона є!), а також послідовний і примусовий спосіб коду без зусиль.

Також є PostCSS plugin. Не забувайте, що не важливий кінцевий результат з оброблюваним CSS-файл, який ми говоримо про обробці наших стилів. Все відбувається всередині IDE.

Інші способи сортування

Знаєте інші способи сортування властивостей? Може, «за останнім доданого»? Сортування за вашим уподобанням?! Які властивості для вас важливі??!!