How to handle nesting with grid css

[simonlayfield]

Hey!

So I've been using rcss lately and really enjoying it. I find it really whittles my markup down to a more pure, readable structure.

That being said I've hit a bit of a speed bump with the way I would normally integrate layout (grid and flex) behaviour because when used within components theres often the need for an extra level of nesting in order to account for it, so what would ordinarily be direct descendants are now nested another one or two levels deep.

Take for example a form that consists of multiple steps, each step displayed within a nested component. Step 1 might look like this:

It kind of presents the issue whereby the nested element defines the layout of the elements of the parent.

    <form action="..." class="ui-form">

      {{#if step1}}

        <div class="ui-panel -split">

          <fieldset class="formsection">
            <input type="text" name="firstname" class="field">
            <input type="text" name="lastname" class="field">
            <input type="text" name="username" class="field">
          </fieldset>

          <div class="formsection">
            <img src="images/avatar.png" class="image -profile">
            <input type="file" name="avatar" value="" class="field">
          </div>

        </div>

        <div class="_right">
          <button class="ui-button -step">Next</button>
        </div>

      {{/if}}

      {{#if step2}}

        <div class="ui-panel">
          <fieldset class="formsection">
            <textarea type="text" class="field -multiline"></textarea>
          </fieldset>
          <button type="submit" class="ui-button -submit" value="Submit">Submit</button>
        </div>

      {{/if}}

    </form>

    <style>

      .ui-panel {
        background: #999;
        border-radius: 8px;
      }

      .ui-panel.-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      /*
        In order for styling to be consistent across all forms this would
        have to be the rule because formsection is not a direct decendant
        of ui-form in this case
      */
      .ui-form .formsection {
        /* This is against the rules, right? */
      }

      .formsection > .field {
        /* This is fine */
      }

    </style>

There's probably a better way to do this that avoids this problem but in trying to adapt my past approach to this kind of pattern I wasn't quite sure what a robust solution might be that is within the conventions of rcss.

[paulcsmith]

Just chiming in that I've used rscss with flexbox and run into exactly this. I haven't come up with a good solution quite yet. Right now I just add intermediate wrapper classes or do something like .ui-panel > div > .field or I make another smaller component for handling forms like form-field-wrapper or something. I'm not sure it is the best approach. If anyone else has ideas I'd love to hear it!