主题CSS样式表规划与编码规范

CSS写起来并不困难,主要麻烦其实在于CSS样式表的规划:怎么去安排规则出现的位置,何时需要分开写,何时将几个规则写在一起;哪些样式应该放在一块,哪些样式可以分开成多个样式表进行选择加载。只要一个Web项目需要维护,未来需要更新,样式表的规划问题就是个头疼的问题,而为WordPress设计主题就必须考虑这个问题。

这里可以先学习参考WordPress默认主题Twenty Eleven的样式表规划方案。

首先是样式表是否需要切分的问题,而这个主题的样式表将除admin界面外,所有的规则涵括在内,即该主题任意页面载入的样式表都是这一份。显然对于这个minimal设计的默认主题是适合的,因为大部分页面的样式本就相似,基本没有特殊的样式需要注意。

其次是样式表内如何划分的问题。这份样式表并没有完全按照头部,中部,左边,右边等方位来进行样式分块,而是按照功能块进行划分。功能划分如下:

  1. css reset规则(直接引用Eric Meyer著名的reset规则);
  2. 布局规则(各种页面的大体布局规则集中于此,类名下只有与布局相关的规则,以决定页面框架);
  3. 全局规则(包括选择的默认字体信息与背景样式,h标题样式,各种文字显示相关标签的样式,表格样式,链接样式以及帮助文字样式几个部分);
  4. header规则(页面题头部分的规则);
  5. menu规则;
  6. 正文规则(包括文章标题,说明,正文,评论正文等规则,同时也包括图片,作者信息,评论链接的显示规则,对于诸如link,aside等文字为主的post format的标题也在这里定义规则);
  7. 特殊post format的规则;
  8. 特殊的page规则(包括attachment页的规则);
  9. 翻页导航的规则;
  10. 小工具的规则;
  11. 评论功能相关的规则(评论正文样式前面已经定义,这里主要是评论的完整样式以及发表框样式);
  12. 底部规则(包括版权信息,以及底部小工具的规则);
  13. media查询的规则(包括print规则);
  14. ie兼容的规则;

个人制作主题规划方案遵循上面的规则,但是对于自定义的类名与id名称需要特别的考虑。这里参考这篇文章进行名称选择。由于已经使用HTML5的新元素,因此结构方面的元素不需要考虑使用什么类名,而wordpress本身也默认采用了些类名,比如正文的包装器类名为entry-content。

这里还有一个class名称的集合可以作为参考:

about 关于
account 账户
action 操作
ad,advertisment 广告
arrow 箭头图标
article 文章
aside 边栏
audio 音频
avatar 头像
background 背景
banner 条幅,广告
bar
branding 品牌化
breadcrumbs 面包屑
button 按钮
caption 标题,说明
category 分类
chart 图表
clearfix 清除浮动
close 关闭
column
comment 评论
community 社区
container 容器
content 内容
copyright 版权
current 当前态,选中态
default 默认
description 描述
details 细节
disabled 不可用
entry 文章,博文
error 错误
even 偶数,常用于多行列表或表格中
fail 失败(提示)
feature 专题
fewer 收起
field 用于表单的输入区域
figure
filter 筛选
first 第一个,常用于列表中
footer 页脚
forum 论坛
gallery 画廊
group 模块,清除浮动
header 页头
help 帮助
hide 隐藏
hightlight 高亮
home 主页
icon 图标
information 信息
last 最后一个,常用于列表中
links 链接
login 登录
logout 退出
logo 标志
main 主体
menu 菜单
meta 作者、更新时间等信息栏,一般位于标题之下
module 模块
more 更多(展开)
msg,message 消息
nav,navigation 导航
next 下一页
nub 小块
odd 奇数,常用于多行列表或表格中
off 鼠标离开
on 鼠标移过
output 输出
pagination 分页
popup 弹窗
preview 预览
previous 上一页
primary 主要
progress 进度条
promotion 促销
recommendations 推荐
register 注册
save 保存
search 搜索
secondary 次要
section 区块
selected 已选
share 分享
show 显示
sidebar 边栏,侧栏
sign in 登录
sign up 注册
slide 幻灯片,图片切换
sort 排序
sub 次级的,子级的
submit 提交
subscribe 订阅
subtitle 副标题
success 成功(提示)
summary 摘要
summit 提交
tab 标签页
table 表格
text 文本
thumbnail 缩略图
time 时间
tips 提示
title 标题
video 视频
wrap 容器,包,一般用于最外层
wrapper 容器,包,一般用于最外层
打赏作者
提交看法

抢沙发

还没有评论,你可以来抢沙发