最后的最后——CSS自问自答

最后更新于2年前

最后的最后——CSS自问自答

关于 Css 的相关问题总结

最后更新时间 2019 年 11 月 24 日

如何解决 css 命名问题?

使用有意义的或通用的 ID 和 Class 命名。ID 和 Class 的命名应反映该元素的功能或使用通用名称，而不要用抽象的隐晦的命名。反应元素的使用目的是首选；使用通用的名称代表该元素不表示特定的意义，与其同级元素无异，通常是用于辅助命名，使用通用性或通用的名称可以更适用于文档或模板变化的情况。

从性能上考虑应该尽量减少选择器的层级。

display:none 和 visibility: hidden 的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

rem 与 em 的区别

rem 是根据根的 font-size 变化，而 em 是根据父级的 font-size 变化
rem：相对于根元素 html 的 font-size，假如 html 为 font-size：12px，那么，在其当中的 div 设置为 font-size：2rem,就是当中的 div 为 24px
em：相对于父元素计算，假如某个 p 元素为 font-size:12px,在它内部有个 span 标签，设置 font-size：2em,那么，这时候的 span 字体大小为：$12*2=24px$

img 中 alt 和 title 的区别

图片中的 alt 属性是在图片不能正常显示时出现的文本提示。

图片中的 title 属性是在鼠标在移动到元素上的文本提示。

position 的 absolute 与 fixed 共同点与不同点

共同点：
- 改变行内元素的呈现方式，display 被置为 block
- 让元素脱离普通流，不占据空间
- 默认会覆盖到非定位元素上
不同点：
absolute 的”根元素”是可以设置的
fixed 的”根元素”固定为浏览器窗口。当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。

transition 和 animation 的区别

animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值

他们的主要区别是

transition 需要触发一个事件才能改变属性，
animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation 可以一帧一帧的。
transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始
animation 指定要绑定到选择器的关键帧的名称

less,sass,stylus 三者的区别

变量

作用域

Sass

声明变量必须是$开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。

三者最差，不存在全局变量的概念

Less

声明变量用@开头，其余等同 Sass。

最近的一次更新的变量有效，并且会作用于全部的引用！

Stylus

中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有等号 =。

Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；

