Or is it Ruby? I’m not really sure. I’ve been building the sample app in Chapter 2 of this Ruby Tutorial, and straight away I can see that my CSS is getting structured incorrectly for long term maintainability.
I used rails to generate the User automatically…
rails generate scaffold User name:string email:string
rails generate scaffold Micropost content:string user_id:integer
I did not order these stylesheets
I took a look inside
/app/assets/stylesheets/, mainly because I wanted to spend a bit of time in a part of the app that was likely to look more familiar to a front-end developer. ;)
What I found surprised me. There were already four stylesheets – none of which I would have created were I rolling a brand new app by hand.
application.css microposts.css.scss scaffolds.css.scss users.css.scss
Erm, weird. Our CSS architecture should certainly not match our back-end architecture if we want it to scale. It seems like rails creates a new stylesheet every time I make a new model (and some other times too, because scaffolds aren’t a model).
How could Rails handle CSS better?
As a first pass, it seems like it would make sense for rails to add command line options to add CSS components. So you could ask rails to add buttons and it would create sass files for buttons, add .erb templates, etc. Maybe they could even be dependencies? I’ve been thinking that it would be cool to add components like buttons, boxes, grids and media blocks to NPM so that a project could require buttons and automatically get any code required for them without including an entire front end library. Maybe rails needs something similar.
Is that nuts? What do you think? Has your CSS stayed maintainable on Rails projects? I’d also love to hear about it if I’m misunderstanding aspects of Ruby, Rails, or the line between the two.
Photo credit: Christina B Castro