当前位置： 正文

CSS近20年的发展历史

2024-10-08 IT技术 71

理解原理才能更好的理解现象。如有错误，欢迎指正～ （截止到发文时间）

css开始的地方

CSS（层叠样式表）的历史背景可以追溯到20世纪90年代。最初，HTML被设计为一种用于创建纯文本文档的语言，并不具备复杂布局的能力。随着Web的发展，开发者开始需要更灵活的方式来控制页面的外观和布局。

  • 在CSS出现之前，网页布局通常使用HTML表格，这种方法将内容和表现混合在一起，导致代码难以维护。
  • CSS的出现推动了内容（HTML）和表现（CSS）的分离，使得开发者可以更灵活地控制网页的外观。

CSS 1、2、3（只是简单样式）

  • CSS1在1996年由W3C发布，提供了基本的样式定义能力。
  • 随着时间的推移，CSS2（1998）和CSS3（1999）相继发布，引入了更多的功能和特性，如媒体查询、动画、渐变等。其中，CSS2引入了一些新的选择器和属性，CSS3引入了，如媒体查询、动画、渐变等。

至此，css代码常为如下样式。

    <style>
        
        ul > li {
            color: blue;
        }
    style>
<body>
    <ul>
        <li>Item 1li>
        <li>Item 2li>
    ul>
body>

///CSS3
    <style>
        
        .gradient-box {
            width: 100px;
            background: linear-gradient(to right, red, yellow);
        }
    style>
<body>
    <div class="gradient-box">div>
body>

CSS浮动、Flexbox 和 Grid （加入布局）

浮动布局（Float Layout）

  • 诞生时间：浮动布局是CSS1的一部分，最早在1996年引入。
  • 历史背景：最初设计用于图文混排，让文字环绕图片。然而，开发者发现可以利用浮动来创建复杂的网页布局。这种方法在早期Web开发中非常流行，但随着布局需求的增加，其局限性也逐渐显现，如清除浮动和垂直对齐问题。
  • 特点：元素按顺序浮动，可能需要手动清除浮动。
  • 使用场景：简单的水平排列，早期网页布局常用。

布局如图：

+-------------------------------+
| [Box 1] [Box 2] [Box 3]       |
+-------------------------------+

Flexbox布局（Flexible Box Layout）

  • 诞生时间：Flexbox最早的草案出现在2009年，成为CSS3的一部分，并在2012年左右得到广泛支持和应用。
  • 历史背景：Flexbox旨在解决浮动布局的一些不足之处，特别是垂直方向的对齐和分布问题。它提供了一种更加直观和灵活的方式来排列容器中的元素，适合一维布局（单行或单列）。
  • 特点：灵活的对齐和分布，支持垂直和水平居中。
  • 使用场景：需要动态调整元素大小和对齐的布局。

布局如图：

+-------------------------------+
| [Box 1]   [Box 2]   [Box 3]   |
+-------------------------------+

Grid布局（Grid Layout）

  • 诞生时间：Grid布局的草案于2011年首次提出，并在2017年被大多数现代浏览器广泛支持。
  • 历史背景：Grid布局是CSS的一项重要进步，提供了二维布局能力，可以同时处理行和列。这使得创建复杂的网页布局变得更加简单和直观。Grid布局允许开发者定义行和列的大小、间隔以及元素如何在网格中排列。
  • 特点：支持复杂的二维布局，行和列的控制更加精细。
  • 使用场景：复杂的网页布局，如面板、仪表盘等。
+-------------------------------+
| [Box 1] [Box 2] [Box 3]       |
| [Box 4] [Box 5] [Box 6]       |
+-------------------------------+

CSS的预处理-Sass和Less

CSS预处理器如Sass和Less的出现是为了克服CSS在大规模项目中的一些局限性，如：

  1. 缺乏变量

问题：标准的CSS不支持变量，这意味着相同的颜色、字体大小等需要在多个地方重复定义，增加了维护的复杂性。

解决：预处理器允许定义变量。例如，在Sass中可以定义一个颜色变量，然后在整个样式表中使用它

$primary-color: #3498db;

.button {
  background-color: $primary-color;
}
  1. 无法嵌套选择器

问题：CSS不支持嵌套，这使得编写层次结构复杂的选择器变得繁琐且难以管理。

