kalkatfyodor
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?
First Post!
benwilson512
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.
Most Liked
benwilson512
It’s best to hand out such comments sparingly 
@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.
LostKobrakai
phoenix.css is the styling used so code generated by the phoenix generators doesn’t look ****. 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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"