Best practice of using custom CSS files in a project

Phoenix Forum Questions / Help
, ,
1

As my Phoenix project has grown bigger, all the custom CSS for all the pages put in a single app.css file feels wierd and problematic. What is the best practice in this regard ? Is there any way I can use separate CSS files for separate pages in my Phoenix app ?

2

Use css imports?

/* app.css */

@import "./reset.css";
@import "./variables.css";
@import "./registration-page.css";
/* and so on */
3

Thanks for the reply. In your suggestion, if I have h1 {color: red} in reset.css and h1 {color: blue} in variables.css, then how will that be correctly resolved? As far as I know, webpack just combines all the css into a single css file at runtime.

4

I use BEM class name conventions, so such conflicts don’t happen to me.

You can also use render_existing/3 in your layout template to include a CSS file per page.

1 Like
5

I use render_existing/3 and for example I have for CSS:

<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<%= render_existing(@view_module, "css." <> @view_template, assigns) %>
<%= if assigns[:live_view_module] do %>
<%= render_existing @live_view_module, "css", assigns %>
<% end %>

and for JS:

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
<%= render_existing(@view_module, "js." <> @view_template, assigns) %>
<%= if assigns[:live_view_module] do %>
<%= render_existing @live_view_module, "js", assigns %>
<% end %>

In my PageView, I have code to provide links to CSS and JS:

  def render("css.last_all.html", %{conn: conn}) do
    href = Routes.static_path(conn, "/css/last_all.css")
    ~E(<link rel="stylesheet" href="<%=href%>" />)
  end
  def render("js.last_all.html", %{conn: conn}) do
    src = Routes.static_path(conn, "/js/last_all.js")
    ~E(<script type="text/javascript" src="<%=src%>"></script>)
  end

In my live views, I use customized links:

  def render("css", _assigns) do
    {:safe, "<link rel='stylesheet' href='/css/overview.css'/>"}
  end
  def render("js", _assigns) do
    {:safe, "<script type='text/javascript' src='/js/overview.js'></script>"}
  end

Thus, the layout calls functions to render (provide HTML link and script) CSS and JS. Note that webpack.config.js has to have an entry for every use case or the file won’t be available since they are not imported from app.js.

'overview': ['./js/overview.js'].concat(glob.sync('./vendor/**/*.js')),
'last_all': ['./js/last_all.js'].concat(glob.sync('./vendor/**/*.js')),
...
2 Likes
6

This will be resolved according to the CSS cascading rules. It’s not something specific to Phoenix, it is about CSS in general.

In short, if you have two CSS rules that both could apply to an element:

  • The most specific one wins (e.g. if you have <span class="danger">...</span> and the CSS rules span.danger { color: red; } and span { color: black; }, the first would win because it is more specific (it targets and element and a class). Specificity is an important concept in CSS, worth a deeper look, as it has deeper ramifications than in this simple example.

  • If the two rules are equally specific, the one that appears last in the code wins, by overriding the previous one.

You can use specificity of rules at your advantage to apply style to some elements and not to others. BEM class naming is one such way.

Allow me to make a pledge to all web engineers to take the due time to learn CSS well :slight_smile: It is a truly amazing language, one of the pillars of the web, and too often disregarded as a secondary topic. Good mastery of CSS is a powerful skill to have in a developer’s toolbox.

1 Like
7

Yes , I learned BEM today and will be using it from now on.