抽离样式模块怎么写？说出思路，有无实践经验？

Question

抽离样式模块怎么写？说出思路，有无实践经验？

Answer 1

该题目中的“模块”指的是页面元素，例如网站通用按钮，通用选项卡，通用小图标，或是页面的一些固定框架结构等，即页面元素的模块化。
怎么写？例如下面这张截图，优雅的设计师们渴望项目里看到的input元素都长成这个样子，那前端的攻城狮们该怎么做呢

撸一撸下面代码，撸阿鲁~撸阿鲁~

.inset{
    height:16px;
    background-position:0 -220px; 
    background-color:white;
    border:1px solid #D3D2D4; 
    padding:3px 0 2px 2px;
}

.txtw1{width:163px;}
.txtw2{width:297px;}
.txtw3{width:397px;}
.txtw4{width:710px;}

宽度1：<input type="text"  class="inset txtw1" />
宽度2：<input type="text"  class="inset txtw2" />
宽度3：<input type="text"  class="inset txtw3" />

my god, 大概的意思意会到了吧！什么，看不懂？？？谁懂谁来叨叨几句呗

Answer 2

顾名思义就是抽离样式，个人理解，这个通过定义.inset抽离input的样式，使之独立出来，然后其他地方在调用这个输入框样式，可以在后面添加类似宽度等等的属性，这样也就使得input框都可以是这种样式，而宽度不一了。