Ordering in Vendor Based CSS3 VS Standard CSS3 Syntax

Why standard rule must be at last?

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:

.not-a-square {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Why is this method of ordering properties so commonly taught? Here is what it would look like "the wrong way":

.not-a-square {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Even doing it "the wrong way", won't the border radius be the same no matter what, forever? A quick investigation might lead you to conclude that it will, and this ordering of properties is rather nonsense.

The Long Long Ago: None of the properties are supported, order doesn't matter.
The Past: Only vendor prefixes are supported, order doesn't matter.
The Now: Both vendor prefixes and actual property are supported. If prefix is last, it will override actual property, but both are the same anyway.
The Future: Only actual property is supported, order doesn't matter.

More about

Why do browsers create vendor prefixes for CSS properties?

It's because the features were implemented by vendors before the specification reached its final release stage.

The vendor prefixes ensure that there are no clashes with changing functionality etc.

Originally, the point of vendor prefixes was to allow browser makers
to start supporting experimental CSS declarations.

Let’s say a W3C working group is discussing a grid declaration (which,
incidentally, wouldn’t be such a bad idea). Let’s furthermore say that
some people create a draft specification, but others disagree with
some of the details. As we know, this process may take ages.

Let’s furthermore say that Microsoft as an experiment decides to
implement the proposed grid. At this point in time, Microsoft cannot
be certain that the specification will not change. Therefore, instead
of adding grid to its CSS, it adds -ms-grid.

The vendor prefix kind of says “this is the Microsoft interpretation
of an ongoing proposal.” Thus, if the final definition of grid is
different, Microsoft can add a new CSS property grid without breaking
pages that depend on -ms-grid

Source.

Why put the non prefixed css3 property last?

With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.

In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.

How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

I would recommend you to use an online (or natively) tool that will automagically add the css prefixes for all browsers.

http://pleeease.io/play/
https://autoprefixer.github.io/

If you are using a build system like gulp or grunt, they have plugins that can automatically do this for you.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

How do I apply CSS rules on Laravel 8's mail template?

Probably the data is escaped. You can see that the mail message blade has this

{{-- Body --}}
{{ $slot }}

Explanation from doc:
By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:

Hello, {!! $name !!}

Read more
https://laravel.com/docs/8.x/blade#displaying-unescaped-data