CSS Preprocessors and Parent Selectors

By  on  

Working on web sites and web apps that require RTL support is hard because ensuring correct display in RTL is made more difficult by the fact that we either don't have the CSS properties and values to do so or that the existing support isn't widely used enough yet.  We have values like start for text-align and we have properties like -moz-margin-start, but they aren't supported everywhere despite knowing that RTL is an important aspect of global sites.

So what do we ultimately have to do?  Repeat selectors with a new RTL value and sometimes even an offset:

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

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

I consider this a nightmare for a few reasons:

  1. If you have to change the default nested CSS structure, you must remember to do so for the separate RTL block as well
  2. If you have to offset the original rule, you're required to remember to offset the original and then set the new rule

In tinkering with Stylus, I've found an excellent solution for curing all of these problems with a simple 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! */
			}
		}
	}
}

The mixin above is a simple but sends me into a state of euphoria.  Instead of having to copy and maintain the nested structure, this mixin allows me to set the property values for LTR and RTL in the same place in code, avoiding the need to create separate RTL blocks.  And this scenario, of simply swapping out properties depending on direction, covers 95% of direction scenarios.

I know that LESS also accommodates for this pattern but I'm not sure if SASS does as well.  What's also nice is that RTL isn't the only scenario where this is useful; you could also use this for feature-based stuff like Modernizr CSS classes:

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

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

Brilliant!  This simple structure makes coding CSS and organizing different states a million times easier.  In an ideal world, the "start" properties and values would be in place but until then, use this type of strategy to make your life easier!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    jQuery Link Nudging

    A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery: The jQuery JavaScript It's important to keep...

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

Discussion

  1. yes, SASS does support that pattern too. even the last time I used less, it doesn’t work but it was a long time ago.

  2. As Bobby said it’s fairly easy in SASS as well. Required a few tweaks but here is a SASS version for those interested http://codepen.io/fleeting/pen/AqHtu.

  3. Denis Borovikov

    You can upgrade bidi-style mixin, if make function like compass opposite-position() http://compass-style.org/reference/compass/helpers/constants/

    There is no need to pass inverse property, because you always can calculate it from property itself.

  4. André Machado

    Nice aproach.

    I am Brazilian but work in Dubai (UAE), have the constant need to work with “rtl / ltr” but had not yet achieved an elegant way to work with exceptions to “rtl” rules.

    Thanks for the tip!

  5. Also have such functions in Sass,like this:

    Sass:

    @mixin bidi-style($prop,$value,$inverse-prop,$default-value){
    	#{$prop}: $value;
    	html[dir=rtl] : $value;
    		#{$prop}: $default-value;
    	}
    }
    
    .some {
    	.thing {
    		> .is {
    			.here {
    				@include bidi-style(margin-left,20px,margin-right,0);
    			}
    		}
    	}
    }
    

    Compiled in the CSS:

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!