• 现代 CSS 进化史

    Posted by : lon.y@qq.com on 2018年2月13日

    CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。 为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个最佳实践是最好的目前尚无定论,而且有些实践相互之间是完全矛盾的。如果你第一次尝试学习CSS,这对于你来

    阅读全文...

  • 欲练JS,必先攻CSS——前端修行之路

    Posted by : lon.y@qq.com on 2018年1月5日

      今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的we

    阅读全文...

  • 如何编写通用的 Helper Class

    Posted by : lon.y@qq.com on 2018年1月3日

    Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/snack-helper 前言 什么是 helper ?任何框架都不是万能的,而业务需求却是多种多样,很多时候我们只需要更改组件的部分属性,而 helper 就是调整细节的工具。我在之前的文章《如何编写轻量级 CSS 框架》中也举过例子,我们完全没必要因为几个属性的不同而重新编写新组件。大部分的 helpe

    阅读全文...

  • 什么是关键 CSS

    Posted by : lon.y@qq.com on 2017年10月6日

    网络速度很慢,但是有一些简单的策略可以使网站变快。其中之一就是将关键的css内联插入到网页的标签, 但是,如果您的网站包含数百页,甚至更糟糕的是包含数百种不同的模板,那么你该怎么做呢? 你不能手动做这件事。 Dean Hume解释了一个简单的方法来完成它。如果您是经验丰富的网页开发人员,您可能会发现这篇文章显而易见,并且不言而喻,但对于您的客户和初级开发人员来说,这是一个很好的选择。— Ed. 提供快速,流畅的网络体验是如今构建网站的重要部分。 大多数情况

    阅读全文...

  • Web真相: CSS不是真正的编程

    Posted by : lon.y@qq.com on 2017年10月6日

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性: 人们对CSS有一些强烈的情愫。 — Dave Rupert (@davatron5000) [September 18, 2017] 来自于:pic.twitter.com/dDspAM8i2F 事实确实如此,CSS不同于传统的编程,且具有缺陷,同任何标准化编程语言相比,使用起来都更为困难。这是由于CSS被设计为一种描绘界面的方式,

    阅读全文...

  • CSS 最核心的几个概念

    Posted by : lon.y@qq.com on 2017年7月15日

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。 元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你

    阅读全文...

  • 不要再在 JavaScript 中写 CSS 了

    Posted by : lon.y@qq.com on 2017年7月4日

    本文作者是 react-css-modules 和 babel-plugin-react-css-modules 的作者。并不是对 CSS in JavaScript: The future of component-based styling,或是使用样式组件的反对,而是一种补充,web 开发者要了解自己的需求,明白自己使用 styled-components 的真正原因。 不要再在 JavaScript 中用 CSS了 9 个谎言 CSS 不应随意放置

    阅读全文...

  • 遇见未知的 CSS

    Posted by : lon.y@qq.com on 2017年7月4日

    摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠 在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。 模块化 一个页面中的样式可以拆分成多个样式表,代码如下。 @import url(style/base.css); @import url(style/layer.css); 但这种方式也会随之产生一个问题,即如果对某个

    阅读全文...

  • 有趣的CSS题目(17):不可思议的颜色混合模式 mix-blend-mode

    Posted by : lon.y@qq.com on 2017年7月4日

    CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。 混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。 我

    阅读全文...

  • CSS 预处理器中的循环

    Posted by : lon.y@qq.com on 2017年7月4日

    如果你看过老的科幻电影,你一定知道循环的强大之处。给你的机器人克星设置无限循环,它就会爆炸,然后机器人灰飞烟灭了。 预处理器的循环并不会在太空中发生剧烈爆炸(我希望),但是它有利于书写 DRY CSS(译者注:详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-principles/ )。每个人在讨论模式库以及模块化设计的时候,大部分人的关注点是 CSS 选择器。无论你使用哪种模式的选择器(BEM、OOCSS、SMAC

    阅读全文...