The grammar of a property refers to the syntax for a value of said property in a CSS declaration. Most properties take a single value, but some properties take multiple values in set orders, for example box-shadow and background-repeat, as well as shorthand properties. This grammar is usually seen directly in the "Value:" line but may be elaborated in the prose, for example if the property takes a comma-separated list of such complex values.

For example, the grammar of the level 3 background shorthand is defined as zero or more <bg-layer>s followed by one <final-bg-layer>, where

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

The two <box> values are described as follows:

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.

And the || delimiters between each component mean that one or more of those components can occur and in any order. In the case of background, notice that background-position and background-size do not have a || between them; this means the two properties need to appear together (and for background-size to be specified, background-position must be included).

For example, the following two declarations are valid and equivalent:

background: url(see-through.png) center / 100% no-repeat fixed padding-box red;
background: red url(see-through.png) fixed padding-box no-repeat center / 100%;

No specification appears to define the term "canonical order", but CSSOM makes a number of references to it in the context of serialization. For instance, in section 5.4.3 it says:

The specified order for declarations is the same as specified, but with shorthand properties expanded into their longhand properties, in canonical order.

The values of these longhands are serialized for the purposes of getPropertyValue(), setProperty(), setPropertyValue() and setPropertyPriority(), all of which refer to the "canonical order" as well.

Not every property has a canonical order, since as mentioned above most properties take only a single value anyway; the "Canonical order:" line is present in the lone propdef table in css-module-bikeshed simply because it's a template. Furthermore, CSSOM seems to imply that only shorthand properties have a canonical order.

Based on my understanding of the relevant specifications, when the canonical order of a shorthand property is defined as the grammar of that value, it simply means that its longhands should be serialized in the order that is defined by the grammar. So the above two shorthand declarations should be serialized in the exact same order as the following set of longhand declarations:

background-image: url(see-through.png);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: padding-box;
background-color: red;

(On an interesting note, the shorthand-to-longhand mapping examples given in the Backgrounds module do not appear to follow this order.)

Suppose we have a mathematical object. There can be many ways of representing an object that are equivalent to this object for the purposes of solving some problem.

Rather than solve a given problem for all possible objects, we often only need to solve the problem for one representative from each equivalence class. Representatives from these equivalence classes can be called canonical; and it is sufficient to solve the problem only for canonical representatives.

We usually choose canonical representatives that are easy for us to work with.

For example, for graphs

We might even allow equivalence classes to have more than one canonical representative. Solving the problem for all canonical representatives nevertheless still amounts to solving the problem for all objects.

As another example, consider Latin squares

However, in the Latin square case, there are usually many ways to permute the rows and columns (and symbols) to get the first row and first column in order. So there would be many reduced (or canonical) representatives from each equivalence class.

When this word is used by programmers, it is a synonym for "authoritative," "standard," or "official." That's meaning number 3 in the definition you quote.

It implies that there is one best, most official, most standard way to represent the string object and this is it.

For example sometimes things can be represented using a relative link or an absolute link. Relative might be something like ../foo.txt meaning "The file foo.txt in the folder above this one" while absolute is something like \\www.example.com\fileserver\share\foo.txt which can only refer to one file on the Internet. One might say that the latter name is canonical.

First, about documentation. This is very confusing documentation.

OrderedQ says

By default, OrderedQ uses canonical order as described in the notes for Sort.

then going to Sort one sees this

Sort[list,p] applies the ordering function p to pairs of elements in list to determine whether they are in order. The default function p is Order.

Notice that the default is Order. Then going to Order it says

Order uses canonical order as described in the notes for Sort.

It is a circle, where one page sends to another to another and we end up we were started.

But the issue is due to not using numerical input. If you do this

x=1/6 (3-Sqrt[5]);  (* 0.127322 *)
y=2/3;   (* 0.666667 *)
OrderedQ[{x,y}]

But now if we do this

x=1/6 (3.-Sqrt[5]);
y=2/3;
OrderedQ[{x,y}]

And this now matches Less,

Less[x,y]

OrderedQ does not use numerical method to check ordering unless input is numerical. When it is exact, it works as it says in Possible issues

OrderedQ by default works structurally, not by numerical value:

To make it give same value as Less without making it numerical, do

x=1/6 (3-Sqrt[5])
y=2/3;
OrderedQ[{x,y},Less]

So the way you used it, the ordering was not based on numerical value of input. Agree, that this is a bit confusing function to use.