Въведение

В последно време, много разработчици заменят JavaScript с нови CSS функции, за да опростят кода. Но какво се случва, когато логиката е разделена между CSS и JavaScript? В тази статия, Габриел Шойомбо разглежда как да се справим с комплексността при миграция от JavaScript към CSS, като предлага практически съвети.

Локална простота срещу системна комплексност

Когато добавяме нова CSS функция, трябва да помним, че тя не работи сама. CSS и JavaScript взаимодействат помежду си, а стабилността на системата зависи от начина, по който те се справят помежду си. Има две важни измерения:

• Локална простота: Колко малко код е необходим в един файл.
• Системна комплексност: Броят на взаимодействията, които трябва да разберете, преди да можете безопасно да промените приложението.

Сценарий 1: Поведение с двама собственици

Проблемите започват, когато старият JavaScript код не бъде напълно премахнат. Например, ако замените ResizeObserver с CSS Container Queries, но оставите стария код, може да възникнат конфликти при промяна на условията. Важно е да знаете кой е собственик на поведението на компонента и да разделите отговорностите между CSS и JavaScript.

Сценарий 2: Съседът пренарежда стаята

Нови CSS свойства могат неволно да променят оформлението на компонента. Например, добавянето на container-type: inline-size може да доведе до неочаквани резултати като спиране на колапсирането на маргините или преместване на елементи. Преди да добавите нови свойства, задайте си три въпроса относно ширината и маргините на елемента.

Сценарий 3: Шумният съсед

CSS Cascade може да доведе до неочаквани конфликти. Например, използването на селектора :has() може да повлияе на стиловете на други компоненти. Важно е да ограничите селекторите и да проверите тяхната специфичност, за да избегнете нежелани ефекти.

Сценарий 4: Съседът бави плащането на наема

Прехвърлянето на поведение от JavaScript в CSS не означава непременно подобряване на производителността. Например, използването на :has() може да увеличи времето за рендиране в зависимост от структурата на DOM. Преди да направите промени, измерете реалното натоварване и сравнете времето за рендиране преди и след миграцията.

Контролен списък за миграция

Преди да замените JavaScript с нова CSS функция или да я внедрите в съществуващ код, отговорете на следните въпроси:

1. Собственост: Кой е собственикът на това поведение – CSS или JavaScript?
2. Обхват: Какво се променя в контекста на форматиране?
3. Каскада: Кои съществуващи правила могат да надделеят над новото?
4. Миграция: Премахнали ли сте старата имплементация и тествали ли сте всяко състояние?
5. Производителност: Измерили ли сте реалното натоварване преди и след миграцията?
6. Поддръжка: Може ли следващият разработчик лесно да разбере защо това правило съществува?

Заключение

Съвременният CSS предлага много нови възможности за стилизиране. Въпреки това, новата функционалност не автоматично води до по-проста система. За по-добра интеграция е важно новото правило да има ясен собственик и предварително проверен обхват. Следващият път, когато видите PR с много изтрити редове код, помислете каква сложност остава и задайте шестте въпроса.

(gg, yk)