css模块化
来源:互联网 发布:中国保健品网络推广 编辑:程序博客网 时间:2024/05/15 14:52
- 模块化定义
我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立、互相作用的组件,来处理复杂、大型的软件。看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感。那么css模块化思想,也就是在css编写环境中,用上模块化的思想,把一个大的项目,分解成独立的组件,不同的组件负责不同的功能,最后把模块组装,就成了我们要完成的项目了。 - 模块化命名
要实现css模块化需要很多步,今天我们就说说第一步,命名。
看别人的代码,就好像进入对方的军事基地一样,要想里面的武器用的得心应手,首先得知道每个武器的名字,假如你的武器都是取的不三不四,那么就算来到了基地,估计也不敢动你的武器了,更别提战斗了,所以,要规范我们在css中的命名,尽量做到团队成员能一看就懂。
css命名上的优化可以分为css文件名的命名,以及css选择器的命名。 css样式文件名:
1)
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
2)
reset.css // 对浏览器的默认样式进行重设
layout.css // 管理页面的布局
typeset.css // 图文的编排
color.css // 统一管理颜色的搭配
print.css // 打印效果样式
ie.css // 把对ie的hack单独分开
3)
reset.css
header.css // 头部的所有样式
container.css // 除头部/底部外的中间区域样式
footer.css // 底部样式
print.css
ie.css
4)
reset.css /页面样式充值/
header.css /全站头部样式/
footer.css /全站尾部样式/
public.css /全站公共模块样式/
index.css /首页特有样式/
container.css /二级及以下主体样式/
print.css /打印样式/
ie.css /IE hack/
等等
还是那句话,没有最好的命名方式,只有最合适的命名方式。主要就是从html结构和bug的快速定位和便于其他成员的修改上去考虑。
假如你的网站是新闻类的门户网站,然后html的结构就主要是布局,版面 layout.css ,专栏 columns.css ,文字 font.css ,打印样式 print.css 就比较适合,因为跟html很一致,也很契合。
假如是企业官网的话,一般html结构都是头和尾都有标准的,所以与html结构最契合的就是第三种了,同时我们可以优化第三种,在container里面再分类,分成common,layout,就方便进一步的修改,至于common里就可以放入font,color一些公用的样式。
没有完美的生活,也没有完美的人,所以也没有完美的文件命名,只有尽量做到与html布局契合,然后重在从每次的项目中反省,总结,条条大路通罗马,能抓住老鼠的就是好猫。
css选择器的命名:
规范css选择器的命名,是个老生常谈的问题,对它的规范,不仅是模块化实现的一环,便于团队开发,同时也规避了一些兼容性的麻烦。因为各个浏览器,IE,火狐,谷歌,safari
,每个浏览器,IE产品,火狐,safari,coogle Chrome,都会因为命名不规范会产生不同样式..
常用的css命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:register
状态:status
投票:vote
合作伙伴:partner
(二)注释的写法:
/* Header */
内容区
/* End Header */
(三)id的命名:
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop(如购物车)
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guide
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font10px { font-size: 10px; }
.font6pt {font-size: 6pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }
注意事项::
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写;
我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。
特别是class命名:
class 名称中只能出现小写字符和连字符(不是下划线,也不是驼峰命名法)。连字符应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。
避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
class 名称应当尽可能短,并且意义明确。
使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。
基于最近的父 class 或基本(base) class 作为新 class 的前缀。
使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。
- css模块化
- css模块化
- css模块化
- css模块化
- CSS模块化开发
- CSS技巧: 模块化编码
- css 模块化规范bem
- CSS实现模块化效果
- 模块化的CSS
- CSS模块化命名
- CSS模块化基本思想
- 【转】理解CSS模块化
- 【react】CSSModule css模块化
- css模块化开发
- css 模块化实践
- 从css谈模块化
- React 样式: CSS模块化
- 模块化CSS的一些看法
- 在Qt Quick中一个简单Hello World加载过程
- linux命令学习3
- SAP已发票校验采购订单退货
- 测试对象的等价性
- 线程同步基本概念+实现线程同步的2种方法(无代码示例)
- css模块化
- python之socket
- Android中RecyclerView实现瀑布流图片显示
- 登陆窗体的实现
- Linux之初学命令
- Android中Home键的监听和拦截
- linux遇到的问题(1)
- 在浏览器中输入网址到网页展现全部过程
- HRBUST1153-意外