Context
I'm making a small website. I'm using .NET's Blazor framework.
I added the styling in the style tags of the HTML elements. This made my website much simpler to code.
<div style=" margin: 6px 6px; text-align: center; background-color: var(--clr_fg_3); color: #244434;">...</div>Now, because of this I'm having trouble. I can't do the responsive parts easily because HTML stye tags don't allow it.
I have two options:
- Or: rewriting everything to CSS. It would be a lot of work. It would make my website a lot harder to maintain. When style tags are directly in the HTML, editing is easy.
- Or: using Razor in some way. But I'm struggling to find the best way.
My attempts
First attempt: - This doesn't work.
<div style=" margin: 6px 6px; text-align: center; background-color: var(--clr_fg_3); color: #244434; @if (Width > 100) { @<text>color: #244434</text> }">...</div>Second attempt: - This does not work and I can't read it either.
<div style=" margin: 6px 6px; text-align: center; background-color: var(--clr_fg_3); color: #244434; @((Width > 100) ? @:(color: #244434) : "")">...</div>Question
What are the options using Razor or using extensions to the Blazor framework to add responsiveness to style tags? I prefer to stay away from x ? y : "" expressions. I think that's hard to read.