:lang 选择器最佳实践

在公司做项目的时候遇到一个情况。
项目需要做国际化，并且中英文环境下，样式会有不同。所以选择了:lang 选择器

按照w3c 文档上描述，我在每个标签上设置了 lang 属性 并设置了每种语言的样式。如下：

//html部分
<Input lang={(navigator.language||navigator.userLanguage).substr(0,2)} />
<label lang={(navigator.language||navigator.userLanguage).substr(0,2)}><label/>

//css
Input:lang(en){
 ...
}
Input:lang(zh){
 ...
}

不过这样写就太傻了。这种东西可以写到立即执行函数中，如下：

!function(a){
    var x=a.document;
    var y=x.documentElement;
    y.lang = (navigator.language||navigator.userLanguage).substr(0,2);
}(window)

如此一来，就直接写css 样式的部分就好了，不用在标签里挨个写了。

PS：我写的是React应用下的方式，立即执行函数放在index.html 文件中script标签里。因为是单页应用，所以只有一个根HTML文件。所以在立即执行函数执行好后，就相当于整个文档都加了lang属性。

总结：写代码，大局观很重要。