#inline styles

CSS is global and static. And what’s wrong with that?

Creating inline styles are ok as long as it isn’t taken to the extreme. Now there’s ReactCSS. See the discussion on HN. How's this affect performance? How long will this trend last? Happy debugging ;)

These are the main arguments against CSS:

Everything is global. Selectors are matched against everything in the DOM. You need naming strategies to combat against this and keep things efficient (which are hard to enforce and easy to break).

CSS grows over time. Smart people on great teams cede to the fact that they are afraid of their own CSS. You can't just delete things as it's so hard to know if it's absolutely safe to do that. So, they don't, they only add. I've seen a graph charting the size of production CSS over five years show that size grow steadily, despite the company's focus on performance.

You can be more dynamic with styles in a programming language. The argument goes something like "we're already juicing up CSS with preprocessors anyway, might as well kick it up a notch." You could for instance (if you really wanted to make this controversial) base styles off a User-Agent string or a module's current width.

I can't buy this. it's a smple enough example BUT in the real world, the # of vars is going to get out of control.

// Abstract this wherever in your build process // There could be logic here. var divStyle = {  background: "#eee",  padding: "20px",  margin: "20px" }; // Inline styles applied in the HTML you build here var Module = React.createClass({  render: function() {    return <div style={divStyle}>Hello {this.props.name}</div>;  } }); // You could pass dynamic stuff here as needed. React.render(<Module name="World" />, document.getElementById("area-1")); React.render(<Module name="Universe" />, document.getElementById("area-2"));

The virtual DOM thing that React does is also important because of its speed. DOM manipulation stuff is generally regarded as slow in JavaScript, and thus managing styles through DOM manipulation would also be slow. But React has the magic dust that makes manipulation fast, so people don't worry about the slowness issues when working with React.

For those of you who are like me and absolutely love Campaign Monitor, you’ll likely be pleased to learn about something I discovered while using it recently (if you don’t already know about it).

Campaign Monitor employs some template tags which enable you to auto-generate tags for unsubscribe, sharing, browser view, etc. The problem I’ve faced with these tags is not being able to apply inline styles to them. And for those familiar with the email-client landscape, inline styles are absolutely necessary for visual integrity within clients such as Gmail and Outlook 2007. Otherwise you get results like this:

When you put together a template you can use embedded CSS and then ask Campaign Monitor to move your styles inline when generating your template. This works great and applies your embedded styles into their auto-generated tags. But if you’re building in your own inline styles from scratch there isn’t a way to add the CSS to the custom tags. At least that’s what I thought.

I went ahead and blindly tried to force inline styles into one of the tags like this:

<forwardtoafriend style="color: #b6b6b6 !important;">Share This Email</forwardtoafriend>

I was pleasantly surprised to learn that the Campaign Monitor system was smart enough to respect that inline style and carry it over into the auto-generated tag, resulting in this:

<a href="{url}" style="color: #b6b6b6 !important;">Share This Email</a>

The result is readable share/unsubscribe links because of the preservation of my inline styling: