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

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;
}