css style guide

It depends on your personal preferences, but typically it's best to group them thematically, and make sure that if properties influence each other, you have them in correct order, i.e. if you want to reset the margins, and then set only the bottom one:

margin:0; margin-bottom:10px;

Other than that, whatever works for you. It won't matter to browser, as you will probably minify the CSS files for production.

Certainly a topic which probably doesn't have a consensus. My preference is to try to group them thematically, like Vedran Brnjetić and your second example. I also tend to write them outside-in using the box model, so addressing margins before borders before padding before content.

In your example, the second version is probably what I'd go with. Alphabetically might sometimes make it easier to find specific properties, but I think I would find it annoying to maintain. Then again, I'm a person who needs to sing the alphabet song in my head to figure out which letters come first sometimes. :P

I also tend to include a liberal amount of whitespace in my CSS, because I find it easier to read. That's obviously a personal preference, and many people like more compact code. I figure you can always minify it when deploying live anyway.

.overlay {
  width: 100%
  height: 100%

  display: flex;

  align-items: center;
  flex-direction: column;
  justify-content: center;

  background-color: rgba(0, 0, 0, 0.5);
}