简体繁体 English

最佳实践CSS-SASS

[英]Best practice CSS - SASS

原文 2016-08-16 09:13:43 5 2 css/ sass

I am looking to the wisdom of the crowd for views on best practice for implementing CSS. 我希望从人群中获得智慧，以获取有关实现CSS的最佳实践的观点。

Our site was initially built using SASS compilers for CSS. 我们的网站最初是使用SASS CSS编译器构建的。 Over time as more functionality has been added, each with specific styles, the CSS files and partials have become large. 随着时间的流逝，添加了更多功能，每种功能都有特定的样式，CSS文件和局部文件也变得很大。 Loading all CSS for the entire site seems a waste of resources and time, particularly when a large percent is not utilised on any given page. 加载整个站点的所有CSS似乎是浪费资源和时间，尤其是当在给定页面上未使用很大百分比的时候。 However I am still told that this is more efficient than either inline styles or CSS style blocks within the page. 但是我仍然被告知，这比页面中的内联样式或CSS样式块更有效。

I am currently considering stripping down everything but core CSS to the SASS CSS file and then creating a series of specific CSS files that are loaded as required. 我目前正在考虑将除核心CSS之外的所有内容都剥离到SASS CSS文件中，然后创建一系列根据需要加载的特定CSS文件。

How have others approached this problem. 其他人如何处理这个问题。 Is there a consensus on the "best practice" when CSS files become large? CSS文件变大时，关于“最佳实践”是否达成共识？

Thanks 谢谢

D d

2 个解决方案

You can write SASS only for specific parts of your site and load styles for specific pages only. 您只能为网站的特定部分编写SASS，并且只能为特定页面编写加载样式。 For example you don't have to load styles for product list when you are on product page. 例如，当您在产品页面上时，不必加载产品列表的样式。 In the meantime you can have global stylesheet for something like menu, footer. 同时，您可以为菜单，页脚等设置全局样式表。

Loading styles inline or in block prevents styles from caching and makes your user download it each time they open website. 内联或成块加载样式可防止样式缓存，并使您的用户在每次打开网站时都下载样式。

This is the perfect opportunity to clean up your styles and start fresh. 这是清理样式并重新开始的绝佳机会。 I would reccomend you create layout.scss for styles used in all pages, and component_X.scss for specific component styles. 我会建议你创建layout.scss在所有页面使用的样式，并component_X.scss特定组件样式。