网站开发时CSS的3个运用技巧

 目前网站开发时CSS是主要的样式构成方法。因此对于CSS的运用是每个设计人员都要掌握的技能，但大家在使用时是否考虑过网站CSS的大小？因为如果样式表太大，则可能会延迟页面呈现，从而影响到用户的浏览效果，尤其是一些移动设备访问居多的网站。 不过我们有些方法可以帮助大家解决此类问题,今天我们要讲的网站开发时CSS的3个运用技巧中就有大家想要的答案。

1.网站开发时使用浅选择器

 使用浅选择器除了帮助保持您的CSS苗条，浏览器还将更快地呈现浅选择器所针对的元素。浏览器从右到左读取选择器。选择器越深，浏览器渲染和重新呈现应用这些选择器的元素所需的时间就越长。对于经常回流的复杂DOM，短选择器也可以减少jank。

理想情况下，您希望选择器尽可能浅，但这并不意味着您应该将所有内容都舍弃。有时您需要额外的特异性来扩展组件。取得适当的平衡，但也要务实。

2.使用CSS的速记属性

 首先大家要明白一点使用速记CSS可以加快您的网站速度，这不仅方便，还增加了组件的灵活性。如果修改了基础字体属性的任何其他部分，则这些更改将渗透到更大的显示。这对于新上下文需要不同处理的组件覆盖非常有用。例如假设您有一个标题元素，需要更改较大显示的字体大小。在这种情况下您应该使用更具体的font-size属性：

3.开发时使用预加载资源提示

 一般使用CSS预加载资源时可以在HTML中将其设置为<link>标记，或者作为服务器配置中的HTTP标头，在这两种情况下，preload都为浏览器提供了加载/css/styles.css的先机。在HTTP标头中使用preload是首选，因为这意味着浏览器将在响应标头中更早发现提示，而不是稍后在响应正文中发现。在HTTP标头中使用预加载的另一个原因是它将在大多数HTTP / 2实现上启动服务器推送事件。服务器推送是一种机制，通过该机制，在对内容进行请求时，资产被抢先推送到客户端，并且它提供类似于内联CSS的性能优势。