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

现在我这边有两种思路。
第一:就是把整个项目的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编译这一个文件就行了:

<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>
写一个页面,看起来不头大嘛?一般来说用less sass来import即可,所有css都组件化即可…… 写的时候分开写,上线时用gulp压缩成一个文件
很明显 CSS Module 主要还是看这几个页面相似度如何,很相似的话,建议用两个文件,一个公用,一个把每个页特定的样式整合;
如果差异很大,还是都分开写吧,一个页一个样式;
less啥的我不会 就不瞎支招了 就一个CSS文件就行 可以用gulp等工具将css何必!也可以用sass写import到一个文件
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

H5与HTML5相同吗?H5与HTML5相同吗?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么?H5的功能是什么?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五个版本,它为开发者提供了更强大的工具集,使得创建复杂的网页应用变得更加简单。H5的核心功能包括:1)元素允许在网页上绘制图形和动画;2)语义化标签如、等,使网页结构清晰,利于SEO优化;3)新API如GeolocationAPI,支持基于位置的服务;4)跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接?确定链接目标:获取 H5 页面或应用程序的 URL。创建 HTML 锚点:使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性(可选):根据需要设置 target、title 和 onclick 属性。添加到网页:将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括:使用响应式设计,允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具,在发布前测试兼容性。使用 Polyfill,为旧浏览器提供对新 API 的支持。遵循 Web 标准,使用有效的代码和最佳实践。使用 CSS 预处理器,简化 CSS 代码并提高可读性。优化图像,减小网页大小并加快加载速度。启用 HTTPS,确保网站的安全性。

h5怎么生成链接h5怎么生成链接Apr 06, 2025 pm 12:33 PM

h5页面可以通过两种方法生成链接:手动创建链接或使用短链接服务。通过手动创建,只需复制h5页面的URL即可;通过短链接服务,需将URL粘贴到服务中,然后获取缩短的URL。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能