Menu icon Foundation
Repeated rules with same values.

In foundation.css, I noticed that the following block of code is repeated as is outside and inside all media queries, specifically in lines: 158, 277, 509, 851, 1083, 1315:

.columns,
.columns {
    position:relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    float: left;}
            

         

Why isn't it only added outside of all media queries since it contains exactly the same values?

As it currently is, the browser loads this rules at least twice, with one overridden.

Let me know if I am missing anything please.

I haven't checked of other rules are repeated that way as well.

Thanks.

performancerepeatedcss

In foundation.css, I noticed that the following block of code is repeated as is outside and inside all media queries, specifically in lines: 158, 277, 509, 851, 1083, 1315:

.columns,
.columns {
    position:relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    float: left;}
            

         

Why isn't it only added outside of all media queries since it contains exactly the same values?

As it currently is, the browser loads this rules at least twice, with one overridden.

Let me know if I am missing anything please.

I haven't checked of other rules are repeated that way as well.

Thanks.

Ghaida Zahran over 5 years ago

This is a facet of how we built the grid-column() mixin. This allows you to use different options in any media query, by writing simple functions to generate those classes. The repeated rules are not such a big detriment to performance to require us to build the mixin in a less efficient way.

Ziad Rahhal over 5 years ago

Yes I thought it had to be there for a purpose. Thanks.