Divide base.css into smaller files
Closed this issue · 6 comments
I think base.css should just be styles that apply site-wide. There are styles in base.css that are only relevant for certain pages, e.g. styles for .inventory-table only affect dashboard, styles for .take-inventory are only for take-inventory pages, .etc
That can be done. The extra css files will make managing dependencies per page harder though. Do you know if there's a tool that would make it easier (something like requirejs, but for css)?
Alternately we could split it up for dev and see if there's a way to minify it into a single file for production.
The download / transfer size shouldn't be much of an issue since whitenoise compresses and caches static files.
CSS files can import other CSS files, though I don't remember a time when I have used it. https://developer.mozilla.org/en-US/docs/Web/CSS/@import
Squashing all of our CSS into a single file is defeating the purpose. Suppose I create a stylesheet take_inventory.css that styles the take inventory page and has the rule:
.bad-error
{
font-size: 36pt;
}
I only want this style rule to effect elements with class bad-error on the take inventory page. Since take_inventory.css is included only in take_inventory.html, I don't need to worry about the possibility that you (or me, or someone else) has created elements with class bad-error in other pages. Since my take_inventory.css is not included in those other pages, my style rules of course will have no effect. It's a compartmentalization thing.
We can avoid that by following good naming conventions. BEM seems to be the most popular (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) The whole point of CSS is to have a single stylesheet that applies to multiple pages. Minifying css into a single file to serve up in production is a pretty common practice because it makes things easier to manage.
Have you ever used SASS (http://sass-lang.com/guide)? It offers some features that make css easier.
I 90% agree that "The whole point of CSS is to have a single stylesheet
that applies to multiple pages.", though that doesn't mean I want every
style rule I write to applied site-wide.
A solution would be to have one large base stylesheet that represents
styles to be applied site-wide. But when I, or someone else, wants to write
styles that should only be applied to a small subset of our pages, we just
create a new stylesheet separate from "base" and include it in the specific
pages. I think this approach captures that good points of both of our
designs.
I am open to using stricter naming conventions, though learning the new
conventions and refactoring the code would take some time.
I have never used SASS, but I would be interested in using it. Keep in mind
that learning SASS and refactoring the code would take time --- probably
more time than we would save by using SASS (in the short term).
2015-07-09 6:12 GMT-04:00 EricHorton notifications@github.com:
We can avoid that by following good naming conventions. BEM seems to be
the most popular (
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
The whole point of CSS is to have a single stylesheet that applies to
multiple pages. Minifying css into a single file to serve up in production
is a pretty common practice because it makes things easier to manage.Have you ever used SASS (http://sass-lang.com/guide)? It offers some
features that make css easier.—
Reply to this email directly or view it on GitHub
#32 (comment)
.
We could probably go with a sitewide base and smaller files for specific sunsets if needed.
Either way, refactoring will probably take time, regardless of whether or not we stick with standard CSS or use SASS. As this isn't really a customer facing feature, shall we put it on hold until after we have completed site enhancements for the summer?
Eric Horton
On Jul 9, 2015, at 08:47, Sam Magura notifications@github.com wrote:
I 90% agree that "The whole point of CSS is to have a single stylesheet
that applies to multiple pages.", though that doesn't mean I want every
style rule I write to applied site-wide.A solution would be to have one large base stylesheet that represents
styles to be applied site-wide. But when I, or someone else, wants to write
styles that should only be applied to a small subset of our pages, we just
create a new stylesheet separate from "base" and include it in the specific
pages. I think this approach captures that good points of both of our
designs.I am open to using stricter naming conventions, though learning the new
conventions and refactoring the code would take some time.I have never used SASS, but I would be interested in using it. Keep in mind
that learning SASS and refactoring the code would take time --- probably
more time than we would save by using SASS (in the short term).2015-07-09 6:12 GMT-04:00 EricHorton notifications@github.com:
We can avoid that by following good naming conventions. BEM seems to be
the most popular (
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
The whole point of CSS is to have a single stylesheet that applies to
multiple pages. Minifying css into a single file to serve up in production
is a pretty common practice because it makes things easier to manage.Have you ever used SASS (http://sass-lang.com/guide)? It offers some
features that make css easier.—
Reply to this email directly or view it on GitHub
#32 (comment)
.—
Reply to this email directly or view it on GitHub.
We really have very little CSS, so the changes I had in mind when I created this issue will not take long. So I'll go ahead and make those changes.
After we have finished development for the summer, we could talk about CSS redesign, perhaps using SASS.