For better organization when using curly brackets in HTML & CSS . .

Question

I wanted to know what people, especially seasoned developers, think about this placement method when using the curly brackets in both HTML and CSS. This is what a college professor of my taught us students how to write our code because it makes "easier" to interpret with the human eye and supposedly there is less chance of making an indentation error. I know it is all personal preference, but i'm curious about what others think or maybe they'll end up using this placement method instead? Please leave your comments below! :)

This is how Treehouse and many other sources teach how to place curly brackets..

@media screen and (min-width: 480px) { /* placing the opening bracket at the end of the element declaration */
  a {
    text-decoration: none;
  }

  #wrapper {
    max-width: 940px;
    margin: 0 auto;
  }

  #logo {
    text-align: center;
    margin: 0;
  }
}

My college professor's method...

@media screen and (min-width: 480px)
{ /* placing the opening bracket a line below the element declaration */

  a
  { /* the opening curly bracket is ALWAYS below the element.. */
    text-decoration: none;
  }

  #wrapper
  {
    max-width: 940px;
    margin: 0 auto;
  }

  #logo
  {
    text-align: center;
    margin: 0;
  }
}

Though these lines of code will do exactly the same style application to an HTML page, the brackets are positioned differently in both examples. The bottom example uses more rows due to the curly bracket being positioned below the element declaration but I feel it is easier to read the bottom code because the opening bracket is placed right below the element instead of looking for it at the very end of the line.

Personally I have adapted to this method and like it overall. When I see the normal method that most people use and teach it can confuse me a bit at first.

Anyways, I just wanted to share this on the forum. Thanks for reading! :)

Answer 1 · 2015-12-17T00:13:12Z

December 17, 2015 12:13am

In my personal opinion, I find your professor's CSS styling hard to read, and I certainly don't think it's the norm. That being said, I'd be careful of straying too far from normal coding conventions. These style standards and conventions exist for a reason, mainly for consistency and readability.

If everyone styled their code differently it would be very difficult to jump into someone else's code to add to it, make changes or debug. Keeping things consistent makes it easier for everyone. Just think if you were working on a project with someone who used a different styling than you did. How difficult would that be for you both to have to read each others code? Would it slow the project down? And if all that code was being used on the same project, the end result could be very messy, difficult to read, and very unpleasant for the next person who has to touch that code. This is why you see many companies using a Style Guide so that their code remains consistent within their organization.

I'd say stick with what the industry standard is, it'll make everyones lives easier. :)

Here's a few resources on style guides...

https://google.github.io/styleguide/htmlcssguide.xml

http://www.w3schools.com/html/html5_syntax.asp

http://codeguide.co/

http://ianfeather.co.uk/a-maintainable-style-guide/

https://github.com/styleguide