Trabalhar em web sites e web apps que necessitam de suporte RTL (Right-to-Left) é difícil, porque assegurar a exibição RTL correta é mais difícil pelo fato de que ou não temos valores e propriedades CSS para fazer isso, ou porque o suporte existente ainda não é amplamente utilizado. Temos valores como start para text-align e temos propriedades como -moz-margin-start, mas elas não são suportadas em todos os lugares, apesar de RTL ser um aspecto importante em sites globais.

Então, o que temos que fazer em última instância? Repetir os seletores com novos valores RTL e às vezes até mesmo compensar:

/* ltr / default */
.some {
	.thing {
		> .is {
			.here {
				margin-left: 20px;
			}
		}
	}
}

/* rtl */
html[dir=rtl] {
	.some {
		.thing {
			> .is {
				.here {
					margin-right: 20px;
					margin-left: 0;
				}
			}
		}
	}
}

Eu considero isso um pesadelo por algumas razões:

• Se você tiver que mudar o padrão da estrutura CSS aninhada, você precisará se lembrar de fazê-la também para o bloco RTL.
• Se você tiver que compensar a regra original, será preciso se lembrar de compensar a original e também ajustar a nova regra.

Ao consertar estilos, encontrei uma excelente solução para sanar todos esses problemas de uma vez com uma mistura simples:

/* mixin definition ; sets LTR and RTL within the same style call*/
bidi-style(prop, value, inverse-prop, default-value) {
	{prop}: value;

	html[dir=rtl] & {
		{inverse-prop}: value;
		{prop}: default-value;
	}
}

/* usage */
.some {
	.thing {
		> .is {
			.here {
				bidi-style(margin-left, 20px, margin-right, 0); /* setting LRT and RTL! */
			}
		}
	}
}

O mixin acima é simples, mas me deixa num estado de euforia. Em vez de ter que copiar e manter a estrutura aninhada, esse mixin me permite ajustar os valores das propriedades para LTR e RTL no mesmo lugar no código, evitando a necessidade de criar blocos RTL separados. E esse cenário, de uma simples troca de propriedades dependendo da direção, cobre 95% dos cenários de direções.

Eu sei que o LESS também favorece esse padrão, mas não estou certo de que SASS faz o mesmo. O que também é legal é que RTL não é o único cenário onde isso é útil; você pode usar isso também para coisas baseadas em recursos como classes CSS do Modernizr:

.gradient-background {
	background-image: linear-gradient(top, #555, #333);

	.no-cssgradients & {
		background: url("background.png")
	}
}

Brilhante! Essa estrutura simples torna escrever código CSS e organizar diferentes estados um milhão de vezes mais fácil. Em um mundo ideal, a propriedade e os valores “start” estariam no lugar, mas, até lá, use esse tipo de estratégia para tornar a sua vida mais fácil!

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://davidwalsh.name/stylus-parent-selectors