如果我用 CSS 框架构建了一个应用程序,然后他们更改了样式,我网站的外观会随之改变吗?
If I built an app with a CSS framework, and then they change their styles, would the look of my site change with?
目前正在开发一款应用,希望重建前端。这些可能是愚蠢的问题,但我很好奇这些框架的稳定性,特别是几件事:
如问题中所述,假设这些前端库之一要更新其 UI 组件,这些更改会反映在我的应用程序中还是取决于版本?
如果出于某种原因这些库中的一个在围绕它们构建了整个应用程序之后不复存在或停止贡献,会发生什么?
问题 1
As mentioned in the question, say one of these front end libraries were to update their UI components, would these changes reflect in my app or is it version dependent?
哦,是的,您网站的外观 肯定会 改变。
假设您有这个 CSS 库:
.ui {
font-family:system-ui;
}
body {
background-image:url("/some/image/and/the/file.jpg");
background-attachment:fixed;
}
将此样式应用到您的站点后,您的 HTML 文档正文将具有 /some/image/and/the/file.jpg
.
的背景图像
但是假设库的创建者将其更改为...
@0:0, 20:0;
... <continued>
body {
background-image:url("/some/image/and/the/other/file.jpg");
background-attachment:fixed;
}
这会更改您网站的背景图片。
如果您不能自己尝试,运行 下面的两个片段。
- 代码段#1:
body {
font-family:Monaco, Consolas, monospace;
background-color:blue;
color:white;
overflow:hidden;
}
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
它的背景颜色为蓝色,颜色为白色,字体系列为 Monaco、Consolas、monospace。
- 片段#2(注意变化):
body {
font-family:Consolas, "Courier New", monospace;
background-color:cyan;
color:black;
overflow:hidden;
}
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
在这里,(假设的)库作者将字体系列更改为 Consolas、“Courier New”、等宽字体,将背景颜色设置为青色,并将文本设为黑色。
因为库发生了变化(记住:库也是普通的 CSS 规则集),它们修改的元素也会发生变化。
只是CSS。没有什么花哨。更改 CSS 也会更改其样式的网页,不是吗?
问题 2
If for whatever reason one of these libraries were to cease to exist or cease to contribute, after having built an entire app around them, what would happen?
- 如果他们停止贡献(即继续保持原样并且没有改变),您的应用程序看起来还是一样的。这是因为 CSS 样式( 回想一下,CSS 框架只是规则集的巨大集合)是相同的。
- 如果它们停止工作,那么您的网站将恢复到您设置的样式。让我们尝试从上面的代码片段中删除 CSS:
/* All the styles have been removed! */
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
与HTML一样,只是去掉了CSS。这会导致浏览器回退到默认样式。如果您有自己的样式,这些样式仍会应用。
但什么时候不应用?
- 当您使用 !important 拥有自己的样式时。这会覆盖库。
- 当库影响 none 个元素时。
目前正在开发一款应用,希望重建前端。这些可能是愚蠢的问题,但我很好奇这些框架的稳定性,特别是几件事:
如问题中所述,假设这些前端库之一要更新其 UI 组件,这些更改会反映在我的应用程序中还是取决于版本?
如果出于某种原因这些库中的一个在围绕它们构建了整个应用程序之后不复存在或停止贡献,会发生什么?
问题 1
As mentioned in the question, say one of these front end libraries were to update their UI components, would these changes reflect in my app or is it version dependent?
哦,是的,您网站的外观 肯定会 改变。
假设您有这个 CSS 库:
.ui {
font-family:system-ui;
}
body {
background-image:url("/some/image/and/the/file.jpg");
background-attachment:fixed;
}
将此样式应用到您的站点后,您的 HTML 文档正文将具有 /some/image/and/the/file.jpg
.
但是假设库的创建者将其更改为...
@0:0, 20:0;
... <continued>
body {
background-image:url("/some/image/and/the/other/file.jpg");
background-attachment:fixed;
}
这会更改您网站的背景图片。
如果您不能自己尝试,运行 下面的两个片段。
- 代码段#1:
body {
font-family:Monaco, Consolas, monospace;
background-color:blue;
color:white;
overflow:hidden;
}
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
它的背景颜色为蓝色,颜色为白色,字体系列为 Monaco、Consolas、monospace。
- 片段#2(注意变化):
body {
font-family:Consolas, "Courier New", monospace;
background-color:cyan;
color:black;
overflow:hidden;
}
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
在这里,(假设的)库作者将字体系列更改为 Consolas、“Courier New”、等宽字体,将背景颜色设置为青色,并将文本设为黑色。
因为库发生了变化(记住:库也是普通的 CSS 规则集),它们修改的元素也会发生变化。
只是CSS。没有什么花哨。更改 CSS 也会更改其样式的网页,不是吗?
问题 2
If for whatever reason one of these libraries were to cease to exist or cease to contribute, after having built an entire app around them, what would happen?
- 如果他们停止贡献(即继续保持原样并且没有改变),您的应用程序看起来还是一样的。这是因为 CSS 样式( 回想一下,CSS 框架只是规则集的巨大集合)是相同的。
- 如果它们停止工作,那么您的网站将恢复到您设置的样式。让我们尝试从上面的代码片段中删除 CSS:
/* All the styles have been removed! */
<code>A problem has been detected. This is fake, so Stack Snippets can continue.</code>
<br><br>
<code>Blah blah blah. Please blah blah blah and then blah blah blah.</code>
与HTML一样,只是去掉了CSS。这会导致浏览器回退到默认样式。如果您有自己的样式,这些样式仍会应用。
但什么时候不应用?
- 当您使用 !important 拥有自己的样式时。这会覆盖库。
- 当库影响 none 个元素时。