使用数据属性触发样式更改

Question

我正在开发一个UI框架并且能够触发HTML元素中的样式更改，我在几种情况下使用了以下技术。我在想，如果这种做法是很常见之间的前端开发，例如：

[data-layout=fitted] { 
    width:100%; 
    height:100%; 
    display: block; 
    position: relative; 
    top:0; 
    left:0; 
    padding:0; 
    margin:0; 
} 

[data-layout=center] { 
    display: block; 
    position: relative; 
     top: 50%; 
    left:50%; 
    @include transform(translate(-50%,-50%)); 
} 

和HTML

<div class="some-class" data-layout="center">centered within parent element</div> 

<div class="some-class" data-layout="fitted">fitted into parent element</div> 

BTW：我的工作就是找到here :)

Answer 1

尝试在数据属性之前放置元素标签

div[data-layout="fitted"] { 
width:100%; 
height:100%; 
display: block; 
position: relative; 
top:0; 
left:0; 
padding:0; 
margin:0; 
}