Thoughts on buttons+hidden vs checkboxes/radios+span?

In updating an existing character sheet, I'm inclined to replace the use of transparent checkboxes/radios and spans (a practice described in CSS Wizardry) with buttons and hidden inputs. This turned out to be similar to the Swap Visible Areas practice described in CSS Wizardry.

Just going down the list of examples from CSS Wizardry (Wizardry approach above the hr, button approach below the hr) (with basic javascript event and value updates rather than "on", "getAttrs", and "setAttrs"):

Styling Checkboxes and Radio Buttons

Alternative Checkboxes

Fill Radio Buttons to the Left

Cycling Button

As I see it:

Pros:

• Don't have to worry about matching size or negative margins to overlap the clickable transparent input with the displayed span
• Easier to style the "checked" / "unchecked" inside of spans than using "::before" selector and "content" styling property
• Properly placed inside of containing element (note the proximity or overlap on the border in the containing div with 1px padding)
• Receives keyboard accessibility focus
• aligns easily with parent divs (especially with flex)
• not relying on "checked" allows the attribute to be duplicated across multiple inputs with the same name (allowing the control to appear in multiple places on the sheet)
• using classes, the hidden input can be higher in the hierarchy than the buttons (so "page" buttons don't have to be in the same container as the hidden input)
• Can use line breaks in the html

Cons:

• Uses javascript to update the attribute value
• For "radio"-like behavior, needs css styling for each potential value
• For "fill radios to the left" need a series of "greater-than" (or "less-than") classes on the element.  (I'd like to use `data-val-gt="1 2 3 4"` and selector `[data-val-gt~="3"]` but it looks like the data-val-gt gets stripped.)

I've found this very useful in my updates to a large existing sheet, and I hope others here will agree. I'm bringing it forward for discussion / consideration here before I put too much time into setting these up across the sheet for a PR.

Most of the CSS wizardry page was written before action buttons existed, and many of the examples on that page are incomplete and don't always work. So dont use them as a prescription: its a good source for ideas on how to proceed but the methods there are not necessarily the best way to proceed.

That said, your jsfiddles seem to include javascript. Are they needed to make the jsfiddle work, or are they part of your solution? You cant use ids or javascript on roll20 for page manipulation. That won't work.

Would it be acceptable for me to update the CSS Wizardry page, then? It's hard to not take it as prescriptive, especially when it's elaborated on with numerous examples using the checkbox/radio + span::before approach.

The button approach does need javascript to work. While I understand adding event handling or getting/updating the value of elements by id won't work from roll20 sheet workers, that can be done with the roll20 "on", "getAttrs", and "setAttrs" instead.  Here's an example of what I did for a series of cycling values as health boxes:

const healthTraits = ["healthbox"];
const healthAttrs = healthTraits
    .reduce((attrs, trait) => [
        ...new Array(16)
            .fill(1)
            .map((_, index) => `${trait}_${index + 1}`)
    ], []);

// Increment / cycle hidden attr on damage button click
healthAttrs.forEach(attr => {
    on(`clicked:${attr}`, () => {
        getAttrs([attr], (v) => {
            const healthValue = parseInt(v[attr]) || 0;
            setAttrs({
                [attr]: (healthValue + 1) % 4
            });
        });
    });
});

yes, javascript in sheet workers will work. I assumed you meant javascript to modify the DOM, which wont work.

Adding techniques to use action buttons to the CSS wizardry page is welcomed - you'll find there is some already. I encourage (encourage, not demand) you to simplify the code because people understand javascript even less than css generally. There's no need to do this in an example geared to newbies

healthTraits
    .reduce((attrs, trait) => [
        ...new Array(16)
            .fill(1)
            .map((_, index) => `${trait}_${index + 1}`)
    ], []);

when you can do a much shorter example like

const healthAttrs = ['healthbox_1', 'healthbox_2', 'healthbox_3'];

That foreach section could be simplified too, though I'm a bit too sleepy to make suggestions right now. The goal ought to be to demonstrate the technique while requiring as little specialised knowledge as possible.

Ultimately though, the CSS Wizardry page is just a wiki page - any roll20 user can edit it, and the community will update it if needed. 

Understood and agree regarding presenting minimal examples. That was just a quick pull from my sheet, not intended for guidance.

As a new contributor here, I just wanted to be sure this wouldn't be a red flag on a PR and I wouldn't be stepping on any toes by replacing what seems to be a notable (second-from-the-top) recommendation on the wiki page.

That's cool. No, it's not a red flag - if you have techniques to share and are willing to put in the work tp do so, we are happy to have you.

The CSS Wizardry is so highly recommended simply because there isnt such a comprehensive page of advice anywhere else: its very much of a one-of-a-kind and an invaluable resource, even if a lot of the advice and techniques there are dated and flawed. It can definitely be improved.

Finished updating the wiki! https://wiki.roll20.net/CSS_Wizardry

Also mentioned what I did in the "Talk" page to cover my bases. Let me know if there are any concerns with it.

Thanks for adding to the CSS Wizardry page Primal Zed.  I for one love to have options, so two(or more...) examples are better than one.