首頁 > web前端 > H5教程 > 一个有 15 个页面的项目怎么规范 css 样式?

一个有 15 个页面的项目怎么规范 css 样式?

WBOY
發布: 2016-06-07 08:42:14
原創
1539 人瀏覽過

现在我这边有两种思路。
第一:就是把整个项目的css样式都写在同一个样式文件里。好处:只请求一次. 坏处:样式越多越乱,怕class命名冲突,之后难以维护
第二:每个页面都单独一个样式文件,打开相应的页面加载相应的样式文件,因为是用angularjs开发,用的是路由加载。每个样式文件都放在模板里的。 好处:易维护,防止命名冲突,可读性好。坏处:请求太多
不知道以上哪个方法比较好?请各位 说说。。或者你们有更好的方式请分享下。。谢谢

回复内容:

如果是我,做15个页面,不会先考虑 CSS 样式文件怎么分割,而是先通读视觉稿,把所有类似的、可复用的部分划分出来,抽出结构和样式做成模块。达到一段 HTML 代码、一段 CSS 样式,粘贴到任意位置都正常。

抽出模块之后,再思考怎么管理就很方便了。

在开发阶段,可以用 SCSS 等来开发,这样可以直接将模块分成单独的 CSS 文件,import 进来,比较清晰。

补充几个资料:

1. 类似项目的经验总结 近期几个项目总结
2. 推荐的HTML大体框架结构命名,方便填充分好的模块 section-wrap 和 section 的 HTML 结构和命名方式
3. Sass 资料 Sass 进阶 | 于江水 要是我就两个css文件,一个base.css存共用的以及通用模块的样式,再每个页面存独立的样式。
当然,使用sass、postcss等工具进行模块化再import进来就更好了。 写在同一个css比较好点,其实公用的会比较多,不用模块化 构建一个Angular项目的CSS大体上基本都是,建立相应模块,在模块的基础上建立对应的CSS,同时需注意CSS的重复使用,使用varibles,mixins和extend Extending Sass Without Creating A Mess等,对这一类的CSS需抽离出来。
同时,最好建立一个这个项目专属的Grid system而不是用Bootstrap,个人比较喜欢的一个轻量级的库Jeet Grid System

例一:
将对应的Scss放到相应的Angular的模块当中,然后统一用compass(gruntjs/grunt-contrib-compass · GitHub)打包并且编译成单个CSS,
如图,只有与booking这个模块相关的Scss才可以放在booking/css这个文件夹中。同时,其他通用Scss文件应放在主文件下,在这个例子中是app文件夹。

一个有 15 个页面的项目怎么规范 css 样式?

还有一种方式,是根据每一个页面来建立相对应的CSS而不是模块,这种方法更适用于静态网站(俗称:切图)上。尽可能模块化每一段CSS,遵循BEM规范bem.github.io/bem-metho,views这个文件夹里就是把每个页面的CSS独立开了,像在common这个文件里的Scss都是可以被重复利用的。

例二:
一个有 15 个页面的项目怎么规范 css 样式?
然后import所有Scss到styles.scss里,最后只要Compass编译这一个文件就行了:

<code class="language-scss"><span class="k">@import</span> <span class="s2">"jeet/index"</span><span class="p">;</span>

<span class="cm">/* -- reset -- */</span>

<span class="k">@import</span> <span class="s2">"reset/reset"</span><span class="p">;</span>

<span class="cm">/* mixins */</span>

<span class="k">@import</span> <span class="s2">"mixins/*"</span><span class="p">;</span>

<span class="cm">/* common */</span>

<span class="k">@import</span> <span class="s2">"common/*"</span><span class="p">;</span>

<span class="cm">/* partials */</span>

<span class="k">@import</span> <span class="s2">"partials/*"</span><span class="p">;</span>

<span class="cm">/* views */</span>
<span class="k">@import</span> <span class="s2">"views/*"</span><span class="p">;</span>

<span class="cm">/* fontawesome */</span>
<span class="k">@import</span> <span class="s2">"fontawesome/*"</span><span class="p">;</span>
</code>
登入後複製
写一个页面,看起来不头大嘛?一般来说用less sass来import即可,所有css都组件化即可…… 写的时候分开写,上线时用gulp压缩成一个文件
很明显 CSS Module 主要还是看这几个页面相似度如何,很相似的话,建议用两个文件,一个公用,一个把每个页特定的样式整合;
如果差异很大,还是都分开写吧,一个页一个样式;
less啥的我不会 就不瞎支招了 就一个CSS文件就行 可以用gulp等工具将css何必!也可以用sass写import到一个文件
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板