Управління CSS в веб-додатках завжди було викликом для розробників. Від забезпечення правильного застосування стилів до написання підтримуваних CSS правил, цей процес часто може здаватися відірваним від основної логіки додатку. Але що, якщо ви могли б визначати, тестувати та керувати своїм CSS безпосередньо у вашому C# коді? Знайомтесь з SharpStyles від Hassan Habib, бібліотекою, що змінює правила гри для розробників Blazor.
У цьому блозі ми розглянемо, що таке SharpStyles, чому це велика справа і як це спрощує розробку сучасних веб-додатків.
Фото Aaron Burden на Unsplash
Що таке SharpStyles?
SharpStyles — це бібліотека для C#, яка дозволяє визначати CSS стилі в додатках Blazor, використовуючи код на C#. За допомогою підходу CSS-in-C# вона дозволяє розробникам безшовно інтегрувати визначення стилів в одне середовище з логікою їх додатків.
Ця унікальна методологія сприяє розробці через тести (TDD) для стилів, оптимізуючи робочі процеси та підвищуючи підтримуваність. Вона особливо потужна для розробників Blazor, які хочуть узгодити свої стилі з компонентами, які вони будують.
Ось як SharpStyles змінює гру:
- Вилучає перемикання контексту: Більше не потрібно стрибати між CSS файлами та C# кодом.
- Сприяє TDD для стилів: Пишіть тести для своїх стилів так само, як для логіки додатка.
- Зменшує помилки стилізації: Створюйте консистентні, багаторазові стилі програмно.
Чому SharpStyles — це велика справа
Blazor, популярний фреймворк для створення інтерактивних веб-інтерфейсів з .NET, вже спрощує розробку, дозволяючи використовувати C# для фронтенд- та бекенд-логіки. Однак стилізація компонентів у Blazor все ще залежить від CSS, що є окремою областю від вашого C# коду.
Ось де SharpStyles проявляється найкраще:
- Єдина мова: Ви можете визначати як логіку, так і стилі в C#. Це покращує консистентність і зменшує когнітивне навантаження для розробників.
- Динамічні та тестовані стилі: За допомогою SharpStyles ваш CSS тепер частина вашої кодової бази, що дозволяє писати тести для логіки стилів.
- Безшовна інтеграція з Blazor: SharpStyles був розроблений з урахуванням Blazor, що забезпечує сумісність і простоту використання.
Як працює SharpStyles
Використовувати SharpStyles просто. Бібліотека вводить атрибути C#, такі як [CssElement], [CssClass], та [CssId], щоб представляти HTML елементи, класи та ID. Ці атрибути дозволяють визначати стилі безпосередньо в класах C#.
Приклад: Визначення стилів з SharpStyles
public class MyComponentStyle : SharpStyle
{
[CssElement]
public SharpStyle Td { get; set; }
[CssClass]
public SharpStyle PrimaryButton { get; set; }
[CssId]
public SharpStyle SubmitButton { get; set; }
}
Тут ми визначаємо стилі для клітинки таблиці (td), кнопки з класом (PrimaryButton) і кнопки з ID (SubmitButton). Кожна властивість відповідає CSS елементу.
Застосування стилів
Після визначення стилів ви можете ініціалізувати та налаштувати їх наступним чином:
var myComponentStyle = new MyComponentStyle
{
Td = new SharpStyle
{
BackgroundColor = "red"
},
PrimaryButton = new SharpStyle
{
BackgroundColor = "blue",
Color = "white"
},
SubmitButton = new SharpStyle
{
Width = "12px"
}
};
Генерація CSS
Коли ви викликаєте myComponentStyle.ToCss();, SharpStyles генерує стандартний CSS:
td {
background-color: red;
}
.primary-button {
background-color: blue;
color: white;
}
#submit-button {
width: 12px;
}
Тепер ви можете використовувати ці стилі у своїх компонентах Blazor, впевнившись, що вони є консистентними та легкими для підтримки.
Реальні переваги
1.
Швидша розробка
Визначаючи CSS поряд з вашими компонентами Blazor, ви пришвидшуєте розробку та зменшуєте потенційні помилки стилізації.
Підтримуваність
Вся логіка стилів знаходиться в одному місці, що полегшує оновлення, тестування та управління.
Масштабованість
Якщо ваш проєкт зростає, SharpStyles допомагає вам управляти складними стилями без створення безладу з CSS файлами.
Дружність до тестування
Логіка стилів тепер може бути протестована, як будь-яка інша частина вашого додатку, що підвищує загальну надійність.
Як почати
SharpStyles є відкритим вихідним кодом і доступний на GitHub. Ви можете додати його до вашого Blazor проєкту через NuGet:
dotnet add package SharpStyles
Після встановлення, ознайомтесь з документацією, щоб дізнатися більше про можливості та приклади.
Останні думки
SharpStyles — це більше, ніж просто бібліотека — це зміна парадигми для розробників Blazor. З’єднуючи CSS і C#, вона спрощує стилізацію, підвищує продуктивність і ідеально поєднується з сучасними методами розробки.
Якщо ви розробник Blazor і хочете покращити свій робочий процес, SharpStyles вартий спроби. Спробуйте його і відчуйте силу CSS-in-C#!
Посилання
Ви використовували SharpStyles у своїх проєктах? Поділіться своїми думками в коментарях!
Перекладено з: Revolutionizing Blazor Development with SharpStyles: CSS-in-C# for the Win!