DD
3
To Inline CSS Automatically or Not to Inline CSS Automatically? That is the question.
Do you inline automatically?
- If no, why?
- If yes, what service do you use? And what are your "known issues" with it?
I've been trying premailer as a local gem for a bit but the issues that I run into seem to outweigh the benefits of using it. However I really, really enjoy the cleanliness of my code that way. I'm guessing that I'm not the only one looking into this so I figured people could weigh in for future visitors.
Yes. I actually use the Node modules a friend and I created a for
Gulpjs
andGrunt
that inline css among other things. I used to use the Premailer gem, but had too many issues with it and I needed something with better selector support. So I turned to Node, since I'm familiar with JavaScript and built my own libraries. It uses an underlying module called Juice to inline css, but I also add features on top of that. Wow, I didn't mean for that to come off as a shameless plug hahaha.As far as issues goes, I don't have any as of yet. We do get some Github issues every once in a while, but try to solve them asap.
Awesome! This will finally get me to try Gulp. I'd like to use automated inlining but just have too many problems with premailer and I'm not "dev" enough to help improve it.
I've been looking for a non-ruby dependent task to replace Premailer in this grunt workflow. At first glance looks like your email builder could be a good solution. Cheers.
Any quirks to be aware of?
There aren't many. I would check the open github issues for any quirks you might want to be aware of.
Current Answer: No
I code everything by hand mostly because I'm old. It’s probably slower, but I prefer the line-by-line knowledge of how everything will work together.
But…
I might try one of Jeremy Peter’s plugins above. I share Mark’s concerns about what CSS is inlined and what’s not, but the plugins seem to address this:
<!-- styles will be inlined -->
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<!-- styles will be embedded -->
<link rel="stylesheet" type="text/css" href="../css/otherStyles.css" data-embed>
<!-- link tag will be preserved and styles will not be inlined or embedded -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' data-embed-ignore>
I also like that these aren’t gems because I’m on Windows half the time. The biggest thing holding me back is that I've never used Grunt or Gulp before. And that's not a good reason, is it?
I've tried briefly but not at the moment.
My main issue is when editing my html I want to know what styles are inline and what aren't. I want to know what I need to override with !important; and what could be causing errors in each client.
There are ways around that but my workflow is already very complicated so don't want to add more complexity just yet...
Yes, for anyone else checking this out this is a very valid concern. I started trying to just style buttons with classes but it gets really tricky on what will and won't get overwritten. As a whole, I'm starting to lean against it.
Yes.
Using Premailer with no real issues. Although most emails I work with are very simple and typically transactional.
I think the only quirk I would point out is that "premailer" packages across different languages don't all work the same i.e. the python premailer is (slightly) different to the grunt premailer, which is different to the (original) ruby premailer gem. Obvious when you think about it, but I remember being puzzled about a media query issue once due to this.
For those that manually write CSS inline, I'm curious if you use any other automated ways to optimize your workflow? e.g. creating helpers/partials/snippets
Yes, for about 2 months.
Premailer as a local gem in Middleman with Haml.
I admittedly don't have the knowledge to try and fix these myself, but I'm curious if you have tried? On the surface they seem straight forward, but I've never contributed to a ruby gem so not sure how deep the rabbit hole goes.
Tried? No. I poked around in the repo, looking for background-image and a couple of combinations of that. It would've been a stretch for me to figure out how the ordering worked but I was willing to try. Unfortunately I came up dry.
For my last few major projects, I've also needed to share the code that I was using. I know that's not a normal workflow but it probably will stay that way for me, so I've had to yank it altogether. I'm back to using Yaml variables and snippets.