打造你的CSS梦想框架：规则、速度、响应，一网打尽

目标与原则

想要做出超赞的CSS框架？不要太急于求成了，先制定些规则！罗马不是一天建成的，慢慢来！真正厉害的框架不仅能够帮你快速搞定网页，还得保证在所有屏幕都流畅运行！而且那些设计原则可不仅仅是装饰，譬如代码得容易看懂修改和扩展，速度还得嗖嗖的才算得上实用！

冗余样式的克星

搞CSS时，遇上一大堆重复的样式，整个人都心烦意乱的。但别担心，咱们有Sass和Less这对神器能帮咱们搞定。用上它们，咱们可以把Css代码整整齐齐的，重新编写一次就行，那就不会再费劲儿地复制粘贴了，CSS文件瞬间变得舒服多了！

基本约定必备

在设计CSS框架时，得给自己定一些基本约定。比如下面这些：

css

body {
  margin:0;
  padding:0;
}
.container {
  width: 100%;
  max-width: 1200px;

这些规则可是我们楼里的基础！不能拖拉，越及时越好，这样不仅省事儿还能避免重复劳动。

/* 基本样式重置 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, form, fieldset, legend, table,
th, td, input, textarea, select, option, img, iframe {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
/* 全局字体和颜色 */
body {
  font-family: Arial, sans-serif;
  color: #333;
}
/* 容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
/* 栅格系统 */
.row::after {
  content: "";
  display: table;
  clear: both;
}
[class^="col-"] {
  float: left;
  margin-bottom: 20px;
}
.col-1-of-2 {
  width: calc((100% - 20px) / 2);
}
.col-1-of-3 {
  width: calc((100% - 40px) / 3);
}
/* 按钮样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.button:hover {
  background-color: #666;
}

响应式布局与媒体查询

做网页设计可别忘了解决屏幕大小问题！现在，人人都爱响应式布局。用CSS框架搞定不同设备、屏幕的适配就更nice了。媒体查询这个东西，对于响应式设计可是超级重要滴！

屏幕宽度小于等于600像素的时候，以下样式生效哦～

.container {

padding: 10px;

width: 100%;

}

@media screen and (max-width: 600px) {
  .container {
    padding: 10px;
  }
  
  [class^="col-"] {
    width: 100%;
  }
}

组件化与模块化

这几个超好用的CSS框架就能帮咱们轻松搞定网页设计！不仅可以快速搭建组件和模块，包括导览栏、按钮、卡牌啥的统统不在话下。而且还有各种CSS类和样式，真的省时省力！

“`html

Home

About

Contact

通过使用组件，你可以飞快地构建出风格一致的网页。

实践出真知

.header {
  background-color: #333;
  padding: 10px;
}
.nav {
  list-style-type: none;
}
.nav li {
  display: inline-block;
  margin-right: 10px;
}
.nav a {
  color: #fff;
  text-decoration: none;
}
.nav a:hover {
  color: #ff0;
}

找CSS框架？先定个小目标，再想想办法。别乱弄样式，咱们要订下规矩，比如响应式布局啦、媒体查询，还可以加上组件化和模块化，搞定这些你就能做出超棒的CSS框架！