初学者请注意手写 css 样式表的各属性的顺序及 CSScomb 的使用

问题

有时候会觉得自己在写 css 时没有什么章法，因为 css 的属性很多，又有一些继承不继承的关系，还有一些相互影响的属性需要注意。总之就是觉得写 css 好费劲，不如写编程语言的逻辑清晰明了。

干货

• 手写 css 很重要
• 对于简单页面，嵌套式的 sass 和 bootstrap 没必要用
• （ 但 sass 中的颜色变量还是很好用的，可以在 .scss 文件里写 css + 颜色变量）
• css 的原理是很简单（单字、展示、大小、定位、对齐、样式，初学者应注意这个顺序；这个顺序来自 CSScomb）
• 在写页面写出效果后，用 CSScomb 回顾并理清思路
• 可能会碰到的常用 css 属性列表（至少用它们可写出一个正常的（或被改造的）谷歌首页）

分析

sass ?

有的人会建议使用 less 或 sass 来代替样式表文件，或者把一个 css 文件分成几部分，然后用一个 @_xx 来引入。新手注意：对于小站点、小页面的需求来说，是几乎不需要引入任何 css 预编译器特性的。
我所理解的 sass 和 compass 等对于 「css 样式表设计」 的辅助工具、高阶工具，是为了帮助人们解决一些重复性的工作，也就是说能腾出一些处理重复工作的时间去干别的。

也就是说，如果一个人不能手写一个布局（比如手写谷歌首页和百度首页），是因为它对于要实现的效果不理解，对于要实现的效果无法用 css 来表现，这是样式表基础知识的不牢固造成的。

这时用 sass 是没用的。这些高阶工具能帮你解决什么问题呢？它能缩短你手写 css 的时间，但不能替你写 css。

也就是说，sass 编译出来的 css，你，应该是可以手写出来的。如果达不到这个要求，说明你页面写得不熟。

bootstrap ?

如果你是一个新手，一定会有很多人像你推荐 bootstrap 因为它能够免去很多麻烦。比如 它的 grid 12 网格布局。

呃 ... 怎么说呢，我觉得对于纯 css 的学习，要比对于 bootstrap 等前端框架的学习，要有趣。

css 是一个很 showy 的东西，你可以叫它 UI，也可以叫它 Web Design，因为它是给 html 上样式的。它的语句本身是松散的（相对于编程语言的逻辑），但它有因为松散而毫无章法吗？

No，Never，否则请向我解释一下那些看起来很漂亮的网页是怎么在 bootstrap 出现之前实现出来的。

而往往越松散的东西，它的原理就会越基本 ———— 而在这松散的架构和基本的原理之上，发挥出的想象力才是最大的。

真正的想象力是一种很迷人的东西。如果你用 bootstrap 完成了页面的全部设计，那么你的想象力很可能就是 bootstrap 的 grid 。可能在不知不觉中错过了设计的精髓 ———— 简单、松散、想象力无尽。

而实际上，初学者：css 的原理是很简单（单字、展示、大小、定位、对齐、样式，注意这个顺序），既包括了在一张网页上画画所需要的一切，又没有冗余的东西。在手写 css 时，在微调样式表的过程中，你体会到一种微妙的和谐和内在的、小而美的逻辑。

掌握了 css 原理之后，你会比使用 bootstrap 更觉得心应手。

看教程？

如果你已经下定决心，抛弃 sass 和 bootstrap，拥抱 css ，那么可能有人会给你推荐 很多书，比如。但是这些书上的资料太多了，并且倾向于覆盖方方面面。 you know, css looks complex, but using css is easy

解答

这时，应当在练习写页面的过程中，搜索各种解决办法，顺带温习样式表的基础知识。有些知识，书上的讲解好；有些知识，网上的文章就够拿来解决问题了。

css 属于后者，所以去写页面吧。如果你真的去手写页面了，那么你迈出了正确的一步。

幸运的话，你会遇到如下路障，来帮你巩固 基础知识（也就是说，如果你没思索过这些问题，你很可能就是在基础知识学习的路上走偏了），从页面 grid 控制开始，块级元素固定定位，相邻，浮动，居中，沉底布局，响应式，块级元素布局。

而现在的你，完全不用思考这些，你唯一要思考的是：如何把这一块块的东西摆在一张网页上，以及如何调整它的位置。

基础知识

w3school 就好了，把 这个页面 里的所有链接看一遍，然后就可开始写 html 和 css 了。简单的说就是，之后可能会有人向你推荐什么特棒的教程，但你不用看（实际上你可能会觉得教程太简单而看不下去）。此时你只需要在问题出现时，去问谷歌。
编辑器推荐 st2，安装 Emmet 插件，想必你们都知道了。

CSScomb

在我练习写 css 页面的时候，唯一觉得有帮助的工具就是 CSScomb，你可以写一段 css，在完成效果之后（注意，在完成页面效果之前，别用，而是在搜索问题解决办法的过程中，学习 css 基本知识）用它梳理一下，看看结果是什么。

如果你尝试了，你会发现是 css 语句的顺序调整了。是的，这就是写 css 的 workflow ，也是你应该思考如何布局一个页面的线索。

附一个我目前遇到所有用过的 css 属性，在 CSScomb 的梳理后，如果你能手写出谷歌首页，那么你一定会了解它们的用法。

.m-1
{
font-size: 4px;
line-height: 5em;

position: relative;
top: 2em;
bottom: 1em;
left: 2em;
right: -0.2em;

display: inline;
display: none;
display: flex;
visibility: hidden;
float: left;
clear: both;

width: 15em;
min-width: 960px;
max-width: 1024px;
height: 5em;
height: 100%;
min-height: 100%;
margin-top: 3em;
margin-right: auto;
margin-left: auto;
margin-bottom: -4em;
padding-top: 4em;
padding-bottom: 2em;

list-style: none;
list-style: none;

text-align: center;

color: red;
border: solid 1px #000;
background: blue;

justify-content: center;
}

当然，上述 css 属性，只用到一部分就够了。并且它们是散布在整个 css 文件中的。
你很可能只写出这些东西来就能够完成部分页面了。

.g-1
{
    line-height: 4em;

    height: 4em;

    text-align: center;
}
.g-1 .m-1
{
    float: left;

    width: 8em;

    background: red;
}

.g-1 .m-2
{
    margin-left: 8em;

    background: blue;
}
.g-1 .m-2 .clearme
{
    clear: both;
}