4
\$\begingroup\$

Im using Foundation by Zurb as a front-end framework. Below is the SCSS used to generate the basic layout of the homepage using the Semantic Grid Mixins Foundation supplies (http://foundation.zurb.com/docs/sass-mixins.php).

The problem I am having is that it is creating massive selectors when I view them in the inspector in Chrome.

body.homepage div[role="main"] {

  header {
    @include outerRow();
    margin-bottom: 60px!important;
    h1 { @include column(12); }
  }


  & > section {
    margin-bottom: 120px!important;
  }


  .hero_container {
    @include outerRow();

    .video_holder {
      @include column(5);
      @include mobileColumn(4);
    }
    form {
      @include column(7);
      @include mobileColumn(4);

      legend {  }

      .personal_details {
        @include innerRow();

        label {
          @include column(6);
        }
      }

      .form_actions {
        @include innerRow();

        label { @include column(6); }
        .input_action { @include column(6); }

      }

    }
  }

  .reasons {
    @include outerRow();

    ul {
      list-style: none;

      li {
        @include column(4);
        @include mobileColumn(2);
        margin-bottom: $halfColumnGutter;

        p {
          padding: 12px;
          border: 1px solid #eee;
          background: #efefef;
        }
      }
    }
  }

  .testimonials {
    @include outerRow();

    h4 { @include column(12); }

    ul {
      list-style: none;

      blockquote { @include column(3); @include mobileColumn(2); border-left: none; }
      p {
        padding: 12px;
        border: 1px solid #eee;
        background: #efefef;
      }
    }

  }

  .register {
    @include outerRow();

    form {
      @include column(12);
      .personal_details {
        @include innerRow();
        margin-bottom: $halfColumnGutter;

        label {
          @include column(4);
        }
      }
      .extra_info {
        @include innerRow();
        margin-bottom: $halfColumnGutter;

        label {
          @include column(4);
        }
      }
      .form_actions {
        @include innerRow();

        label { @include column(4); }
        .input_action { @include offsetBy(4); @include column(2); }
      }
    }
  }
}
body.homepage.mobile div[role="main"] {

  .hero_container {

    form { margin-top: $halfColumnGutter; }
  }
}

Below is the output from the Chrome inspector when viewing the label in .personal_details

.top_bar .information_for_agencies, .top_bar .registration, header[role="banner"] .branding, header[role="banner"] .branding .logo, header[role="banner"] .branding .tagline, header[role="banner"] div[role="navigation"], footer[role="contentinfo"] section, body.full_width div[role="main"] article[role="article"], body.full_width div[role="main"] article[role="article"] header img.top_masthead, body.full_width div[role="main"] article[role="article"] div.content img.top_left, body.full_width div[role="main"] article[role="article"] div.content img.top_right, body.full_width div[role="main"] article[role="article"] div.content figure.left_align, body.full_width div[role="main"] article[role="article"] div.content figure.right_align, body.full_width div[role="main"] article[role="article"] div.content figure.full_width, body.full_width div[role="main"] article[role="article"] footer img.bottom_masthead, body.two_columns div[role="main"] article[role="article"], body.two_columns div[role="main"] article[role="article"] header img.top_masthead, body.two_columns div[role="main"] article[role="article"] div.content img.top_left, body.two_columns div[role="main"] article[role="article"] div.content img.top_right, body.two_columns div[role="main"] article[role="article"] div.content figure.left_align, body.two_columns div[role="main"] article[role="article"] div.content figure.right_align, body.two_columns div[role="main"] article[role="article"] div.content figure.full_width, body.two_columns div[role="main"] article[role="article"] footer img.bottom_masthead, body.two_columns div[role="main"] aside[role="complementary"], body.three_columns div[role="main"] section.adverts, body.three_columns div[role="main"] article[role="article"], body.three_columns div[role="main"] article[role="article"] header img.top_masthead, body.three_columns div[role="main"] article[role="article"] div.content img.top_left, body.three_columns div[role="main"] article[role="article"] div.content img.top_right, body.three_columns div[role="main"] article[role="article"] div.content figure.left_align, body.three_columns div[role="main"] article[role="article"] div.content figure.right_align, body.three_columns div[role="main"] article[role="article"] div.content figure.full_width, body.three_columns div[role="main"] article[role="article"] footer img.bottom_masthead, body.three_columns div[role="main"] aside[role="complementary"], body.homepage div[role="main"] header h1, body.homepage div[role="main"] .hero_container .video_holder, body.homepage div[role="main"] .hero_container form, body.homepage div[role="main"] .hero_container form .personal_details label, body.homepage div[role="main"] .hero_container form .form_actions label, body.homepage div[role="main"] .hero_container form .form_actions .input_action, body.homepage div[role="main"] .reasons ul li, body.homepage div[role="main"] .testimonials h4, body.homepage div[role="main"] .testimonials ul blockquote, body.homepage div[role="main"] .register form, body.homepage div[role="main"] .register form .personal_details label, body.homepage div[role="main"] .register form .extra_info label, body.homepage div[role="main"] .register form .form_actions label, body.homepage div[role="main"] .register form .form_actions .input_action 
{
position: relative;
min-height: 1px;
padding: 0 15px;
}

The guidelines for scss say not to go more than five levels deep, which I haven't. Is it something I am doing wrong? how can I write it more efficiently?

\$\endgroup\$
  • \$\begingroup\$ I suggest not selecting div[role="main"], you simply could use a class like .site-content instead. Also using body.homepage is overqualified. .homepage is enough. \$\endgroup\$ – kleinfreund Jan 27 '14 at 7:11
1
\$\begingroup\$

The CSS that was created (i.e. the position, min-height, and padding) is not anything you have specified in your SCSS. So it must be boilerplate generated by the mixins you're using, e.g. innerRow() and column(). I expect if you look at the Foundation source SCSS for those mixins you will see they'll be using @extend internally and hence generating the large selectors. Either that or there's a bug in Foundation.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.