Mixins with existing css frameworks

Maxim-Filimonov commented 9 years ago

Hi, I was just wondering would it be possible to use VirtualCSS (or whatever is the final name will be) with existing frameworks mixins? For example, In scss i can easily make column third of the parent container size via Jeet

.article {
@include column(1/3);
}

The same question applies to classic css frameworks like bootstrap/foundation which define a bunch of mixins to allow to use them without putting class="row" all over your code. The problem i see is that without mixins we need to do one of the following:

Ditch any css frameworks which are not written specifically for VirtualCSS ( I think that is what Radium team (is suggesting)[https://github.com/FormidableLabs/radium-bootstrap]
Put non semantic classes all over components markup and include css frameworks outside of components. Aka bootstrap non semantic markup.

jviereck commented 9 years ago

Hi @Maxim-Filimonov, thanks a lot for opening this issue.

My goal is to support a way to reuse previous style definitions. That said, I don't think that mixins are a good way to do this. Instead, the idea is to use composition. Here an example (which is taken from the Sass introduction at 1):

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

In VirtualCSS this will become something along the lines of:

var vss = require('virtual-css');
var messageStyle = vss.style({
  border: '1px solid #ccc',
  padding: '10px',
  color: '#333'
});

var successComposer = vss.composer({
  borderColor: 'green'
});

// Apply the composer on the message style.
// This gives exactly the same styles as the `.success` in the Sass
// example above.
var successMessageStyle = successComposer(messageStyle); // (1)

One benefit of using composition over mixins is the prevention of semantic information. For example, if you think what a possible CSS class name for successMessageStyle.className could look like, you might expect it to be message success. This maps very nicely to the composition on line (1) and therefore is easy to generate by VirtualCSS when running in non-optimized mode.

@Maxim-Filimonov, I would love to know if this answers your question and what you think about this :)

Maxim-Filimonov commented 9 years ago

Yeah I got this part, sorry I wasn't clear enough. My worry is about the fact that it becomes too hard to use existing libraries like http://bourbon.io to style your components. I was thinking of something like that

var vss = require('virtual-css');
var article = {
  border: '1px solid #ccc'
}
var mixins = vss.external('bourbon_mixins.sass');
// returns the same as vss.composer
gradient = mixins.lineGradient('to top, red, orange')
// Make an article with gradient
var gradientArticle = gradient(article);

jviereck commented 9 years ago

My worry is about the fact that it becomes too hard to use existing libraries like http://bourbon.io to style your components.

I see your point and I am happy you bring up you worries about compatibilities with existing other style libraries.

In this case it is important to note, that the goals of VirtualCSS and a few existing CSS libraries/tool chains are different. In particular, I want that by using style definitions via the VirtualCSS system the style code base can scale for large apps. This is not the case for CSS and many of the CSS tools. As the constraints are different, this implies that a few of the techniquies/methods of existing CSS tools cannot be used in VirtualCSS and I am willing to make the trade off here to rather not support an existing CSS tool 100% over giving up on the goals of VirtualCSS. That said, I hope it is still possible to express most of what you can do with for example SASS using VirtualCSS in the end.

@Maxim-Filimonov, does that makes sense to you? If it does, please close the issue and otherwise feel free to ask again :) Thanks!

alexlande commented 9 years ago

Re: radium-bootstrap, that's sort of an abandoned POC. That said-- we don't mix Radium with CSS, and don't have any way to integrate Radium directly with CSS in the way that's being suggested here. Since we only use inline styles, we do it all compositionally. Things like grid columns are their own components, and global shared styles (like mixins) are merged into component style objects.

Interesting ideas though!

P.S. I am a firm believer that there's no such thing as a "non-semantic" class name :) There's some great reading on the subject if anyone's curious: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

VirtualCSS / planning

Mixins with existing css frameworks #6