css样式为什么不合并一块写，而要分开来？

Question

这个样式，
header div#utils {
margin-top: 0px;
}

header #utils {
position: relative;
margin-top: 40px;
float: right;
z-index: 100;
}

#utils {
font-size: 10px;
line-height: 28px;
}

为什么不直接合并成
#utils {
font-size: 10px;
line-height: 28px;
position: relative;
margin-top: 40px;
float: right;
z-index: 100;
margin-top: 0px;
}
我测试了一下，同样可以正常显示。为什么不简洁一些呢？
下面的代码是一个专业人士写的：
.view{ height: 200px; background: #ccc;}
#warp{float: left;width: 100%}
#id1{margin-left: 200px; background: #666;}

<div id="warp">
<div class="view" id="id1">内容内容内容 </div>
</div>

初学者我不解，为什么不写成：
.view{ height: 200px; background: #ccc; }
#id1{margin-left: 200px; background: #666;float: left;width: 100% ;}

<div class="view" id="id1">内容内容内容 </div>

谢谢

Answer 1

他不是为了这样写而这样写，他们是创建或者引用了一个css库，一些基本的通用的样式都会存在于这个css样式表内。做项目的时候直接引用这个样式表(而不用每次都创建一个表，项目所有页面都会引用这个css库)，而这个库不能实现的或者实现的效果不是想要的则重新编写样式表，将想修改的样式进行重写。这样就形成了你所看到的分开写的效果。希望对你有所帮助

Answer 2

这个牵扯到CSS样式作用域和样式重载的问题，详情你可以去网上查一查，样式重载：CSS是按从上向下的顺序来执行的，比如你上边设置宽度100像素，然后下边再设置一个200像素，如果两个样式的作用域是一样的，也就是选择器选择的对象是一个标签，那么浏览器会显示宽度200像素。

另外，下方的专业人士写的代码是用来避免样式冲突，或者需要配合一些网页特效使用的，如果你是初学者，这方面可以忽略，属于网页制作高级进阶技术。

Answer 3

css文件，是有结构性的，，，

当然如果你只是看到现在的效果，当然会觉得直接合一起会更方便。

但是做为了一个开发者来说，它要考虑到更多的是，模块性，以及独立性，这样会更便于维护。

Answer 4

完全可以 像你这个样子的 不同的写法而已 定义的样子都是一样的 属性值完全相同

Answer 5

更好的重用、优化和定制