CSS

  • 浅谈 CSS 预处理器(二):如何快速上手?

    看完了上一篇《为什么要使用预处理器?》的各种安利,你应该已经跃跃欲试了吧!接下来我们来聊一聊,如何快速上手 CSS 预处理器。

    在接触 CSS 预处理器之前,你最好已经具备了一定的 CSS 基础和实践能力,比如你可以完成常见网页的样式和布局;另外,如果你有一些项目经验就更好了,比如组织过整个网站的 CSS 文件、设计过 CSS 代码的分层和复用等等。

    因为,当你有了这方面的经验之后,在学习 CSS 预处理器时,对它提供的功能会更有感触,会更有针对性地解决过往 CSS 开发中的种种痛点。

    好,接下来,魔法哥建议 “三步走”。

    第一步:选择语言

  • 浅析 Bootstrap 的 CSS 类名设计

    最近在重新设计一个 UI 框架,因此也在考察同类项目的特征和要素。在读到《Bootstrap 编码规范》时,顺着链接发现了其作者 @mdo 的一篇文章,其中讲到 CSS 类名的设计思路。


    [译] 使用前缀来限定 CSS 类的作用范围

    • Original: Scope CSS classes with prefixes
    • Translated by: cssmagic

    When building a CSS design system like Bootstrap, it's important to keep things simple

  • [幻灯片] 重拾 CSS 的乐趣(上)

    前言

    我在第二届 CSS Conf(2015 中国 CSS 开发者大会)上的演讲广受好评,很多网友向我索取现场视频。条件所限,这个演讲并没有留下视频存档。因此,本文尝试在静态幻灯片的基础上,以文字的方式还原现场讲解,尽可能为不能去现场的朋友呈现最完整的体验。

    我在每幅图片之间补充了讲解文字。你不用分辨每段文字是配合上图还是下图的,只管顺序阅读即可。


    重拾 CSS 的乐趣 - 幻灯片封面

    大家看到封面的画风,应该可以看出我今天走的不是技术路线,而是娱乐路线。如果说前面几位讲师的分享是烧脑的悬疑推理大片,我这个环节就是轻松愉快的爆米花电影了,大家可以放松一下。

    CSS魔法 #百姓网#

    接下来,接照惯例,需要介

  • 《重拾 CSS 的乐趣》问答环节

    我在第二届 CSS Conf(2015 中国 CSS 开发者大会)上的演讲主题为《重拾 CSS 的乐趣》。在演讲的问答环节,现场观众提了三个问题,整理记录如下。

    Q1 - CSS 图标的代码量会不会很大,在实际项目中使用可能会有什么问题?

    虽然我在演讲中花了很多时间来介绍 CSS 图标,但我并不鼓励在生产环境中大量使用。我自己的项目 CMUI 在后续版本中已经改用了其它的图标解决方案。我在演讲中也提到了,任何技术都有优缺点,需要看场景来选择使用。

    我今天介绍 CSS 图标,主要目的在于分享它的乐趣,以及它所体现出的 “化整为零” 的 CSS 思维方式。

  • [幻灯片] 重拾 CSS 的乐趣(下)

    接下来,要向大家介绍一件最近让我非常高兴的事情。我相信它也会是所有 CSS 开发者欢欣鼓舞的一件事。

    一件乐事

    是关于一本书的。

    我对这本书的评价是这样的:

    “近十年来最重要的 CSS 图书,没有之一”

    说到 CSS 图书,问题来了。

    如果你的书架只能放得下三本 CSS 书……

    如果你的书架只能放得下三本 CSS 书,我会推荐哪三本呢?

    《CSS 权威指南》 - 2006

    第一本,《CSS 权威指南》。

    这是一本非常经典的 CSS 参考书,它的经典之处在于,它用普通人类可以理解的语言系统、全面地讲解了 CSS 规范。这本书会告诉你,CSS 是什么、CSS 有什么、CSS 可以做什么。

    这本书的最新版本——第三版——的英文版出版于 2006 年。

    《精通 CSS》 - 2006

    第二本书,《精通 CSS》。这同