解决：预处理器支持嵌套规则，使得选择器的关系更加清晰：

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
  }
}
  1. 缺乏复用机制

问题：CSS中没有原生的复用机制，这意味着样式代码可能会被大量重复。

解决：预处理器提供了混入（mixins）和继承功能，允许样式的复用：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

它们提供了一些编程特性，使得CSS的编写更加模块化、可维护和高效。

Sass

  • 诞生时间：Sass于2006年由Hampton Catlin创建，并由Natalie Weizenbaum继续开发。
  • 历史背景：Sass是最早的CSS预处理器之一，旨在为CSS增加变量、嵌套、混入（mixins）、继承等特性。Sass最初使用缩进语法（也称为Sass语法），后来添加了更类似CSS的SCSS语法，以便于开发者过渡。
  • 特点：支持变量、嵌套规则、混入、继承、函数等。Sass文件需要编译为标准的CSS文件才能在网页中使用。

Sass 示例

Sass有两种语法：缩进语法（Sass）和SCSS语法。SCSS语法与CSS更相似，这里我们以SCSS语法为例：


$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}


.button {
  font-family: $font-stack;
  background-color: $primary-color;
  @include border-radius(5px);
}


.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

Less

  • 诞生时间：Less于2009年由Alexis Sellier创建。
  • 历史背景：Less与Sass类似，但一开始更注重与现有CSS的兼容性。Less引入了变量、嵌套、混入和运算等特性。Less的一个显著特点是它可以在客户端或服务器端进行编译。
  • 特点：与CSS的语法非常接近，容易上手。支持变量、嵌套、混入、运算等。Less文件同样需要编译为CSS文件。

Less的语法与CSS非常相似，以下是一个简单的示例：


@primary-color: #3498db;
@font-stack: Helvetica, sans-serif;


.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}


.button {
  font-family: @font-stack;
  background-color: @primary-color;
  .border-radius(5px);
}


.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

Sass 和 Less 的区别

  1. 语法差异：

    • Sass有两种语法：缩进语法和SCSS语法。SCSS语法与CSS非常相似，而缩进语法则不使用大括号和分号。
    • Less的语法与CSS非常相似，使用@符号定义变量。

  2. 变量符号：

    • Sass使用$符号定义变量。
    • Less使用@符号定义变量。

  3. 混入（Mixin）调用：

    • 在Sass中，混入通过@include调用。
    • 在Less中，混入通过直接调用类名的方式实现。

  4. 函数和运算：

    • 两者都支持函数和运算，但Sass提供了更多内置函数和更强大的功能。

  5. 编译工具：

    • Sass需要使用Ruby环境（或LibSass、Dart Sass）进行编译。
    • Less可以在客户端编译（通过JavaScript）或使用Node.js编译。

CSS后处理器 – PostCSS

PostCSS是一种工具，用于将CSS转换为JavaScript插件。它的出现是为了提供一种灵活的方式来处理CSS，通过插件的机制来实现各种功能。PostCSS与CSS预处理器（如Sass和Less）不同，它更关注于CSS的后处理阶段，可以在CSS生成后进行优化和增强。

PostCSS 的发展历史

  • 诞生时间：PostCSS由Andrey Sitnik于2013年创建。
  • 背景：最初，PostCSS是为了提供一种更灵活的方式来处理CSS。与传统的预处理器不同，PostCSS的设计目标是通过插件来实现各种功能，这使得它非常模块化和可扩展。
  • 发展：随着时间的推移，PostCSS已经成为一个强大的工具，支持各种插件来实现不同的功能，如自动添加浏览器前缀、CSS变量处理、未来CSS特性的转译等。

PostCSS 的作用

  1. 插件系统：PostCSS的核心是其插件系统。每个插件都是一个功能模块，可以执行特定的任务，如自动添加浏览器前缀（Autoprefixer）、转换现代CSS特性（如CSS Grid）为兼容的代码等。
  2. 灵活性和可扩展性：由于PostCSS的功能是通过插件实现的，开发者可以根据需要选择和组合不同的插件。这种灵活性使得PostCSS可以适应各种项目需求。
  3. 现代CSS特性：PostCSS可以通过插件支持未来的CSS特性，这意味着开发者可以在当下使用这些特性而不必等待浏览器的全面支持。
  4. 性能优化：PostCSS可以用于优化CSS文件，如压缩代码、去除未使用的CSS、合并相似的选择器等。
  5. 集成工具链：PostCSS可以与其他工具（如Webpack、Gulp、Grunt）无缝集成，成为现代前端构建流程的一部分。

