css类架构显示

.page-setting-popup { 
    position: absolute; 
    background-color: tomato; 
    padding: 10px 10px 10px 0; 
    height: 120px; 
    display: flex; 
    flex-flow: row; 
    justify-content: space-between; 
    align-items: flex-start; 
} 
.setting-popup-controls { 
    display: flex; 
    flex-flow: row; 
}

我有这样的代码在不同的地方。我不喜欢我应该几乎每块使用显示。我觉得如果我这样做一些课，我会很棒。css类架构显示

.flex { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
    align-items: center; 
}

或者它应该是这样的？

.flex { 
    display: flex; 
} 
.v-centered { 
    align-items:center; 
} 
.h-centered { 
    justify-content: center; 
} 
.stretch-between { 
    justify-content: space-between; 
}

我认为第二个变体更加灵活。但我需要你的意见）

<div class="page-setting-popup"> 
    <div class="setting-popup-icon"><span class="zmdi zmdi-time-restore"></span></div> 
    <div class="setting-popup-main"><span class="setting-header text-uppercase">Sync. frequency</span> 
    <div class="setting-popup-controls"> 
    <input type="number" min="0"/> 
    <button type="submit">V</button> 
    <button>X</button> 
    </div> 
</div>

来源

2016-11-29 SashaSemanyuk

也分享你的相关HTML代码。没有这个。我们无法帮助你。也......用你的代码来解释你想要达到的目标 –

如果你造型的组成部分，我会把所有相关的风格融于特定于特定的组件类。但是，您在此使用的是.flex作为示例，这是非常通用的，因此是否将因素考虑在内是值得商榷的。我不会把它分解出来。

一般来说，这种方法分解出改性剂类，如.flex，.left，right等的有关框架，如bootstrap，因为没有假设，如何以及在何处，这些修饰符将被使用。同样，如果你正在设计一个组件，你就会很好地理解组件的每个部件需要什么样式，而且我不会使用修饰符类。

来源

2016-12-01 07:21:15

css类架构显示

回答

相关问题