A waStandards possui uma biblioteca de atalhos CSS nativamente implementada. A biblioteca serve para incrementar funcionalidades simples a determinados elementos da página, ou até mesmo para afirmar/negar uma propriedade CSS.

Imagine que você necessite implementar um objeto na página, como um box do tipo singleBox1. Por padrão, este elemento possui uma propriedade margin-bottom: 15px;. Porém, no contexto do seu projeto, há necessidade de implementar esse box com 30px de margem inferior. Nesse caso, o uso de um atalho é recomendado. Veja o exemplo:

<div class="singleBox1 marginBottom30px">
    ...
</div>

No exemplo, um atalho de margem marginBottom30px foi adicionado à classe do elemento. Dessa forma, o atalho funcionou como uma negação à margem nativamente instanciada no elemento singleBox1, modificando-a para o valor desejado.

Os atalhos também podem ser utilizados para setar funcionalidades simples, sem necessidade de escrever novos estilos. Veja no exemplo abaixo, um exemplo de aplicação de uma fonte de 14px com uma cor cinza através dos atalhos font14px e colorGray:

<p class="font14px colorGray">
    ...
</p>

Lista de atalhos

Classe CSS Descrição
clear Aplica a propriedade 'clear' a um elemento
noClear Remove a propriedade 'clear' de um elemento
cursorPointer Define o cursor do tipo ponteiro ao passar o mouse em um elemento
cursorDefault Insere a propriedade de cursor do tipo default (seta) ao passar o mouse em um elemento
margin1px, margin2px ... margin99px Insere uma margem no elemento (valores disponíveis de 1px a 99px)
marginNeg1px, marginNeg2px ... marginNeg5px Insere uma margem negativa no elemento (valores disponíveis de 1px a 5px)
marginAuto Insere uma margem no elemento com o valor 'auto'
marginLeft1px, marginLeft2px ... marginLeft400px Insere uma margem à esquerda do elemento (valores disponíveis de 1px a 400px)
marginLeftNeg1px, marginLeftNeg2px ... marginLeftNeg10px Insere uma margem negativa à esquerda do elemento (valores disponíveis de 1px a 10px)
marginLeftAuto Insere uma margem à esquerda do elemento com o valor 'auto'
marginRight1px, marginRight2px ... marginRight400px Insere uma margem à direita do elemento (valores disponíveis de 1px a 400px)
marginRightNeg1px, marginRightNeg2px ... marginRightNeg10px Insere uma margem negativa à direita do elemento (valores disponíveis de 1px a 10px)
marginRightAuto Insere uma margem à direita do elemento com o valor 'auto'
marginTop1px, marginTop2px ... marginTop400px Insere uma margem ao topo do elemento (valores disponíveis de 1px a 400px)
marginTopNeg1px, marginTopNeg2px ... marginTopNeg10px Insere uma margem negativa ao topo do elemento (valores disponíveis de 1px a 10px)
marginTopAuto Insere uma margem ao topo do elemento com o valor 'auto'
marginBottom1px, marginBottom2px ... marginBottom400px Insere uma margem à parte inferior do elemento (valores disponíveis de 1px a 400px)
marginBottomNeg1px, marginBottomNeg2px ... marginBottomNeg10px Insere uma margem negativa à parte inferior do elemento (valores disponíveis de 1px a 10px)
marginBottomAuto Insere uma margem à parte inferior do elemento com o valor 'auto'
padding1px, padding2px ... padding100px, Insere um 'padding' no elemento (valores disponíveis de 1px a 100px)
paddingAuto Insere um 'padding' no elemento com o valor 'auto'
noPadding Remove o 'padding' de um elemento
paddingLeft1px, paddingLeft2px ... paddingLeft100px, Insere um 'padding' à esquerda do elemento (valores disponíveis de 1px a 100px)
paddingLeftAuto Insere um 'padding' à esquerda do elemento com o valor 'auto'
noPaddingLeft Remove o 'padding' à esquerda do elemento
paddingRight1px, paddingRight2px ... paddingRight100px, Insere um 'padding' à direita do elemento (valores disponíveis de 1px a 100px)
paddingRightAuto Insere um 'padding' à direita do elemento com o valor 'auto'
noPaddingRight Remove o 'padding' à direita do elemento
paddingTop1px, paddingTop2px ... paddingTop100px, Insere um 'padding' ao topo do elemento (valores disponíveis de 1px a 100px)
paddingTopAuto Insere um 'padding' ao topo do elemento com o valor 'auto'
noPaddingTop Remove o 'padding' ao topo do elemento
paddingBottom1px, paddingBottom2px ... paddingBottom100px, Insere um 'padding' à parte inferior do elemento (valores disponíveis de 1px a 100px)
paddingBottomAuto Insere um 'padding' à parte inferior do elemento com o valor 'auto'
noPaddingBottom Remove o 'padding' à parte inferior do elemento
width1px, width2px ... width989px, Insere um tamanho de largura ao elemento (valores disponíveis de 1px a 989px)
widthAuto Insere um tamanho de largura com o valor 'auto'
noWidth Remove o tamanho de largura pré definido de um elemento
width1percent, width2percent ... width100percent Insere um tamanho de largura ao elemento com valor percentual (valores disponíveis de 1% a 100%)
minWidth5px, minWidth10px, minWidth15px ... minWidth1300px Insere um tamanho mínimo de largura ao elemento (valores disponíveis de 5px a 1300px, espaçados de 5 em 5 até 50px e 100 em 100 após 100px)
height1px,height2px ... height989px Insere um tamanho de altura ao elemento (valores disponíveis de 1px a 989px)
heightAuto Insere um tamanho de altura com o valor 'auto'
noheight Remove o tamanho de altura pré definido de um elemento
height1percent, height2percent ... height100percent Insere um tamanho de altura ao elemento com valor percentual (valores disponíveis de 1% a 100%)
minHeight5px, minHeight10px, minHeight15px ... minHeight1300px Insere um tamanho mínimo de altura ao elemento (valores disponíveis de 5px a 1300px, espaçados de 5 em 5 até 50px e 100 em 100 após 100px)
borderRadius4px, borderRadius6px, borderRadius8px, borderRadius10px Insere uma borda arredondada ao elemento (valores disponíveis de 4px, 6px, 8px e 10px)
borderRadiusTop4px, borderRadiusTop6px, borderRadiusTop8px, borderRadiusTop10px Insere uma borda arredondada ao topo do elemento (valores disponíveis de 4px, 6px, 8px e 10px)
borderRadiusBottom4px, borderRadiusBottom6px, borderRadiusBottom8px, borderRadiusBottom10px Insere uma borda arredondada à parte inferior do elemento (valores disponíveis de 4px, 6px, 8px e 10px)
borderRadiusLeft4px, borderRadiusLeft6px, borderRadiusLeft8px, borderRadiusLeft10px Insere uma borda arredondada à esquerda do elemento (valores disponíveis de 4px, 6px, 8px e 10px)
borderRadiusRight4px, borderRadiusRight6px, borderRadiusRight8px, borderRadiusRight10px Insere uma borda arredondada à direita do elemento (valores disponíveis de 4px, 6px, 8px e 10px)
noTopLeftBorderRadius, noTopRightBorderRadius, noBottomLeftBorderRadius, noBottomRightRadius Remove a borda arredondada dos respectivos locais indicados na classe (esquerda, direita, topo e inferior)
noBorderLeft, noBorderRight, noBorderTop, noBorderBottom, noBorder Remove a borda dos respectivos locais indicados na classe (esquerda, direita, topo e inferior e laterais)
noBackgroundImage Remove a a imagem de fundo de um elemento
fontUnderline Insere o efeito de sobrescrito de um texto.
noFontUnderline Remove o efeito de sobrescrito de um texto.
fontUppercase Transforma o texto para o padrão de caixas altas
fontLowercase Transforma o texto para o padrão de caixas baixas
noFontTransform Remove os efeitos transformação de um texto (uppercase, lowercase, etc.).
nowrap Impede que um texto quebre de linha.
font10px, font11px, font12px ... font40px Insere um tamanho de fonte definido em um elemento (valores disponíveis de 10px a 40px, sendo a partir de 20px os valores espaçados de 2 em 2)
fontNormal Atribui a fonte em estilo normal (sem bold, italic, etc.)
fontBold Atribui a fonte em estilo negrito
fontItalic Atribui a fonte em estilo itálico
fontVerdana Atribui a fonte em tipografia 'Verdana'
fontArial Atribui a fonte em tipografia 'Arial'
fontTahoma Atribui a fonte em tipografia 'Tahoma'
fontCourier Atribui a fonte em tipografia 'Courier'
colorBlack Cor de texto preta
colorOrange Cor de texto laranja
colorGray Cor de texto cinza
colorLightGray Cor de texto cinza claro
colorRed Cor de texto cinza claro
colorGreen Cor de texto verde
colorBlue Cor de texto azul
colorWhite Cor de texto branco
alignLeft Alinhamento de texto à esquerda
alignCenter Alinhamento de texto ao centro
alignRight Alinhamento de texto à direita
alignJustify Alinhamento de texto justificado
lineHeightNormal Altura da linha em tamanho padrão
lineHeight10px, lineHeight11px ... lineHeight26px (valores disponíveis de 10px a 26px, sendo a partir de 20px os valores espaçados de 2 em 2) Altura da linha em tamanho padrão
displayNone Define o atributo 'display' do elemento como invisível
displayInline Define o atributo 'display' do elemento como em linha
displayBlock Define o atributo 'display' do elemento como bloco
displayInlineBlock Define o atributo 'display' do elemento como bloco em linha
displayTable Define o atributo 'display' do elemento como tabela
displayTableRow Define o atributo 'display' do elemento como linha de tabela
displayTableCell Define o atributo 'display' do elemento como célula de tabela
vAlignTop Define o alinhamento vertical de uma linha ou tabela como ao topo
vAlignMiddle Define o alinhamento vertical de uma linha ou tabela como ao meio
vAlignBottom Define o alinhamento vertical de uma linha ou tabela como à parte inferior
positionRelative Define o atributo 'position' como relativo
positionAbsolute Define o atributo 'position' como absoluto
positionFixed Define o atributo 'position' como fixo
zIndex1, zIndex2 ... zIndex9999 Define o eixo de profundidade z do elemento (valores disponíveis de 1px a 10px, com os adicionais zIndex99, zIndex999, zIndex9999)
floatLeft Define a flutuação do elemento à esquerda
floatRight Define a flutuação do elemento à direita
floatNone Remove a flutuação do elemento
overflowHidden Define o atributo 'overflow' como hidden
overflowAuto Define o atributo 'overflow' como auto
opacity5percent, opacity10percent ... opacity95percent Define o a opacidade de um elemento (valores disponíveis de 5% a 95%, espaçados de 5 em 5)
opacity5pctHover, opacity10pctHover ... opacity95pctHover Define o a opacidade de um elemento ao passar o mouse em cima (valores disponíveis de 5% a 95%, espaçados de 5 em 5)
bgBlack5percent, bgBlack10percent ... bgBlack95percent Define o plano de fundo de um elemento com uma mascara de imagem preta (valores disponíveis de 5% a 95%, espaçados de 5 em 5)
bgWhite5percent, bgWhite10percent ... bgWhite95percent Define o plano de fundo de um elemento com uma mascara de imagem branca (valores disponíveis de 5% a 95%, espaçados de 5 em 5)