通过输出文件处理

处理完成后，output.css文件将包含自动添加的浏览器前缀：


.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
  • PostCSS CLI：使用postcss-cli命令行工具来处理CSS文件。
  • Autoprefixer：这是一个PostCSS插件，用于根据目标浏览器自动添加必要的CSS前缀。
  • 配置文件：postcss.config.js用于定义需要使用的插件。

生动例子说明为什么要postCSS

想象你是一位时尚设计师

你正在为一场盛大的时尚秀准备服装。在设计服装的过程中，就好比你在编写 CSS 来为网页设计样式。

假设没有 PostCSS：

你可能会花费大量的时间手动调整每一件服装的尺寸、颜色搭配和细节。比如，你想要确保所有的纽扣大小一致，所有的缝线颜色协调，这需要你一件一件地仔细检查和修改，非常耗时耗力。而且如果时尚潮流发生变化，比如突然流行起更窄的裤脚或者更大的领口，你就得重新逐一修改每一件服装，这会让你的工作变得异常繁琐。

现在有了 PostCSS：

它就像是你的超级助手。比如说，你可以使用插件来自动调整所有服装的尺寸，确保它们符合特定的标准。如果潮流变化，你只需要调整一下插件的设置，它就会自动为所有的服装进行相应的修改。

例如，有一个自动添加浏览器前缀的插件，就好比你的助手会自动为不同品牌的缝纫机（不同的浏览器）准备好合适的线和针法（添加特定的前缀），这样你的服装在各种品牌的缝纫机下都能制作得完美无瑕（在不同的浏览器中显示一致）。

再比如，有一个清理和优化 CSS 的插件，就像你的助手会帮你整理杂乱的布料和线头（去除不必要的 CSS 代码），让你的设计更加简洁高效。

总之，PostCSS 可以大大提高你的工作效率，让CSS 代码更加规范、易于维护，并且能够适应不同的环境和需求，就像一位超级助手让你的时尚设计之路更加顺畅。

生动例子说明为什么要SASS/ LESS 和后处理 postCSS

Sass/Less（预处理）：

想象你在建造一座房子。Sass 和 Less 就像是在房子建造之前的规划和准备阶段。

  • 变量定义：比如你决定房子的主色调是蓝色，你可以在 Sass/Less 中定义一个变量$mainColor: blue;。这就好比你在规划阶段确定要用蓝色的油漆、蓝色的窗帘等。在整个建造过程中，只要你提到这个主色调，就会自动使用蓝色。如果后期想改变颜色，只需要修改这个变量的值，所有使用这个颜色的地方都会随之改变。

  • 嵌套规则：类似房屋的结构设计，你可以把相关的元素嵌套在一起。比如，你可以把客厅的沙发、茶几等元素的样式嵌套在.livingRoom这个选择器下，就像在设计房屋布局时把客厅的各个部分组织在一起，让代码结构更加清晰，也更容易理解和修改。

PostCSS（后处理）：

当房子建造完成后，进行的装修和优化阶段就是 PostCSS 的作用。

  • 自动添加浏览器前缀：假设你给房子安装了一些高科技的电器设备，但不同品牌的设备可能需要特定的兼容性设置。PostCSS 就像一个智能助手，会自动给你的 CSS 规则添加浏览器前缀，确保你的网页在各种浏览器中都能正常显示，就如同给电器设备添加适配不同品牌的插件，让它们在不同的环境下都能正常工作。

  • 清理和优化代码：就像装修房子时清理多余的杂物和优化空间布局一样，PostCSS 可以清理不必要的 CSS 代码，去除重复的部分，让你的 CSS 文件更加简洁高效，减少文件大小，提高加载速度。

总的来说，Sass/Less 在 CSS 编写的前期提供了更强大的语法和功能，帮助你更高效地组织和规划样式；而 PostCSS 则在 CSS 生成后进行进一步的处理和优化，确保最终的 CSS 在各种环境下都能表现良好。

