Using a resource for css

I currently use old fashioned css files uploaded to the server and linked to via their file name.
I've been toying with the idea of bringing them into the database so that I can use chunks or TVs or placeholders to define repeated values such as hex colours, font sizes etc. I guess a. It like sass but without the preprocessing.

Are there any pros/cons doing this?
Is there a performance hit by calling the css from the database?

Could I do the same with my js files?

I was thinking of pulling a bunch of chunks in to combine them into one file.

Also is there a way to minify this on the fly? I currently using minifyx with the static files but assume this won't work if they are in the database?


Any thoughts on the subject?

Cheers
Andy

. Is there a performance hit by calling the css from the database

Yes, firing up PHP/mySQL takes time, even milliseconds count. Using statcache and url rewriting will get you real close to matching serving a static file though.

Not 100% without checking but if a resource for is set to CSS I don't think it is processed for chunks etc. Could be wrong though. Update, I was wrong, Resource with Resource Type = Document and Content Type = CSS is parsed for snippets/chunks etc.

To automate minification I route CSS and js through minify by Mr Clay. MODX ships with a copy in the manager directory. This is combined with a snippet to register files for inclusion in head or foot via MODX, a second snippet grabs the file list sends to minify for processing and combined into a single file. Essentially like minifyX I think except I don't think minifyX returns a single file.

On top of that my setup can lazy load the files so page load is faster.

Let me know if you want example code. Be interesting to see what you come up with. Any time I've looked at less/sass etc. I've concluded it's overkill for the level I work at. A hybrid option might make more sense but rough as it sounds search/replace works fine. [ed. note: chris.dempsey78 last edited this post 9 years, 3 months ago.]

Interesting insights - thanks.
Yes I often feel it's overkill too but it seems everyone is using less/sass and don't want to get left behind!
I have read about cssSweet - maybe that's an option?
I just quite like the idea of setting variables for key parts of the css which I can then control centrally. I have a couple of sites with huge css files and they do become a little complex at times!

So do most people serve the css and is as physical files like I'm already doing?

I wasn't sure if it was the done thing!

I think the browser is much more likely to cache the CSS as people move from page to page if it's done the old-fashioned way. Also, there's a lot to be said for having one big, minified CSS file and using different selectors on different pages. Once the browser has cached that, it's never loaded again.

Minifying is pretty easy in a plugin attached to OnDocFormSave or OnDocChunkSave, but you'd probably want to de-minify it with a plugin attached to the appropriate render event. Both would slow down the Manager some.

Thanks bob - seems as though I'm already doing it right then. I use minifyx to compress and combine my css and js files which works great - but I just wanted to leverage the ability to use variables within my css so I can control key things such as colours etc in one place.
Maybe if it ain't broke - don't fix it though!

I'd personally prefer a proper pre-processing workflow over doing it in MODX, but that's definitely possible. Especially when giving clients the ability to edit colors, that can be useful. For things like that I'd recommend taking a peek at ClientConfig to manage the variables, that's easy to implement and has a color picker field type.

I don't really understand how one would do that though. I write a lot of my css while in modx - but I can't use preprocessing as that would need to be local to my mac wouldn't it?

I work in an agency where others work on the same projects - I've never really understood how preprocessing works if your working on a server?

Well usually you wouldn't edit CSS on a live server but on a development server thats used by you and your agency as well as any other third party developers. You'll usually also use some kind of version control GitHub/BitBucket to track changes made by you and your team and push the changes to live when your agency and the client has given the greenlight to everything.

Personally I use prepros (https://prepros.io/) as my preprocessor. It'll compile locally but you can set it to push changed files to ftp instantly, and you can just attach the prepros config file to your git or upload it to your server so others can use the same config.
[ed. note: lkfranklin last edited this post 9 years, 3 months ago.]

PhpStorm will do this as well. You can assign "file watchers" that execute whenever you save files of a given type. So you can write in SCSS or Less, or whatever, and when you save the file, the resulting CSS file is updated and then minified (and potentially combined with other files).

You could also have the CSS file pushed to the remote, but I prefer doing that manually. You can do it with FTP from within PhpStorm, but I generally cut and paste it to the remote because I've been too lazy to set up the FTP connection (and it's slightly more secure not to have an FTP account at the live server).

Thanks

Most sites I run a reasonably small so version control is handled by versionx in modx.
Most edits are made on the live server purely to keep time/costs down for the customer.
I find using git slows everything down so much that the dev costs skyrocket.

I do have a couple of sites which are larger and more business critical so I may need to think about something more robust though.

Our studio works from a Mac mini server running OS X sever. I have a feeling I could use this as my dev server and make it accessible to the public for approval? Again, trying to keep costs down for customers by not running two web servers.