4 ms·

Interesting project and it's nice to see work done on something compact and minimalist. But I don't like that CSS classes are used to bind data. I know other l

Interesting project and it's nice to see work done on something compact and minimalist. But I don't like that CSS classes are used to bind data. I know other libraries do this too but I don't think it's a good idea. CSS classes exist for styling purposes. It's hard enough as it is to keep track of classes, where they're used, how they're used etc... on anything but the most trivial project. Using CSS classes for both style and data binding would result in a maintenance nightmare, IMO. Why not use something like: <div class="some-style" data-binding="product-name"> It's perfectly legit HTML and maintains separation of concerns.

daliwali 11y ago
someone posted a similar criticism on reddit: https://www.reddit.com/r/javascript/comments/3tqw5l/simulacrajs_oneway_data_binding_for_web/cx8gz2g https://www.reddit.com/r/javascript/comments/3tqw5l/simulacr... it may have been a poor choice to use class names in the example, but I just wanted to demonstrate that the library is not coupled to a certain way of selecting dom nodes. it's entirely possible to use $('[data-binding="my-thing"]'), but not necessary at all.
gravity13 11y ago
I've gone back and forth on this with a previous coworker before. My opinion on it now is: there's two common general ways to use css. One way is as a style class, which is something you'd apply in multiple places around your project (like `.error` setting font colors to red, for example). The other way is to markup specific content so that you can apply specific styles to it - for instance, pixel pushing a header to fit exactly where you think it should in this one instance (perhaps to align an upvote button with a username, or something). The latter way really seems to just markup dom nodes purely for the sake of identifying them within their structure (I might use BEM or rscss especially for these). The way I structure my css in projects follows from this - I extract common styles and pepper them throughout my app where needed (but they are never referenced in any js/$ selectors). These are intended to cascade. And then I will scope my more specific css under a selector (using sass, or cssnext or whatever) to avoid polluting the global scope: .some-view { .header { ... } .note { ... } .icon { ... } } In the case of these nested selectors, they are more identifying tags for the content of the node, than they are declarations of a specific style. These are not intended to cascade. So even though css classes "exist for styling purposes" I think they have two paradigms for use. One for marking up content for a general application of a style and another for marking a node to be given special treatment. And taking that approach, I argue it's fair to use the same selectors for js as well as css. Besides, in practice, you're going to realize you're just adding the same class name appended with `js-` everywhere `<div class='error error-box js-error-box'></div>` when you're using that `error-box` really only to mark the node for use. Though I'd be curious to hear more about why you think this: >Using CSS classes for both style and data binding would result in a maintenance nightmare, IMO.
- nilliams 11y ago
  If you always use something like 'data-bind' for binding and keep classes solely for CSS it's easier to maintain simply because you know 'what classes you can delete' without having to look in two places (CSS and JS) to see what will be affected as a result.

daliwali 11y ago

someone posted a similar criticism on reddit: https://www.reddit.com/r/javascript/comments/3tqw5l/simulacrajs_oneway_data_binding_for_web/cx8gz2g https://www.reddit.com/r/javascript/comments/3tqw5l/simulacr... it may have been a poor choice to use class names in the example, but I just wanted to demonstrate that the library is not coupled to a certain way of selecting dom nodes. it's entirely possible to use $('[data-binding="my-thing"]'), but not necessary at all.

gravity13 11y ago

I've gone back and forth on this with a previous coworker before. My opinion on it now is: there's two common general ways to use css. One way is as a style class, which is something you'd apply in multiple places around your project (like `.error` setting font colors to red, for example). The other way is to markup specific content so that you can apply specific styles to it - for instance, pixel pushing a header to fit exactly where you think it should in this one instance (perhaps to align an upvote button with a username, or something). The latter way really seems to just markup dom nodes purely for the sake of identifying them within their structure (I might use BEM or rscss especially for these). The way I structure my css in projects follows from this - I extract common styles and pepper them throughout my app where needed (but they are never referenced in any js/$ selectors). These are intended to cascade. And then I will scope my more specific css under a selector (using sass, or cssnext or whatever) to avoid polluting the global scope: .some-view { .header { ... } .note { ... } .icon { ... } } In the case of these nested selectors, they are more identifying tags for the content of the node, than they are declarations of a specific style. These are not intended to cascade. So even though css classes "exist for styling purposes" I think they have two paradigms for use. One for marking up content for a general application of a style and another for marking a node to be given special treatment. And taking that approach, I argue it's fair to use the same selectors for js as well as css. Besides, in practice, you're going to realize you're just adding the same class name appended with `js-` everywhere `<div class='error error-box js-error-box'></div>` when you're using that `error-box` really only to mark the node for use. Though I'd be curious to hear more about why you think this: >Using CSS classes for both style and data binding would result in a maintenance nightmare, IMO.

nilliams 11y ago
If you always use something like 'data-bind' for binding and keep classes solely for CSS it's easier to maintain simply because you know 'what classes you can delete' without having to look in two places (CSS and JS) to see what will be affected as a result.