resource / Front-End-Standards

Front-end development standards for Resource.
MIT License
23 stars 1 forks source link

Needs line breaks #63

Closed nicetransition closed 11 years ago

nicetransition commented 11 years ago

https://github.com/LukeAskew/Front-End-Standards/blob/master/Stylesheets/Sass.md#the-inception-rule "Page Context" is missing line breaks around curly brackets

apartyka commented 11 years ago

@kevinmack18 fixed on development branch https://github.com/LukeAskew/Front-End-Standards/blob/development/Stylesheets/Sass.md#Inception

Question: is it good how I have it, or, do we want to have line-breaks for rules regardless of whether a property is defined?

For example:

.cart {

   .sidebar { 
        width: 150px; 
    }
    .content { 
        width: 850px; 
    }
}
nicetransition commented 11 years ago

For consistency sake, I'd recommend that it's always has a line break. When there are too many cases it just makes it complicated and hard to remember.

adamweis commented 11 years ago

The example above looks unnecessarily spaced out. For me, the indentation is enough visual separation.

Does everyone normally include that much space when writing Sass?

If so, should this example be updated to match this type of formatting.

.special-widget {
    background-color: blue;
    .super-special { 
        background-color: red;  
        a {
            border: 2px solid yellow;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
nicetransition commented 11 years ago

I agree with @adamweis

// bad -- to spacey
.special-widget {
    background-color: blue;

    .super-special { 
        background-color: red;  

        a {
            border: 2px solid yellow;

            &:hover {
                text-decoration: underline;
            }

        }

    }

}
// good
.special-widget {
    background-color: blue;
    .super-special { 
        background-color: red;  
        a {
            border: 2px solid yellow;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
apartyka commented 11 years ago

Agreed. To recap, I will fix the line-breaks section I have to be consistent with @kevinmack18 's //good example from above.

// good
.special-widget {
    background-color: blue;
    .super-special { 
        background-color: red;  
        a {
            border: 2px solid yellow;
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
.next-widget {
  //stuff
}
apartyka commented 11 years ago

fixed on development branch https://github.com/LukeAskew/Front-End-Standards/blob/development/Stylesheets/Sass.md#Line%20Breaks

nicetransition commented 11 years ago

The first "good" example does not have consistent spacing:

// Good 
.module {
  color: black;
  width: 100%;
    .shrim {
        color: green;
        font-size: 16px;
    }
    .spaghett {
        color: red;
        font-size: 12px;
    }
}
apartyka commented 11 years ago

fixed in issue #62 on master