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

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

然后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到一个文件

类和方法的概念和实例类(Class):用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。方法:类中定义的函数。类的构造方法__init__():类有一个名为init()的特殊方法(构造方法),该方法在类实例化时会自动调用。实例变量:在类的声明中,属性是用变量来表示的,这种变量就称为实例变量,实例变量就是一个用self修饰的变量。实例化:创建一个类的实例,类的具体对象。继承:即一个派生类(derivedclass)继承基类(baseclass)的

jQuery是一种经典的JavaScript库,被广泛应用于网页开发中,它简化了在网页上处理事件、操作DOM元素和执行动画等操作。在使用jQuery时,经常会遇到需要替换元素的class名的情况,本文将介绍一些实用的方法,以及具体的代码示例。1.使用removeClass()和addClass()方法jQuery提供了removeClass()方法用于删除

class是python中的一个关键字,用来定义一个类,定义类的方法:class后面加一个空格然后加类名;类名规则:首字母大写,如果多个单词用驼峰命名法,如【class Dog()】。

背景最近针对公司框架进行关键业务代码进行加密处理,防止通过jd-gui等反编译工具能够轻松还原工程代码,相关混淆方案配置使用比较复杂且针对springboot项目问题较多,所以针对class文件加密再通过自定义的classloder进行解密加载,此方案并不是绝对安全,只是加大反编译的困难程度,防君子不防小人,整体加密保护流程图如下图所示maven插件加密使用自定义maven插件对编译后指定的class文件进行加密,加密后的class文件拷贝到指定路径,这里是保存到resource/corecla

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

在编写PHP代码时,使用类(Class)是一个非常常见的做法。通过使用类,我们可以将相关的功能和数据封装在一个单独的单元中,使代码更加清晰、易读和易维护。本文将详细介绍PHPClass的用法,并提供具体的代码示例,帮助读者更好地理解如何在实际项目中应用类来优化代码。1.创建和使用类在PHP中,可以使用关键字class来定义一个类,并在类中定义属性和方法。

基本的Java类型(boolean、byte、char、short、int、long、float和double)和关键字void通过class属性也表示为Class对象;Class类中booleanisPrimitive():判定指定的Class对象是否表示一个基本类型。包装类和Void类的静态TYPE字段;Integer.TYPE==int.class;Integer.class==int.class;数组类型的Class实例对象:Classclz=String[].class;数组的Clas

Vue报错:无法正确使用v-bind绑定class和style,怎样解决?在Vue开发中,我们经常会用到v-bind指令来动态绑定class和style,但是有时候我们可能会遇到一些问题,如无法正确使用v-bind绑定class和style。在本篇文章中,我将为你解释这个问题的原因,并提供解决方案。首先,让我们先了解一下v-bind指令。v-bind用于将V


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载
最流行的的开源编辑器

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