初学者请注意手写 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;
}
    原文作者:changsj
    原文地址: https://segmentfault.com/a/1190000002402463
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