css样式管理

时间:2023-03-10 06:20:57
css样式管理

css命名

传统网站页面(企业级),大概就是about,product,register等,他们的名字较好区分,他们的样式整体也不会很大,用简单的驼峰法就够了,或者简单的模块。

非传统企业页面,命名驼峰法不够用,项目一当大了,会有多个首页

就拿新浪的页面来说,它的体育块的所有页面,完全可以单独出一个项目,单独有一个单独的样式库。

根据这个原则,业主方电梯管家,小区贴吧,投票等等,如果单独做成一个css文件style,那么这个文件的样式无限庞大,你又为了避免css选择器的冲突,你又不得添加不同css选择其命名(常规的命名就那么多),还要保证的你的样式语义化,那么结果来看,你的css选择命名就会格外累赘。

从几个大型的网站的页面,你看到了采用了不同css选择器和文件命名

常规的单词,这里不举出来。

建站开始初,我们看看站点关系

css样式管理

我们可以发现站点和其他页面的关系,通常是不会超过三个的层级,通常两个横杆就能解决(你在仔细点,就不就是类,那么就应该遵循一个过程,那就封装复杂,结构简单。) 下面把红色(或绿色)框叫做一个类。

横杆-

1.表示页面名字,用于页面布局中的大块(btf布局原则的大块);

例子:新浪的体育的奥运的金牌主页面

sport-ay-glod //这是大型的网站的小木

而我们是小型的项目采用另陪,一种做法

将sport单独出去,这个时候这个页面的命名就变成ay-glod,并且有自己专属的css样式库sport.css

2.表示某个页面的大块,如a-g-hd,a-d-bd,a-d-ft,a-d-main,a-d-main等,而这些样式全部只在sport.css文件中

3.你可能也发现了新浪的页面的所有的评论的页面是同一个样式,那么是不是可以放在common.css,但是我们如果有兼容问题,那么兼容的样式放在哪里。而解决兼容性公共css文件,在此项目项目任何页面都可用,这才是严格意义上的common文件。那该如何做?参考以下做法

common.css去解决兼容样式

unit.css(或tools.css)样式

sport.css 表示体育的页面的样式

vedio.css 表示视频页面样式

shop.css 表示购物的页面样式

当然,这上面的站点层级关系只是三层而已。如果四层,五层,六层等,就的采用新的规则

4.另外一个问题,多人同时做一个项目。

首先,必须得保证风格一样,那么注释就应该严谨,做法如下:

每个页面的样式对应的注释的就应该是文件名字

如: 电梯管家-评价.html //注释为/*电梯管家-评价*/

5.项目更新问题

那么的页面名字在后面加上1

如;电梯管家-评价1.html

6.管理的问题

没有什么特殊情况下,单独某一类只有一个人负责。即使有人插手,也只负责这个类,对其他类,不能干涉。