一些要先了解的 ⇧

  • 基础部分学习占比：HTML 1% CSS 19% Javascript 80% (基础部分 ？% HTTP等WEB知识 ?% 前端工具 ？% 框架 ?% 项目 ?% )
  • CSS不是重点，面向工作学习市场上比较需要的技术才是王道，张*旭的职业发展不适大多数人，选择比努力更重要
  • CSS历史
  • Acid Test for browser
  • CSS是艺术（非逻辑，用测试经验来学，空间感，所见即所学）
  • CSS版本（CSS4*3*2.1 分模块升级 模块版本level 搜 css spec ）
  • 体系化学习？CSS mdn参考，辣么多，请三思
  • 文档流（Normal Flow）
  • 盒模型（[Content | Border] Box）
  • xx层叠 Cascading Style Sheet？样式表（进行样式声明）
    • 样式重叠（多次对同一选择器）
    • 选择器重叠（用不同选择器对同一元素）
    • 文件重叠（多个文件）

样式层叠覆盖，CSS极度灵活，wiki上CSS採納的困難（不正交 属性、缺乏唯一性，即属性和呈现样式不一一对应确定）

浏览器相关的几个网站

浏览器业界毒瘤（QQ、百度），扛把子UC，新星夸克

  • CanIUse 看数据时不用翻译，看注释时用
  1. Edge 对 calc() within grid 支持不好
  2. Safari 仍然不支持intrinsic and extrinsic sizing with grid 的属性 grid-template-rows

体系化学CSS？若不自*，也可成功 ⇧

TL,DR 在CSS新知识到来的时候，马上学会

写CSS必须学会先 ⇧

  • 引入方式 + 语法（写代码）
  • 调试（哪写错）
  • 查资料（为了抄）
  • 标准制定者

在线临时调试playground： ↓

调试CSS ⇧

在线代码调试平台 § ⇧

部分平台注册用户才可使用

对比

平台 是否需注册 支持代码嵌入 支持代码分享 支持代码下载 推荐
码上掘金 √ x √ √ 🌟🌟🌟🌟🌟
stackblitz √ √ √ √ 🌟🌟🌟🌟
jsfiddle √ × √ √ 🌟🌟🌟
playcode √ × √ √ 🌟🌟🌟
jsbin ~ √ √ √ 🌟🌟🌟
liveweave √ × √ √ 🌟🌟🌟
codesandbox √ √ √ √ 🌟🌟🌟
codepen √ √ √ √ 🌟🌟🌟

参考

CSS调试方法 ⇧

  • 使用W3C验证器（命令行工具），麻烦 不用
  • VSCode看颜色（semi-colon;前）大概的位置，不精确，不智能
  • WebStorm看颜色 （精确定位错误；智能提示）
  • 使用浏览器自带的开发者工具看警告
  • 搜索 css xxx generator 来调试效果
  • 配合使用注释进行二分法调试

eg. google css gradient generator css shadowbox generator

使用浏览器开发者工具调试CSS的使用步骤 ⇧

  • 定位元素：用指针找到元素
  • 看它是否有选择器
  • 看它的样式是否被划掉（⚠️黄色三角警告 + 删除线 + 提示非法值 invalid property value ）
  • 被其他样式覆盖或写错
  • 看它的样式是否有警告
  • 使用 Element 选项卡，查看右侧 Styles 面板，可以在 element.style 的代码块中写调试 css 代码（不刷新，刷新后失效）

border/outline 调试法 ⇧

步骤 ⇧

  • 定位某个元素有问题
  • 给这个元素加border
  • border没出现？选择器或语法错了，拼错
  • border出现了，看看边界是否符合预期
  • bug解决了才可以把border 删掉
  • 逐行移动border:1px solid red;看选择器是否生效；属性匹配到哪个属性了；具体哪个属性失效；
  • 可以用outline:1px solid red代替，仅用在当border-box的border干扰宽度的时候，调试用，但有时可能在外面会看不见，也可用背景色代替
  • 加到VSCode 等IDE的snippets里，每次省个几秒：border大法好，用border得永生，现已加入snippets豪华套餐
  • 好像和Emmet想到一块去了：emmmet bd
  • 其实如果学了SCSS的@mixin的话…

注意 ⇧

  • CSS的border调试法就相当于JS的console.log调试法
  • 请重复使用

可以在开发者工具里样式上加一段：

1
2
3

* {
  border:1px solid red;!important
}

  • 但border 会增加元素的大小，改为使用outline

    1
2
3

    * {
outline: 1px solid red;!important
}

  • 可以查看元素是否对齐

Emmet 语法 ⇧

CSS常见错误 ⇧

低级错误

  • 拼写错误（选择器、属性名、属性值）
  • 大小写
  • 漏掉分号
  • 非英文符号
  • 反花括号漏掉
  • 没写单位

排除错误：推理，把正确可能性排除，剩下的无论看起来多对，肯定有错

  • 现代浏览器中 CSS 错误 静默无效化处理
  • IDE 中会有错误提示

非低级错误 ⇧

  • 没有

CSS查资料 ⇧

网站 ⇧

书籍 ⇧

  • 不推荐，以练习为主

搜练习素材（注意版权及商用法律风险） ⇧

PSD ⇧

效果图（可能不提供下载，肉眼，或工具扒） ⇧

仿商业网站(排名按喜好>分>先>后) ⇧

hobby:

tech blog:

勿沉迷临摹 ⇧

  • 每个类型临摹一两个即可
  • PC站、移动端、UI套件
  • 再多无益

WB不超过一年半，don’t repeat yrself

CSS标准制定者：你爵士和耐先生 ⇧

规范是你遇到问题用来查的——字典级文档

CSS 存在哪些问题？ ⇧

大致过一遍CSS，尽量学习SCSS

当使用CSS时，我们经常在一个全局环境设置，这样可能会错误地设置元素的样式。

自定义CSS(即使有CSS变量)仍然是非常冗余的。

CSS不是为我们今天所拥有的那种复杂的架构设计的， 组织大型样式表确实很有压力。

在另一个样式表中导入一个样式表的问题，这可能会导致一个非常大的样式库，没有适当的文档可能无法理解它。

为什么预处理程序很重要，并特别强调SASS及其将规则组合在一起的能力。

使用SASS为设计现代web组件提供了一种更合理的方法。

如何将样式划分为更小的特定组件，而不必强迫用户下载大量不需要的CSS文件。

在使用CSS的时候，我们经常需要修改样式来实现预期的要求

保持类的作用域以避免意外地设置样式有时候有的很累。

即使引入了CSS变量以减少声明的重复，但使用预处理器仍可以解决变量的一些问题。

例如：较长的变量名。

即使有了CSS3，我们仍然需要依赖一些技巧来设计用户界面的样式，在编写HTML时，嵌套和可视化层次结构样式有助于理解，但这是常规 CSS 做不到。

快速上手SCSS

使用 SCSS 重构所有CSS demo 来学习

开始CRM学习法 ⇧

抄-运行-改

·未完待续·

参考文章 ⇧

相关文章 ⇧

  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名