`
jiasudu1649
  • 浏览: 724608 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

wordpress 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
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center


id的命名

页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

导航

导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
分享到:
评论
1 楼 dagmom 2013-12-30  
http://nec.netease.com/standard/css-name.html(干货)

相关推荐

    WordPress 主题教程 WordPress 模板教程

    - 基本规则:理解WordPress主题的基本架构和命名约定。 - 专业术语:学习与主题相关的词汇,如“模板文件”、“小工具”等。 - 层式结构:熟悉WordPress主题的分层设计,从index.php到footer.php。 - **主题教程...

    wordpress主题制作入门教程

    - **样式表的应用**:利用CSS文件(通常命名为`style.css`)来定义主题的样式,确保符合现代网页设计的标准。 #### 五、进一步学习资源 - **官方文档**:参考WordPress官方网站的开发者文档,获取最新的API和功能...

    从零开始制作WordPress主题教程

    - 在WordPress的`wp-content/themes`目录下创建一个新的文件夹,命名为你的主题名称。 **第3步:创建index.php和style.css文件。** - 在新创建的主题文件夹内创建两个文件:`index.php`和`style.css`。 - `index....

    Wordpress_On_BAE3.5

    - 静态资源的托管:BAE可能有特殊的静态文件处理方式,如CSS、JavaScript和图片,可能需要配置规则或使用CDN服务。 - 错误日志和调试:在BAE环境中,设置合适的错误报告和日志记录有助于问题排查。 - 安全性:由于是...

    wordpress-plugin-源码.rar

    1. 命名规范:遵循WordPress的命名规范,使插件易于识别和管理。 2. 注释清晰:良好的注释有助于理解和维护代码。 3. 性能优化:避免过度使用数据库查询,合理利用缓存,减少不必要的服务器负担。 4. 安全性:...

    bempress:专注于OOCSS的WordPress入门主题

    Bempress主题基于这些原则,提供了良好的类命名规范,使用BEM(Block Element Modifier)方法论,这是一种流行的CSS命名约定。BEM命名规则包括三个部分:Block(块),Element(元素),Modifier(修饰符)。这种...

    wordpress国人胖子马的免费经典主题

    【压缩包子文件的文件名称列表】:“pzima_srtec”可能是指压缩包的内部文件结构或者特定的资源文件名,这通常是开发者为了组织和存储代码而创建的命名规则。在解压后,这些文件通常包含了主题的所有必要组件,如CSS...

    WordPress-YAML-Starter-Theme-wpYAML:带有 YAML CSS 框架和 Sass 的轻量级响应式免费 Wordpress 入门主题

    **YAML CSS框架** 是一个灵活的、模块化的布局系统,它以简洁的HTML结构和易于理解的CSS命名约定为基础。YAML允许开发者构建响应式的网页布局,适应不同设备的屏幕尺寸,从而提供一致的用户体验。在wpYAML中,YAML...

    我们的Wordpress主题样板_JavaScript_PHP_下载.zip

    2. **风格表(style.css)**:每个WordPress主题都需要一个style.css文件,其中包含了定义主题样式的所有CSS规则。这个文件的顶部通常包含一个主题信息区块,定义了主题的名称、作者、版本等元数据。 3. **模板文件...

    Wordpress Unknown模板

    【Wordpress Unknown模板】是一种未被官方识别或未命名的WordPress主题,可能由独立开发者创建,或者是用户自定义设计的结果。这种模板可能不遵循WordPress的标准规范,因此在使用时可能会遇到一些未知的问题和挑战...

    基于PHP的wordpress主题草野时代INITIA源码.zip

    在【压缩包子文件的文件名称列表】中,给出的唯一文件名"132699032903672775"可能是由于隐私保护或文件命名规则,实际的源码包中通常会包含多个文件和文件夹,如风格CSS(style.css)、PHP模板文件(如header.php、...

    简洁风格新闻杂志博客wordpress主题模板4407_html网站模板_网页源码移动端前端_H5模板_自适应响应式源.zip

    该压缩包包含的是一个用于创建新闻杂志或博客网站的WordPress主题模板,命名为“简洁风格新闻杂志博客wordpress主题模板4407”。这个模板是基于HTML5技术构建的,旨在提供一个现代化、用户友好的界面,适合发布新闻...

    PHP实例开发源码-wordpress 灰色主题.zip

    2. **132676267007373890**:这是一个看似随机命名的文件,根据其扩展名不明显,可能是WordPress主题的某个组成部分,如样式表(.css)、脚本文件(.js)、模板文件(.php)或其他资源文件。文件名可能代表时间戳,...

    大气精品互联网科技商务企业wordpress主题模板6063.zip

    响应式设计通常通过CSS媒体查询实现,根据不同的屏幕尺寸应用不同的样式规则。 "html"文件可能包含主题的基础结构,如页眉、主体内容区域、页脚等。它们用HTML标签定义,这些标签告诉浏览器如何解析和显示内容。 ...

    内容:使用现代开发工作流程的灵活而强大的WordPress入门主题

    缩小和压缩JavaScript文件使用“我可以使用”中的值将供应商前缀添加到CSS规则生成JavaScript和CSS源映射通过ESLint进行代码整理扩展WordPress CSS类以使用BEM命名约定任务完成的通知反馈先进的wp-config.php基本...

    基于PHP的个性单栏wordpress博客主题.zip

    【标题】"基于PHP的个性单栏WordPress博客主题"是一个专为WordPress平台设计的...WordPress的PHP主题通常遵循一定的结构和命名规范,以便与平台无缝集成,同时提供了丰富的文档和支持社区,方便开发者和用户解决问题。

    WordPress轻语QUX主题源码

    源码中的每个部分都有明确的命名和位置,如header.php、footer.php分别代表头部和底部代码,functions.php包含了主题功能的实现,style.css则负责样式控制。这样的结构使得主题的维护和扩展变得简单易行。 总的来说...

    PHP实例开发源码-WordPress主题:M6.zip

    4. **样式表**:`style.css` 文件包含了主题的CSS样式,决定了网页的布局和视觉效果。开发者通常会在这里使用PHP的条件标签来实现不同页面的差异化样式。 5. **自定义页面模板**:通过创建如 `template-custom....

    wordpress主题制作

    - 在WordPress安装目录下的`wp-content/themes/`文件夹内新建一个文件夹,命名为你的主题名。 - 例如,如果主题名为“mytheme”,则路径应为`wp-content/themes/mytheme/`。 2. **创建基本文件**: - **index.php...

Global site tag (gtag.js) - Google Analytics