Trabalhar com sites e web apps que requerem suporte de exibição da direita para a esquerda (RTL) é difícil porque garantir que o RTL será mostrado corretamente é um pouco complicado, devido ao fato que nós ou não temos as propriedades e valores CSS para fazer isso ou que o suporte existente ainda não é largamente utilizado. Temos valores como start para text-align e propriedades como –moz-margin-start, mas eles não são suportados em todo lugar, apesar de RTL ser um aspecto importante no aspecto global.

Então, o que podemos fazer, afinal? Repetir os seletores com um novo valor RTL e algumas vezes um offset:

/* 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ê tem que mudar sua estrutura CSS aninhada, deve lembrar de fazer isso para o bloco RTL em separado também
• Se você tem que compensar a regra original, precisa lembrar de fazer isso e inserir uma nova regra

Mexendo com Stylus, eu encontrei uma solução excelente para curar todos esses problemas com um simples mixin:

/* 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 faz entrar em um estado de euforia. Ao invés de ter que copiar e manter a estrutura aninhada, o mixin me permite setar os valores de propriedade para LTR (exibição da esquerda para a direita) e RTL no mesmo local do código, evitando a necessidade de criar blocos RTL separados. E este cenário, de apenas mudar as propriedades dependendo da direção, cobre 95% dos cenários de direção.

Eu sei que LESS também funciona para este padrão, mas não tenho certeza se SASS faz. O que é legal também é que o RTL não é o único cenário onde isso é útil: você poderia usar isso para coisas baseadas em features, como classes CSS Modernizr:

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

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

Sensacional! Essa simples estrutura faz com que codar o CSS e organizar diferentes estados seja um milhão de vezes mais fácil! Em um mundo ideal, os valores e propriedades “start” estariam no lugar correto, mas, até lá, use esse tipo de estratégia para facilitar a sua vida!

***

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