3 ms·

The unfortunate issue with components is that they're kind of like wysiwygs or bootstraps. They save a small amount of trouble in the beginning, but always bit

The unfortunate issue with components is that they're kind of like wysiwygs or bootstraps. They save a small amount of trouble in the beginning, but always bite you in the end. That being said, if it's all in a single file, you can copy and paste that file into your project and then modify the thing, unless the single file is itself a bundle. At my last company we tried to make a button component. But then we wanted to be able to change url with it. But then if you ctrl-click, it should open in a new tab. And then there were certain styles of button, with mixed and matched shapes. Nowadays, I see components as single use, or specific to a project. And for anything that's more about a visual than a function (ie buttons), just use css classes and implement the underlying Elements from scratch. Point being, everyone wishes they could model the perfect abstraction of a component, but then you start adding config to make it do everything until it's basically its own miniature programming language (with worse docs).

potta_coffee 7y ago
I've encountered this issue a lot. Really, a button is a very fine-grained bit of functionality to write a component for, in my opinion. A component is just the wrong level of abstraction for a button. For me, it's worked to make a component when I have a grouping of elements that I will re-use together. For instance, I wouldn't make a component for a form field, but I would make a component for an entire form, if I would use that form again.
bigmanwalter 7y ago
I like the cut of your jib! I recently inherited a project with nested components and inheritance and all these insane levels of abstraction and it's impossible know what's going on anywhere. The crazy part is that all this abstraction is hiding incredibly simple HTML underneath it all, and the components are rarely used in more than one place. Anytime I need to do some real work on this project, it's easier to just replace the call site of the component with the final HTML output, and move any required logic to the top level. Turns out that across the multiple call sites, the final HTML output isn't really the same and this forgoes all the messy conditional logic and awkward data massaging that the original developer included. As far as buttons go, the easiest is to just use <a href="#" class="button">Click Here</a> and <a href="#" class="button button-primary">Click Here</a> everywhere. Look at that, turns out CSS is a component framework already ;)

potta_coffee 7y ago

I've encountered this issue a lot. Really, a button is a very fine-grained bit of functionality to write a component for, in my opinion. A component is just the wrong level of abstraction for a button. For me, it's worked to make a component when I have a grouping of elements that I will re-use together. For instance, I wouldn't make a component for a form field, but I would make a component for an entire form, if I would use that form again.

bigmanwalter 7y ago

I like the cut of your jib! I recently inherited a project with nested components and inheritance and all these insane levels of abstraction and it's impossible know what's going on anywhere. The crazy part is that all this abstraction is hiding incredibly simple HTML underneath it all, and the components are rarely used in more than one place. Anytime I need to do some real work on this project, it's easier to just replace the call site of the component with the final HTML output, and move any required logic to the top level. Turns out that across the multiple call sites, the final HTML output isn't really the same and this forgoes all the messy conditional logic and awkward data massaging that the original developer included. As far as buttons go, the easiest is to just use <a href="#" class="button">Click Here</a> and <a href="#" class="button button-primary">Click Here</a> everywhere. Look at that, turns out CSS is a component framework already ;)