初学者请注意手写 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;
}