<p dir="auto">I'm looking into customizing an installation of Bootstrap 2 for my color scheme, and the names are virtually worthless. My scheme is light-on-dark, and the default text color variable name is "gray". I can set this to white and it will work, but it's completely counter-intuitive.</p>
<p dir="auto">Variable names shouldn't be names of colors, unless you're defining those colors. For example, defining your particular shade of gray in "gray" so you can use it is fine, but then doing "color: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gray/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gray">@gray</a>" is bad design.</p>
<p dir="auto">I understand that it's rather a big change, but it would be much better if it were something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@gray: #333;
@textColor: @gray;

body { color: @textColor; }"><pre class="notranslate"><code class="notranslate">@gray: #333;
@textColor: @gray;

body { color: @textColor; }
</code></pre></div>
<p dir="auto">This way is used in most places, but there are some places that use the color-named variables directly. Ideally, this shouldn't happen anywhere outside variables.less.</p>
<p dir="auto">border-radius and box-shadow are already supported by browsers without prefixes.</p>
<p dir="auto">Why do we need to duplicate these styles with -webkit- and -moz- vendor prefixes?</p>