建立一个好的前端架构是开始开拓Web运用或网站的一个基本步骤。良好的实践和编码常规是必不可少的，但是构造呢？我们如何在可控的韶光内构思一个好的架构？但最主要的事情是，我们该当从哪里开始？
我想要一个多页面项目（一个Web运用或网站）；我希望我的项目支持不同的屏幕尺寸和分辨率，换句话说，我希望它是相应式的；我希望终极产品是可被掩护的；我希望终极产品性能上是出色的；我希望可以为将来的项目重复利用相同的模板。
现在我们拥有大量很酷的工具可以用于当代化前端开拓事情流中。因此，面对第1、2点我见告自己我须要一个基于CSS体系构造的中断点（能够帮我支持不同的设备和桌面的大小）。而另一个方面大量的CSS和文件可能会有点混乱（这违背了第3点），这便是为什么我决定开始利用CSS预处理器的缘故原由。关于第4点，答案很大略，我决定利用Gruntjs。而第5点在我看来Yeoman是一个很好的办理方案。
组织事情流
每个前端项目总是包含库、jQuery插件和大量的JavaScript&CSS文件（或本文例子中的SCSS）以达到不同的目的和目标。利用不同的技能手段稠浊所有的元素，并把它们放在一起，这意味着建立一个前端事情流。我们会创造自己在管理一个巨大的、涉及不同技能的事情流。这便是为什么我们须要将所有东西通过遵照一种模式或公约置入文件夹中，以此来保持清晰、整洁。这对我们而言是非常主要的。
我们可以在巨大的组合中选择分解所有基本的前端组件，如以下所示：
当然我们还可以连续细分：
SCSS
variables（变量）mixins（稠浊类）公共部分到每一个布局单一布局js
库（如：jquery、angularjs、gAnalytics等等）插件（常日为jquery插件）掌握器（我的意思是类似angularjs这样的掌握器）在一个基于模板的架构（例如利用blade.php或jade with nodejs）我们也可以将视图分割如下：
views
视图这块在本文不做谈论，由于我假设项目里每个页面或布局只有一个视图（一个HTML文件）。
基于这些初步的考虑，下面展示的是我的文件夹树：
文件夹树表明
imgs
存放所有的图片文件：.png、.jpg、.jpeg、壁纸等。
示例：icon.png、home-background.jpeg、userAvatar.jpg。
js（主文件夹）
存放.js文件。子文件夹组织情形如下：
\controllers（子文件夹）
存放angular掌握器，每一个掌握器都有一个与对应视图相同的名字。比如，如果home.html须要一个angular掌握器，你可以创建一个像这样的文件：project\js\controllers\home.js。
示例：home.js、user-registration.js、user-login.js
\libs（子文件夹）
用于存放JavaScript库，当然这里不包含插件。
示例：jquery-latest.js、angular.js、googleAnalytics.js
\plugins（子文件夹）
插件须要依赖关系来事情，而库不须要，这也便是为什么这里创建两个文件夹的缘故原由。
示例：jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js
\views（子文件夹）
存放所有表象的东西，每个文件都与对应的视图名称相同。例如，如果home.html须要一些效果、材料以及插件初始值，你可以创建一个像这样的文件：project\js\views\home.js。
示例：home-animations.js、user-registration.js、user-login.js、site-animations.js
CSS（主文件夹）
这个文件夹包含了所有从主SCSS文件中天生的CSS。例如home.scss会在该文件中天生对应的home.css文件。
\libs（子文件夹）
纵然是对CSS文件，我也会区分库和插件，这里有些CSS库例子。
示例：_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss
\plugins（子文件夹）
CSS文件包含于该文件夹中是使JavaScript插件事情的必备风格。
示例：_jquery-fancyInput.scss、_jqueryTooltip.scss
\framework （子文件夹）
我决定在这个目录中存放scss文件以共享到全体项目页面，框架子文件将以下面的办法组织：
_variables.scss（项目变量声明——colors、spacings等）_mixins.scss（项目mixin声明——typography、clearfix、animations等）_forms.scss（自定义表单样式和重置）_input.scss（自定义输入样式和重置）\layouts (子文件夹)
这是一个敏感的部分。这个目录中的文件以这种办法组织：它们涵盖所有屏幕分辨率、遵照移动第一的原则。以是，你该当利用_all.scss声明你自己的风格。在该文件中的规格声明是对所有屏幕尺寸和所有视图都有效的。如果你希望你的网站适应性强的话，就不要仅仅是重写规则，为其他屏幕分辨率声明它们。
文件夹组织构造如下：
phablets (481up) _phablets.scsstablets and small laptops (768up) _tablets.scssdesktops (1030up) _desktop.scssdesktops with large screens (1204up) _desktop-large.scssretina displays exceptions (@2x) _retina.scss这些文件将把握布局非常，被称为mediaqueries。
请把稳：这些文件共享于所有视图（HTML页面）。这便是为什么你须要在scss\layouts文件下创建一个新的文件夹以给定一个特定的风格到一个特定的页面。
末了
我知道这不是一个普遍的办理方案，大概在某些情形下还会包含一些冗余，但我认为这是一个很好的出发点。不管目的是什么，我的建议是根据自己的需求定制自己的体系构造或框架，特殊是在不丢失用户体验的条件下保障性能和可掩护性。（编译：陈明）
编者注：关于文件夹树构造可查看详情，当然你也可以下载。
原文来自：sitepoint