CSS框架 与 CSS设计模式

  1. 定义

  • CSS 框架：

    • CSS 框架是一组预定义的样式和组件，旨在简化和加速网页开发。它们提供了结构、布局和常用组件的样式，帮助开发者快速构建一致的用户界面。例如，Bootstrap、Tailwind CSS 和 Bulma。

  • CSS 设计模式：

    • CSS 设计模式是指在编写 CSS 时使用的一些最佳实践和方法论。这些模式帮助开发者以更可维护、可扩展的方式组织和管理 CSS 代码。例如，BEM（块、元素、修饰符）、OOCSS（面向对象的 CSS）和 SMACSS（可伸缩和模块化的架构）。
  1. 目的

  • CSS 框架：

    • 旨在提供现成的解决方案，以减少开发时间，提高一致性和响应式设计的实现。

  • CSS 设计模式：

    • 旨在提供结构化的方法来编写和组织 CSS，使代码更易于维护、理解和扩展。
  1. 互补性

CSS设计模式 – （BEM、CSS in JS）

  1. OOCSS（面向对象的CSS） ：

    • 提出者：Nicole Sullivan

    • 时间：2009年左右

    • 核心思想：分离结构和皮肤，分离容器和内容。OOCSS鼓励使用可重用的、可组合的CSS类。

    • 优点：

      • 代码可重用性高。
      • 易于维护和扩展。

    • 缺点：

      • 初学者可能难以理解。
      • 需要更多的HTML类。

  2. SMACSS（可扩展和模块化的CSS） ：

    • 提出者：Jonathan Snook

    • 时间：2011年

    • 核心思想：将CSS分为五个类别：基础、布局、模块、状态和主题。SMACSS强调样式的可扩展性和模块化。

    • 优点：

      • 提供了灵活的结构，适用于大多数项目。
      • 易于扩展和维护。

    • 缺点：

      • 需要遵循严格的分类，可能增加复杂性。

  3. BEM（块、元素、修饰符） ：

  4. Atomic CSS：

  5. CSS in JS：

CSS in JS

CSS in JS是一种将CSS样式与JavaScript逻辑紧密结合的技术。它的出现是为了应对传统CSS在动态应用中的一些限制，尤其是在现代前端框架（如React、Vue等）兴起后，CSS in JS逐渐成为一种流行的样式管理方式。

  1. 早期探索（2010年代初） ：

    • 在React等框架流行之前，开发者开始尝试将样式与组件逻辑结合，最初的实现较为简单，通常是通过内联样式来实现。

  2. Styled Components（2016年） ：

    • 提出者：Max Stoiber
    • 核心思想：通过使用模板字面量语法，将CSS样式直接写在JavaScript中，创建可重用的组件。Styled Components使得样式与组件的逻辑紧密结合，支持动态样式和主题。

  3. Emotion（2016年） ：

    • 提出者：Kye Hwang和Sophie Alpert
    • 核心思想：提供高性能的CSS in JS解决方案，支持样式的动态生成和主题。Emotion的灵活性和性能使其迅速获得广泛应用。

  4. JSS（2015年） ：

    • 核心思想：以JavaScript对象的形式定义样式，支持动态样式和主题。JSS被广泛应用于Material-UI等库中。

  5. 其他实现：

    • Styled JSX：由Vercel开发，专为Next.js设计，支持局部样式。
    • Linaria：一种零运行时的CSS in JS解决方案，编译时提取样式为CSS文件。

以下是一个使用 Styled Components 的简单 CSS in JS 示例：




import React from 'react';
import styled from 'styled-components';


const Button = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文字 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 去掉下划线 */
  display: inline-block; /* 使按钮与其他元素在同一行 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 鼠标悬停时显示手形光标 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  
  &:hover {
    background-color: #45a049; /* 鼠标悬停时变色 */
  }