嵌套
- 三种 css 预编译器的选择器嵌套在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同
继承
- Sass 和 Stylus 的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用@extend开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。
- Less 则用伪类来描述继承关系；
导入@Import
- Sass 中只能在使用 url() 表达式引入时进行变量插值
- $device: mobile; @import url(styles.#{$device}.css);
- Less 中可以在字符串中进行插值
- @device: mobile; @import 'styles.@{device}.css';
- Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
- device = "mobile"; `@import "styles." + device + ".css"`

总结

Sass 和 Less 语法严谨、Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus
Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用

link 与@import 区别与选择

<style type="text/css">
  @import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

link 功能较多，可以定义 RSS，定义 Rel 等作用，而@import 只能用于加载 css；
当解析到 link 时，页面会同步加载所引的 css，而@import 所引用的 css 会等到页面加载完才被加载；
@import 需要 IE5 以上才能使用；link 是 HTML 标签，无兼容问题
link 可以使用 js 动态引入，@import 不行
link 属于 HTML 标签，而 @import 是 CSS 提供的
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载
link 方式的样式的权重高于 @import 的权重.

CSS 函数复用代码,实现特殊效果

主要目标

面向组件
- 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件
沙箱化
- 如果一个组件的样式会对其他组件产生不必要以及意想不到的影响,那么将 UI 分割成组件并不会对我们的认知负荷起到帮助作用
方便
- 我们不想因为采用这个架构而让我们的开发者体验变得更糟,可能的话,我们想变得更好
安全性错误
- 我们想要的所有东西都可以默认局部化,并且全局化只是一个特例

具体规则

总是类名优先
不要去使用 ID 选择器,因为每当你认为某样东西只会有一个实例的时候,在无限的时间范围内,你都将被证明是错的。同样也不应该直接使用元素选择器。通常对于一个属于组件的元素使用元素选择器是可以的,但是对于元素本身来说,最终你将会为了一个不想使用它们的组件,而不得不将那些样式给撤销掉。如果你这么选择的话,那么在body上设置一些像字体,行高以及颜色的属性(也叫可继承属性),对这个规则来说也可以是一个特例,但是如果你真正想做到组件隔离的话,那么放弃这些也完全是可行的。所以在极少特例的情况下,你的样式应该总是类名优先
组件代码放在一起
当使用一个组件的时候,如果所有和组件相关的资源都可以非常紧密的放在一起,那就更好了
使用一致的类命名空间(app-Component-class)
CSS 对类名及其他标识符(如 ID、动画名称等)都有一个独立扁平的命名空间。不管我们选择怎样的命名空间规范,我们都想要通过它保持一致性。只需要看一下类名,就可以知道它属于哪里了。这样的命名空间将成为我们浏览项目样式的地图。
维护命名空间和文件名之间的严格映射
所有影响一个特定组件的样式都应该放到一个文件里,并以组建命名。
避免组件外的样式泄露
我们已经建立了自己的命名空间规范,并且现在想使用它们去沙箱化我们的 UI 组件,如果每个组件都使用加上它们唯一的命名空间前缀的类名,那我们就可以确定它们的样式不会泄露到其他组件中去。这是非常高效的,但是不得不反复输入命名空间也会变得越来越冗长乏味。
一个健壮,且仍然非常简单的解决方案就是将整个样式文件包装成一个前缀。
```
.myapp-Header {
   background: black;
   color: white;

     &-link {
     color: blue;
     }

     &-signup {
     border: 1px solid gray;
     }
 }
```
避免组件内的样式泄露
将所有样式包装到一个命名空间里对于隔离组件及其领居组件来说,是个高效的方式,但却不能总是和其子组件隔离
这个问题可以通过两种方法修复
- 绝不在样式表中使用元素名称选择器
- 在命名空间之外只是用>操作符来选择元素

如何构建结构清晰的 Css？

首先了解一下 BEM

BEM 的意思是块(block)、元素(element)、修饰符(modifier)，是由 Yandex 团队提出的一种前端命名方法论，这种巧妙的命名方法让 Css 类对其他开发者来说更加透明而且更有意义。

命名约定的模式如下:

.block {
} //块
.block__element {
} // 块中的元素
.block--modifier {
} // 修饰符 用来定义块或元素的外观和行为

BEM 不是一个框架，它只是一种思想

BEM 优缺点
- 优点: BEM 的优点在于所产生的 Css 类名都使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特性都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。
- 缺点:Css 类名会比较长而且复杂。但实际上在熟悉了命名规则之后，可以很容易理解其含义。

我们再看一下 OOCSS (面向对象 CSS)

OOCSS 表示的是面向对象 CSS (Object Oriented CSS),是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。OOCSS 最关键的一点是：提高他的灵活性和可重用性。OOCSS 主张是通过在基础组件中添加更过的类，从而扩展基础组件的 CSS 规则，从而使 CSS 有更好的扩展性。

我们有一个容器是页面 page 的 1/4 宽，有一个蓝色的背景，1px 灰色边框，10px 的左右边距，5px 的上边距，10px 的下边距。使用 OOCSS 的话，我们把这个容器创建更多的类，并且每个样式对应一个类，这样是为了后面可以重复使用这些组件的样式，避免重复写相同的样式。

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>

<style>
  . size1of4 {
    width: 25 %;
  }

  . bgBlue {
    background: blue;
  }

  . solidGray {
    border: 1px solid #ccc;
  }

  . mts {
    margin-top: 5px;
  }

  . mrm {
    margin-right: 10px;
  }

  . mbm {
    margin-bottom: 10px;
  }

  . mlm {
    margin-left: 10px;
  }
</style>

OOCSS 的优点
- 减少 css 代码
- 具有清洁的 HTML 标记，有语义的类名，逻辑性强的层次关系
- 语义标记，有助于 SEO
- 更好的页面优化，更快的加载时间
- 可扩展的标记和 CSS 样式，有更多的组件可以放到库中，而不影响其他的组件
- 能轻松构造新的页面布局，或制作新的页面风格
OOCSS 的缺点
- OOCSS 适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。
- 如果没有巧妙的使用，创建组件可能对于你来说是一堆没有用的东西，成为烂摊子，给你的维护带来意想不到的悲剧。
- 最好给每一个组件写一份说明文档，有助于调用和维护。

AMCSS(属性模块)

属性模块，其核心就是关于定义命名空间用来写样式。通俗的讲就是，给一个元素加上属性，在通过属性选择器定位到这个元素。打到避免过多的使用 class。

如何按需加载 CSS？

使用 Less 的 Mixin 巧妙解决问题。

如果你想要创建一个混合级，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加上一个括号。

.my-mixin {
  color: black;
}

.my-other-mixin() {
  background: white;
}

.class {
  .my-mixin;
  .my-other-mixin;
}

输出

.my-mixin {
  color: black;
}

.class {
  color: black;
  background: white;
}

不同 API 在不同浏览器下的兼容性情况

请查阅Can I use

上一页想炫吗？—— CSS3 属性下一页万事开头难？——深入学习前端常见布局

最后更新于2年前

关于 Css 的相关问题总结

最后更新时间 2019 年 11 月 24 日

如何解决 css 命名问题?

从性能上考虑应该尽量减少选择器的层级。

display:none 和 visibility: hidden 的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

rem 与 em 的区别

rem 是根据根的 font-size 变化，而 em 是根据父级的 font-size 变化
rem：相对于根元素 html 的 font-size，假如 html 为 font-size：12px，那么，在其当中的 div 设置为 font-size：2rem,就是当中的 div 为 24px
em：相对于父元素计算，假如某个 p 元素为 font-size:12px,在它内部有个 span 标签，设置 font-size：2em,那么，这时候的 span 字体大小为：$12*2=24px$

img 中 alt 和 title 的区别

图片中的 alt 属性是在图片不能正常显示时出现的文本提示。

图片中的 title 属性是在鼠标在移动到元素上的文本提示。

position 的 absolute 与 fixed 共同点与不同点

共同点：
- 改变行内元素的呈现方式，display 被置为 block
- 让元素脱离普通流，不占据空间
- 默认会覆盖到非定位元素上
不同点：
absolute 的”根元素”是可以设置的
fixed 的”根元素”固定为浏览器窗口。当你滚动网页，fixed 元素与浏览器窗口之间的距离是不变的。

transition 和 animation 的区别

animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值

他们的主要区别是

transition 需要触发一个事件才能改变属性，
animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation 可以一帧一帧的。
transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始
animation 指定要绑定到选择器的关键帧的名称

less,sass,stylus 三者的区别

变量

作用域

Sass

声明变量必须是$开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。

三者最差，不存在全局变量的概念

Less

声明变量用@开头，其余等同 Sass。

最近的一次更新的变量有效，并且会作用于全部的引用！

Stylus

中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有等号 =。

Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；

嵌套
- 三种 css 预编译器的选择器嵌套在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同
继承
- Sass 和 Stylus 的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用@extend开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。
- Less 则用伪类来描述继承关系；
导入@Import
- Sass 中只能在使用 url() 表达式引入时进行变量插值
- $device: mobile; @import url(styles.#{$device}.css);
- Less 中可以在字符串中进行插值
- @device: mobile; @import 'styles.@{device}.css';
- Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现
- device = "mobile"; `@import "styles." + device + ".css"`

总结

Sass 和 Less 语法严谨、Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。
Sass 和 Compass、Stylus 和 Nib 都是好基友。
Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus
Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用

link 与@import 区别与选择

<style type="text/css">
  @import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

link 功能较多，可以定义 RSS，定义 Rel 等作用，而@import 只能用于加载 css；
当解析到 link 时，页面会同步加载所引的 css，而@import 所引用的 css 会等到页面加载完才被加载；
@import 需要 IE5 以上才能使用；link 是 HTML 标签，无兼容问题
link 可以使用 js 动态引入，@import 不行
link 属于 HTML 标签，而 @import 是 CSS 提供的
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载
link 方式的样式的权重高于 @import 的权重.

CSS 函数复用代码,实现特殊效果

主要目标

面向组件
- 处理 UI 复杂性的最佳实践就是将 UI 分割成一个个的小组件
沙箱化
- 如果一个组件的样式会对其他组件产生不必要以及意想不到的影响,那么将 UI 分割成组件并不会对我们的认知负荷起到帮助作用
方便
- 我们不想因为采用这个架构而让我们的开发者体验变得更糟,可能的话,我们想变得更好
安全性错误
- 我们想要的所有东西都可以默认局部化,并且全局化只是一个特例

具体规则

总是类名优先
不要去使用 ID 选择器,因为每当你认为某样东西只会有一个实例的时候,在无限的时间范围内,你都将被证明是错的。同样也不应该直接使用元素选择器。通常对于一个属于组件的元素使用元素选择器是可以的,但是对于元素本身来说,最终你将会为了一个不想使用它们的组件,而不得不将那些样式给撤销掉。如果你这么选择的话,那么在body上设置一些像字体,行高以及颜色的属性(也叫可继承属性),对这个规则来说也可以是一个特例,但是如果你真正想做到组件隔离的话,那么放弃这些也完全是可行的。所以在极少特例的情况下,你的样式应该总是类名优先
组件代码放在一起
当使用一个组件的时候,如果所有和组件相关的资源都可以非常紧密的放在一起,那就更好了
使用一致的类命名空间(app-Component-class)
CSS 对类名及其他标识符(如 ID、动画名称等)都有一个独立扁平的命名空间。不管我们选择怎样的命名空间规范,我们都想要通过它保持一致性。只需要看一下类名,就可以知道它属于哪里了。这样的命名空间将成为我们浏览项目样式的地图。
维护命名空间和文件名之间的严格映射
所有影响一个特定组件的样式都应该放到一个文件里,并以组建命名。
避免组件外的样式泄露
我们已经建立了自己的命名空间规范,并且现在想使用它们去沙箱化我们的 UI 组件,如果每个组件都使用加上它们唯一的命名空间前缀的类名,那我们就可以确定它们的样式不会泄露到其他组件中去。这是非常高效的,但是不得不反复输入命名空间也会变得越来越冗长乏味。
一个健壮,且仍然非常简单的解决方案就是将整个样式文件包装成一个前缀。
```
.myapp-Header {
   background: black;
   color: white;

     &-link {
     color: blue;
     }

     &-signup {
     border: 1px solid gray;
     }
 }
```
避免组件内的样式泄露
将所有样式包装到一个命名空间里对于隔离组件及其领居组件来说,是个高效的方式,但却不能总是和其子组件隔离
这个问题可以通过两种方法修复
- 绝不在样式表中使用元素名称选择器
- 在命名空间之外只是用>操作符来选择元素

如何构建结构清晰的 Css？

首先了解一下 BEM

BEM 的意思是块(block)、元素(element)、修饰符(modifier)，是由 Yandex 团队提出的一种前端命名方法论，这种巧妙的命名方法让 Css 类对其他开发者来说更加透明而且更有意义。

命名约定的模式如下:

.block {
} //块
.block__element {
} // 块中的元素
.block--modifier {
} // 修饰符 用来定义块或元素的外观和行为

BEM 不是一个框架，它只是一种思想

BEM 优缺点
- 优点: BEM 的优点在于所产生的 Css 类名都使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特性都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。
- 缺点:Css 类名会比较长而且复杂。但实际上在熟悉了命名规则之后，可以很容易理解其含义。

我们再看一下 OOCSS (面向对象 CSS)

OOCSS 表示的是面向对象 CSS (Object Oriented CSS),是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。OOCSS 最关键的一点是：提高他的灵活性和可重用性。OOCSS 主张是通过在基础组件中添加更过的类，从而扩展基础组件的 CSS 规则，从而使 CSS 有更好的扩展性。

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>

<style>
  . size1of4 {
    width: 25 %;
  }

  . bgBlue {
    background: blue;
  }

  . solidGray {
    border: 1px solid #ccc;
  }

  . mts {
    margin-top: 5px;
  }

  . mrm {
    margin-right: 10px;
  }

  . mbm {
    margin-bottom: 10px;
  }

  . mlm {
    margin-left: 10px;
  }
</style>

OOCSS 的优点
- 减少 css 代码
- 具有清洁的 HTML 标记，有语义的类名，逻辑性强的层次关系
- 语义标记，有助于 SEO
- 更好的页面优化，更快的加载时间
- 可扩展的标记和 CSS 样式，有更多的组件可以放到库中，而不影响其他的组件
- 能轻松构造新的页面布局，或制作新的页面风格
OOCSS 的缺点
- OOCSS 适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。
- 如果没有巧妙的使用，创建组件可能对于你来说是一堆没有用的东西，成为烂摊子，给你的维护带来意想不到的悲剧。
- 最好给每一个组件写一份说明文档，有助于调用和维护。

AMCSS(属性模块)

属性模块，其核心就是关于定义命名空间用来写样式。通俗的讲就是，给一个元素加上属性，在通过属性选择器定位到这个元素。打到避免过多的使用 class。

如何按需加载 CSS？

使用 Less 的 Mixin 巧妙解决问题。

如果你想要创建一个混合级，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加上一个括号。

.my-mixin {
  color: black;
}

.my-other-mixin() {
  background: white;
}

.class {
  .my-mixin;
  .my-other-mixin;
}

输出

.my-mixin {
  color: black;
}

.class {
  color: black;
  background: white;
}

不同 API 在不同浏览器下的兼容性情况

请查阅Can I use