Propshaft Rails - Best practices on how to load multiple css files

rubyonrails-talk
1

Last couple of days/weeks I’m trying out Propshaft as an asset solution for Rails. It’s awesome, I love it. I just want to be sure on some best practices:

question 1 - recommended way to load multiple css files

How would a developer include multiple css files (E.g. vendor css files and multiple custom site css)

Best approach for so far was to load them separately one by one stylesheet_link_tag:

<head>
    ....
    <%= stylesheet_link_tag "theme.min.css", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tom-select.bootstrap5.css", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "bootstrap-icons.css", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "trix", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "rails_bootstrap_forms", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "custom_styles_for_given_section", "data-turbo-track": "reload" %>

    ...

I just want to be sure if this goes along with the overall Propshaft vision

note: I found importing css from within another css with @import url('/other.css') bit hard to maintain (more info)

question 2 - is it better to load all CSS or only necessary CSS

where would be the limit if a developer has 50 vendor css files and 17 custom css files. Should developer add link tag for all 67 of them ? In theory they will be cached in browser on next load = no big deal right ?

Or should developer just load css files via stylesheet_link_tag he/she really needs in a given context (e.g. on upload file endpoint only couple of vendor css files that are needed for file upload)

// app/view/layouts/application.html.erb
<head>



    ....
    <%= stylesheet_link_tag "theme.min.css", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= content_for :head %>
    ...

// app/view/posts/_form.html.erb

    ....
  <% content_for :head do %>
    <%= stylesheet_link_tag "tom-select.bootstrap5.css", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "trix", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "rails_bootstrap_forms", "data-turbo-track": "reload" %>
  <% end %>

question 3 - how should team organize custom css files ?

let’s ignore vendor css files for now. How would developers write own css for the application. Should they keep it to as least amount of files as possible (so 1-5 css files) or they can go wild and have as many as they want (e.g. every part of application own css file , so let say 20 css files)

Thank you for your input

3 Likes