CSS styling

[emidoots]

trafficstars

We might want something like an alternative to SCSS that integrates more tightly with components.

This is a particularly interesting article/lib in relation to React: https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.pkqx0ht46

[influx6]

This is something am definitely interested in seeing, I would prefer a library not heavily depending on inline CSS as much but integrate with custom CSS parsers and uses style tags better. It's actually faster and performance because your browser only deals with set of changes once rather than on every property change of an inline style. Else jam pack style attribute, but seems rather too dirty to me, since the tag looks overflowed with css

[dmitshur]

I'm also interested. I'm playing/experimenting with something like this at https://github.com/shurcooL/play/tree/master/175. It's still in very early stages, nothing finished to see there yet.

[influx6]

Wow. @shurcooL, that's some brilliant idea you have there, will take a look deeper, and might spin off a new library based on the ideas in that. Really like that.

[influx6]

I think one of the coolest thing we can do to reduce the life's of users of Vecty and any other UI library is to look more into add solvers like cassowary into the mix, these allows using linear algebra to solve the space and position issues of relative elements, their arrangements etc. The only thing stopping me from investing in a full blown css framework for Go, is in trying to understand how to write a Cassowary constraint solver.

Technical Document Here

Read the technical documents but was left with a lesser idea on the process, guess I am not one of grasping to much words and rather a show me something similar in coding process type of guy :(

If any one has experience with writing constraint solvers, would glady appreciate the help and if possible work together on writing something for vecty, my own UI library and in general for Go.

[emidoots]

@influx6 I looked into the constraint solver's you are talking about. It could just be that I don't understand them entirely, but I'm generally leery of deviating too much away from CSS. Did I misunderstand your idea, though? I'm not sure.

I do think there are nice ways we could integrate CSS with components though (like e.g. CSS modules, for example, so that separate components cannot have styles collide by accident).

[influx6]

No not at all, the CSS solver was meant to provide the ability express elements side as relative constraints to each other which gets computed when the layout changes and produce appropriate cad values for the width, height, margins and padding or any numerical property you wish, as per modules yes, creating something modular would make sense overall

[joeblew99]

There are some good solid CSS parses here: https://github.com/tdewolff/minify

Might be useful, not what path the architecture design for handling CSS takes.

[pyrossh]

Will this help in implementing a CSS parser https://github.com/facebook/css-layout and there is this one also https://github.com/aymerick/douceur

[emidoots]

Useful if we start generating css files:

https://www.reddit.com/r/golang/comments/7bu558/minify_fast_minifier_for_html_css_js_json_svg_xml/?st=j9thajil&sh=b51d18b9

[emidoots]

Worth noting that one thing we could do here is actually generate the CSS file inside Go, and just directly write it to the DOM:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

Tradeoffs here for sure, but could be an interesting / useful approach to keeping styles next to components without introducing a secondary compiler next to gopherjs etc.

[dmitshur]

I’ve used such a technique to make one of my HTML components (that needed a style sheet for :hover properties) completely standalone. There are definitely tradeoffs, but it has served me wonderfully so far.