Использование CSS-in-JS в Svelte

Вам это не нужно, но вы можете

Rich Harris 26 Декабря 2018

CSS стили являются основной частью любого веб-приложения. И по определению, UI фреймворк без встроеных средств работы со стилями не будет полноценным.

Вот почему Svelte позволяет добавлять CSS стили в тег <style> внутри компонента. Совместное размещение вашего CSS вместе с HTML разметкой решает самые большие проблемы, с которыми сталкиваются разработчики при написании CSS, при этом избегая новых проблем, одновременно предлагая совершенно прекрасный опыт разработки.

Но всё же у Svelte имеются некоторые ограничения при обработке стилей. Например, сложно шарить стили между компонентами или оптимизировать стили всего приложения целиком. Это те области, которыми мы планируем заняться в будущих версиях, а пока, если вам нужны эти вещи, используйте любую, независящую от фреймворков, библиотеку CSS-in-JS.

Пример

Можно использовать библиотеку Emotion для генерации изолированных имён классов в отельно взятой области видимости, которые можно использовать сразу в нескольких компонентах:

Важно понимать, что большинство библиотек CSS-in-JS работают в своей среде выполнения и не поддерживают статическое извлечение стилей в отдельный файл .css во время сборки (а это важно для производительности). Поэтому рекомендую использовать CSS-in-JS, только если это реально необходимо для вашего приложения! В некоторых случаях, хорошим решением будет сочетание, встроенной в Svelte, обработки CSS стилей вместе с дополнительным использованием CSS-in-JS библиотеки.