What is the difference between phoenix.css and app.css?

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?

1 Like

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 phoenix.css.

3 Likes

It’s best to hand out such comments sparingly :slight_smile:

@LostKobrakai I think has done an excellent explanation here that really gets at the heart of the goal. A good example today would be Bulma. Bulma is a very popular javascript free CSS framework. If you want to use bulma in a phoenix project it’s super easy: just delete phoenix.css and add the core bulma files and you’re done.

Notably: 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.

3 Likes