I don’t understand the difference between phoenix.css and app.css. In app.css I have phx-something classes. Why aren’t they in the phoenix.css file? Why isn’t app.css blank for my custom styling?
To be honest I have no idea where should I put my custom CSS styling, phoenix.css or app.css?
Phoenix code will apply those classes to various DOM elements automatically, like when a live view page disconnects. However, it’s up to you what it should look like when those classes are applied. Thus, since it is “custom code” of a sort, it goes in app.css. When you generate a new project, Phoenix generates a good default for you, just as it does with lots of other code.
Exactly. To me it doesn’t make sense at all. All phx-something alert-something classes should be in phoenix.css and app.css should be almost empty or perhaps have some basic styling.
The current setup is bad design and utterly confusing.
I have decided to ditch the phoenix.css file altogether and use only app.css but then I came to this error: From my 5 css files only app.css is being compiled to the static folder
phoenix.css is the styling used so code generated by the phoenix generators doesn’t look shit. If you don’t intend to use the default UI you can delete the whole file as is. The LV related classes in
app.css are indendend to be kept even if you scrap the default UI. They’re meant to be updated, but not removed, given they’re essential for the UX of LV pages. No need to search
phoenix.css for essential vs non-essential pieces of css.
I can see a case being made that the alert classes should be part of phoenix.css, but tbh I also just delete them once I don’t use them anymore, just like
It’s best to hand out such comments sparingly
phoenix.css and add the core bulma files and you’re done.
app.css will still contain a
phx-disconnected definition, why? Because this is still a class you need to have a definition for regardless of whether you’re using the phoenix styles or not.