当我们开发前端应用时，对于样式与 CSS 性能的调优也是非常重要的。本文将为大家介绍如何在 Angular 6 中进行样式编写和 CSS 性能调优，以实现更好的用户体验。
样式编写
在 Angular 6 中，我们可以使用 Angular CLI 来创建项目，并可以通过 src/styles.css 文件来定义全局样式。除此之外，我们还可以使用 components 文件夹下的 .scss 文件来定义组件样式。
全局样式
我们通常会为所有页面定义一些共同的样式，例如网站的标识和颜色等。这些样式可以在 src/styles.css 文件中进行定义。
例如，我们可以定义以下样式：
-- -------------------- ---- -------
-- ----- --
--------------- --------
-- ------ --
---- -
------------ ---------- ------ -----------
----------------- --------
-
------ -
----------------- ---------------
------ -----
-
- -
------ --------
---------------- -----
-
-- --------- --
------ ------ --- ----------- ------ -
---------- -
---------- -----
-
--- --- --- --- --- -- -
---------- -----
----------- -----
-------------- -----
-
-组件样式
除了全局样式之外，我们还可以在 components 文件夹下为每个组件定义单独的样式。
例如，我们为一个名为 thumbnail 的组件定义以下样式：
-- -------------------- ---- ------- -- ------------------------ -- ----- - -------- ------ -------------- ----- - ---------- - --------- --------- --------- ------- -------------- ---- ----------- - --- - ------- -- -- ----- - ---------- --- - -------- ------ ------ ----- ------- ----- - ---------- -------- - --------- --------- ------- -- ----- -- ------ -- ------- ----- -------- ----- ----------------- ------- -- -- ----- ------ ----- ----------- ------- - ---------- -------- -- - ----------- -- -------------- ----- ---------- ----- - ---------- -------- - - -------------- -- ---------- ----- -
CSS 性能调优
在进行样式编写的同时，我们也要注意 CSS 性能调优，以便提升页面加载和渲染速度。以下是一些常见的 CSS 性能调优方法：
避免不必要的选择器
在 CSS 中，选择器是影响性能的主要因素之一。我们应该避免使用不必要的选择器，只选择必要的元素。
例如，以下的选择器会造成不必要的性能损耗：
-- -------------------- ---- ------- -- ------- -- ------- - -- - ---------- ----- - -- ------------ -- - - ------- -- -------- -- -
避免使用 !important
在 CSS 中，!important 的优先级比其他样式更高，因此我们应该避免过度使用它。
例如，以下样式会降低性能并使代码难以维护：
/* 不要过度使用 !important */
.box {
margin: 10px !important;
padding: 20px !important;
background-color: #fff !important;
}避免使用 inline 样式
在 HTML 中，我们可以通过为元素添加 style 属性来设置内联样式。但是，在实际开发中，我们应该尽量避免使用内联样式，而是使用外部样式表进行样式定义。这样可以分离样式与内容，并提高代码的可维护性。
使用 CSS Sprites
使用多张小图片会增加页面的 HTTP 请求次数，从而降低页面加载速度。我们可以通过使用 CSS Sprites 来将多张小图片合并成一张大图片，从而减少 HTTP 请求次数。这样可以提高页面加载速度并减少带宽的使用。
例如，以下的 CSS Sprites 可以将 5 张小图片合并成一张大图片：
-- -------------------- ---- ------- ----- - -------- ------------- ------ ----- ------- ----- ----------- ------------------ ---------- - ------ - -------------------- - -- - ------ - -------------------- ----- -- - ------ - -------------------- ----- -- - ------ - -------------------- ----- -- - ------ - -------------------- ----- -- -
结论
在 Angular 6 中进行样式编写和 CSS 性能调优是非常重要的。通过避免不必要的选择器、避免使用 !important、避免使用内联样式以及使用 CSS Sprites 等方法，可以优化页面的渲染速度，并提高用户的体验。我们应该关注页面的性能参数，并不断优化它们，以便获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671d78429babaf620fb667ae