Organizing asset file best practice

as an app grows..when to come to organizing your assets file is it best practice to create separate files in your javascript or stylesheet directory pertaining to a specific element or resource you are styling and keep all the code separate and create these files rather then including all javascript.stylesheet code in the application file that is atomically generated, i mean to keep it clean and easily readable for other to work on to is that best practice so if i have a listing resource create a css/javascript files that have all the code pertaining to that specific resource..or if i have a sidebar create a separate file in the assets pipeline as well?

Posted over 5 years ago by joseph
Posted over 5 years ago by joseph

in the rails comments it states this.. You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.

is that basically stating what I think which is create separate files for different style elements rather then putting them all in applicaiton.css and if you name a file with a css.scss extension you can use both syntax correct?

0
Posted over 5 years ago by Jeehoo Ahn

One golden rule in CSS is that whatever comes later has precedence. Whatever was written a line lower in any css file, or included later overrides whatever came before, if there are any requisites or conflicts.

I like to have a separate file (i call it variables.css.scss) of all the mixins or modular styles that I can use on multiple elements over time, to keep things DRY (don't repeat yourself).

@mixin non-background-color($r: 255, $g: 255, $b: 255) {
background-color: rgb($r,$g,$b);
}

This, of course has to come before when I call it.
In my other css file (custom.css.scss), which I make sure to place after this one. There, I use my mixin

#sidebar-one {
@include non-background-color();
}

I include them in this order in my in my css manifest (i.e. application.css.scss)

@import "variables";
@import "custom";

Or you can do

/*
*= require variables
*= require custom
*/

If you place them in a subfolder like app/assets/stylesheets/subfolder/variables.css.scss
then you can do

@import "custom/variables";
@import "custom/custom";


Switching the order of these two files would cause things to not display correct, since you need to define something before you call it.

0
Posted over 5 years ago by joseph

so you must include them in this specific order in your in my css manifest (i.e. application.css.scss) for them to show up on your app? and you can sue either format as show above.

0
Posted over 5 years ago by Alex Yang

Yes, exactly. It's best to have separate files, which will make it easier for you to find the relevant CSS sections as your app grows.

0
Posted over 5 years ago by joseph

ok and that comes down to a preference like if you want all you sidebar styles to be in a sidebar folder thats basically what it comes down to right?

0
Posted over 5 years ago by Alex Yang

That's right. You could organize these styles in a sidebar.css.scss file, for example.

0
Posted over 5 years ago by joseph

and wether you use css or scss in these files both will work without problem right?

0
Posted over 5 years ago by Alex Yang

Yes, you can either use a .css file or a .css.scss file, which will ultimately convert into a regular .css file.

0
Posted over 5 years ago by Jeehoo Ahn

unrelated thought: decreasing the indent width per reply might be good.

0