Changing RTL styling guidelines

Problem/Motivation

The current CSS guidelines for Drupal 8 [#1887862] requires adding inline /* LTR */ comments that make the code difficult to read, and requires redefining LTR rules when writing RTL code.

[example.css]

.example-rule {
  float: left; /* LTR */
  margin-left: 1.5rem; /* LTR */
  padding: 0 4px;
  padding: 0 0.25rem;
}
[dir="rtl"] .example-rule {
  float: right;
  margin-right: 1.5rem;
  margin-left: 0;
}

Proposed resolution

For each class, start with general rules, and if a rule behaves different according to direction, add the rule in both LTR and RTL.
That would make the code very clear and easy to read with fewer bugs when fixing RTL issues.

[example.css]

.example-rule {
  padding: 0 4px;
  padding: 0 0.25rem;
}

[dir="ltr"] .example-rule {
  float: left;
  margin-left: 1.5rem;
}

[dir="rtl"] .example-rule {
  float: right;
  margin-right: 1.5rem;
}