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!

Raygun Pulse

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

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!