`;

const App = () => {
  return (
    <div>
      <h1>Hello, CSS in JS!h1>
      <Button>Click Me!Button>
    div>
  );
};

export default App;

CSS框架发展历史

  1. 早期 CSS 框架（2000年代初） ：

    • Bootstrap：由 Twitter 开发，2011 年发布。Bootstrap 是第一个广泛使用的 CSS 框架，提供了响应式布局和预定义的组件，极大地简化了前端开发。

  2. CSS 预处理器（2010年代初） ：

    • Sass 和 LESS：这些工具允许开发者使用变量、嵌套和混合等功能，使得 CSS 的编写更加灵活和可维护。虽然它们不是框架，但为后来的 CSS 框架奠定了基础。

  3. 实用优先的框架（2010年代中期） ：

    • Tailwind CSS（2017年） ：作为一种实用优先的 CSS 框架，Tailwind 允许开发者通过组合小的类来快速构建 UI，而不是依赖于预定义的组件。这种方法使得样式更加灵活和可定制。

  4. 框架的融合（2020年代） ：

    • 许多现代框架（如 Next.js 和 Vue 3）开始支持 CSS in JS 和实用优先的 CSS 框架的组合使用。开发者可以根据项目需求选择最合适的样式管理方式。

CSS 实用优先的框架框架 – Tailwind CSS为例

  1. 背景与创立
  • 2017 年：Tailwind CSS 由 Adam Wathan 和他的团队创建，目的是提供一种新的 CSS 书写方式，强调实用优先的设计理念。Wathan 希望能通过组合小的类来简化样式的应用，而不是依赖于预定义的组件。
  1. 实用优先的理念
  • Tailwind CSS 的核心思想是“实用优先”（Utility-First），即通过使用大量小的、功能明确的 CSS 类来构建用户界面。这种方法使得开发者能够快速构建和调整样式，提高了灵活性和可定制性。
  1. 早期版本与社区反馈
  • 2017 年 11 月：Tailwind CSS 的第一个版本发布。尽管是一个相对较新的框架，但其设计理念和灵活性很快吸引了开发者的关注。
  • 随着使用者的增加，开发团队积极收集反馈，逐步改进和完善框架。
  1. 版本更新与功能增强
  • 2019 年：发布了 Tailwind CSS 1.0 版本，带来了更好的文档、功能增强和社区支持。此时，Tailwind 开始在前端开发者中获得广泛认可。
  • 2020 年：Tailwind CSS 2.0 发布，添加了新的功能，如 JIT（即时模式），显著提高了构建速度和开发体验。
  1. 扩展与生态系统
  • 随着 Tailwind CSS 的流行，出现了许多与之相关的工具和插件，如 Tailwind UI（提供预构建组件）、Tailwind JIT（即时编译）等，进一步增强了其生态系统。
  • Tailwind CSS 的设计理念也影响了其他框架和工具的开发，推动了实用优先的 CSS 方法在前端开发中的应用。

生动例子解释为什么需要css原子化

想象一下你正在装修一座巨大的魔法城堡。

在没有 CSS 原子化的时候，就好像你每次装修都要自己调配各种颜色的油漆、制作各种形状的装饰部件。比如你想要给一个房间的墙壁刷成蓝色，你得自己准备蓝色颜料、刷子等工具，然后进行涂刷。如果下一个房间也需要蓝色墙壁，你又得重复这个过程。而且如果突然你想改变蓝色的深浅度，又得重新调配颜料，非常麻烦。

而有了 CSS 原子化，就像是有了一个神奇的魔法工具箱。这个工具箱里有各种已经准备好的最小单元的魔法装饰元素。比如有“蓝色小块”代表一种特定的蓝色、“红色小块”代表一种红色、“圆角小块”代表一种圆角样式等等。当你要装修一个房间时，你只需要从这个工具箱里拿出你需要的“蓝色小块”“圆角小块”等元素，轻松组合在一起就可以了。如果之后你想改变颜色，只需要换一个不同颜色的“小块”就行，而不用重新调配整个装饰方案。

在网页开发中也是一样，CSS 原子化将样式拆分成最小的原子单元，比如 .text-red表示红色文字、.rounded表示圆角等。这样在构建网页时，可以快速组合这些原子样式来实现各种复杂的布局和外观，提高开发效率，也方便后期的维护和修改。如果要改变风格，只需要更换一些原子样式的组合，而不用在大量的 CSS 代码中去寻找和修改特定的样式规则。

阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21164，转载请注明出处。
赏 0

猜你喜欢

2024-10-26 425

2024-10-14 228

2024-10-14 177

2024-10-14 132

2024-10-14 121

2024-10-13 150

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？