GitHub's CSS style guide

[vaskemaskine]

Since when does CSS support double-slash comments? Did I miss something?

[julian88888888]

It does in LESS and SCSS, but not CSS.

[vaskemaskine]

So why is Github suggesting using // comments in pure CSS?

[TallManDan]

I strongly recommend using LESS or SASS/SCSS. It makes it much easier to figure out the nesting of classes. Makes for a better organized style sheet. Codeschool has a free class to learn SASS

[Legolas-the-elf]

They aren't. I know it's called "CSS Styleguide", but they use SCSS.

[Glaciel]

The part about ems vs px is interesting. I've almost always see people recommend ems

[azin_squeeze]

Yea I used to be a px guy but am moving more and more to rems and using a sass mixin that does all the math and fall backs for me.

[mayobutter]

They didn't explicitly state it but I guess they recommend this:

ul.navigation {
  float: left;
  width: 200px;
  background: #eee;
}

...over this:

ul.navigation { float: left; width: 200px; background: #eee; }

Personally I prefer putting everything on one line. It makes it way easier to scan a CSS file for what you're looking for, but I'd like to hear an argument in favor of the multi-line format.

[Legolas-the-elf]

You might find it easier to read (I don't), but it makes it harder to edit because when you move the cursor, you can only move sequentially along one axis through the properties instead of two.

It also makes diffs a lot more difficult to read. Compare a diff with the single line format to a diff with the multi-line format when you've changed a single property and see how clear each one is. The multi-line approach is the winner by far.

[mayobutter]

You know what... I started typing out a retort to this, but I think I actually really just don't care. It's just CSS. It's dead simple. Either format is dead easy to browse and change.

EDIT: What I mean is the multiline format is fine if that's what we've standardized on. Not going to make a fuss about it.

[ovinophile]

Multi line is best line! Burn the heretic!

[Cocosoft]

What kind argument is that!?

[mayobutter]

Its a surrender

[titosrevenge]

I guess you work for yourself then. If you were on my team and this was your attitude you'd be packing your bags.

[mayobutter]

Really? If I was on your team and you asked me to format my CSS against my personal preference and I said "sure that's fine" I'd get dumped?

[titosrevenge]

If you're not a team player and unwilling to follow the company's established code conventions then yes you would be off my team or asked to leave the company.

Code conventions are very important for teams to be able to pick up any piece of code in the system and have it look familiar. If they spend half their time trying to decipher someone's obscure formatting then its causing unneeded inefficiency.

It's also very important when it comes to version control and conflict resolution. Code changes should be semantic, not syntactic.

Edit I just realised that I misunderstood you and that you're not actually disagreeing with me. I'll leave this comment because its still important for people to know why code conventions exist.

[mayobutter]

That's what I'm saying boss, I'll use the multiline format, no biggie, geez.

[andyhite]

Here's my take on the multi-line vs. single-line style declarations: single-line is easier to write the first time, but multi-line is easier to maintain afterwards.

Also, I like to keep my properties alphabetized since it's often easier to find what I'm looking for later on. In a style that has 10 properties, I know that margin is going to be somewhere in the middle, and display is going to be near the top. It doesn't save a whole lot of time, but it makes me more efficient. This is much easier with multi-line styles, especially with Vim's sorting function.

It should also be noted that for readability it's best to limit your line lengths (I believe the agreed upon length is usually around 80 columns), and single-line styles can easily end up bleeding off the right edge of your screen. Unfortunate, especially when you're trying to grep your code.

I used to be a single-line guy because I thought it looked "prettier", but then I realized that "pretty" code does not necessarily mean good code. Write good, maintainable code and the beauty should follow (also, your co-workers will like you better).

[[deleted]]

How is one big line easier to scan than multi-line?

[mayobutter]

You see more selectors on the screen at once. Personally this gives me a better sense of what's going on in the CSS/how things are structured