命名原则:
原则1:前缀+后缀
应用名 + 标签功能
原则2:应用功能 > 布局功能
关于命名中的位置名:left,right,center,middle,top,bottom
如果该元素的主要用途就是定位,那么可以选择这几个词,非常明确。
如果该元素可以用功能名足够表达,则不使用定位名。
原则3:能给个id ,就给个id吧。
原则4:没有container概念
因为:html里都是一层套一层,大家都是container。
单词分隔符:减号
不采用任何驼峰命名法:原因:太长了,看不清。
不得采用任何下划线。原因:不对称,不好看。
大小写
全小写。原因:大写多了太吓人。
图片名的后缀命名
首先是用图片的视觉效果命名,然后再考虑下面的:
-icon.* 单个图标
-icons.* 多个图标
-button.* 单个button
-buttons.* 多个button
-logo.* LOGO
-item.* 某一项
-page.* 整个页面的背景
-head.* 头部的背景
-tail.* 尾部的背景
-banner.* 条幅(多用于广告)
-tab.* 标签盒的标签背景
-tabpanel.* 标签盒的标签主体背景
-l-t-corner 左上角
-r-t-corner 右上角
-l-b-corner 左下角
-r-b-corner 右下角
-l-border 左边框
-r-border 右边框
-t-border 上边框
-b-border 下边框
-text 图片型文字
-cover 封面图,一般用于新闻的图片,或首页的大中图
那hover的图呢?
hover的图一半与原图放在同一个图片文件中
用不用-bg
能用上述表达的,就不用bg,毕竟css里都是bg
常用css名
.button 普通button
.text 普通正文
.link 普通链接
.portlet-box
.portlet-head-box
.portlet-body-box
.portlet-title-box
.portlet-icon-box
关于h1,h2,h3的使用 ???(还不确定)
h1与h2尽量不使用
模块如果需要heading,用h3
常用ID名
#page-head-box
#page-head-top-box
#page-head-top-left-box
#page-head-top-right-box
#page-head-middle-box
#page-head-middle-left-box
#page-head-middle-center-box
#page-head-middle-right-box
#page-head-nav-box
#page-head-nav-list
#page-head-menu-box
#page-head-menu-list
#page-head-menu-home-item
#page-head-menu-news-item
#page-head-menu-about-item
#page-menu-box
#page-menu-home-item
#page-menu-news-item
#page-menu-about-item
#page-body-box
#page-body-left-box
#page-body-center-box
#page-body-right-box
#news-portlet-box
#faq-portlet-box
#page-tail-box
#article-box
#arricle-title-box
#article-info-box
#article-body-box
#last-articles-box
#last-articles-list
一些混淆名词的约定,不使用缩写
pg page
l left
r right
m middle
mid middle
c center
btn button
li list
img image
ico icon
top head 当head已经被用过后用top
center middle 水平用center,垂直用middle
tail bottom 党tail已经被用过后用bottom
常用后缀规则
body
-body
div
-box
-head-box
-body-box
-tail-box
-left-box
-right-box
-center-box
-middle-box
-portlet-box
-image-box
-icon-box
-tools-box
-buttons-box
-sidebar-box
-nav-box
-search-box
-content-box
-msg-box
-title-box
-tip-box
-status-box
ul
-menu
-list
li
-item
-menu-item
-listitem
h1,h2,h3,h4,h5
-heading
span,label
-label
-title-label
a
-link
-button
image
-image
-icon
-button
button,input[type="button"]
-button
form
-form
input[type="text"]
-textinput
input[type=checkbox]
-check
input[type=radio]
-radio
select
-select
option
-option
分享到:
相关推荐
常用的CSS命名规则,和其他程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。
好了不多说了,关于CSS命名法,和其他的程序命名差不多,也是有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。 【骆驼命名法】 说到骆驼大家肯定会想到它那明显的特征,背部的隆起,一高一低的,我们的命名也要...
从上图我们可以大概看出这里有两种CSS的命名方式:1、结构化命名法;2、语义化命名法。 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边,那么这时...
术语一个微型的网络应用程序,可帮助您练习无机化学命名法。 在尝试一下。 由Ben Cook 。 注意:这是为加拿大12年级化学课程编写的,此后我还没有真正学习化学,因此不能保证它是正确的或具有挑战性的。安装这是一个...
全部采用小写驼峰命名 lowerCamelCase,有复数结构时,要采用复数命名法, 缩写不用复数。 JS、CSS、HTML、PNG 文件命名 采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线,也不能以下划线或美元符号结...
class 名称以连字符(-)连接,除了下文提到的 BEM 命名法; 缩进 4 空格; 声明拆分成多行; 声明以相关性顺序排列,而非字母顺序; 有前缀的声明适当缩进,从而对齐其值; 缩进样式集从而反映 DOM; 保留...
业务组件使用 cssModule,通用组件使用 BEM 命名法 小于 8k 图片转为 base64 svg 图标 文件压缩、添加 MD5 ES6+, Fetch 使用 Redux DevTools () 示例动图: 组件 本项目用到的纯组件主要如下: 走马灯 ...
您可以(如果愿意)使用CSS框架,例如 , 或您熟悉的另一个CSS框架,在这种情况下,请遵循您自己的标记,类和其他元素的表示法。 根据W3C验证程序,即和,所有.html和.css页面都必须正确。 新闻类型和配色方案是...
Wakkos SASS框架环境:settings.scss 首先配置...命名法命名约定遵循以下模式: . bloque {} . bloque__elemento {} . bloque--modificador {} “ .block”表示抽象或组件的第一级。 “ .block__element”表示“ .block
鱼和薯条 一个小型图书馆,可将英式英语单词转换为美式英语单词,以便在 HTML 和 ...一般样式指南:文件名小写方法和变量的驼峰式命名法类名的 PascalCase 为任何新的或更改的功能添加单元测试Lint 并测试您的代码。
d3 库使用语义版本命名法(semantic versioning)。 你可以用 d3.version 查看当前的版本信息。 d3 (核心部分) 选择集 d3.select – 从当前文档中选择一系列元素。 d3.selectAll – 从当前文档中选择多项元素。 ...
版心>连字符命名法 内容板块>下划线 css外部样式表: 1.每一个页面都要有自己的样式表 2.一个网站,都拥有公共样式表 3.重置样式的样式表(清除所有默认样式) @charset "utf-8"; reset.css: 清除聚焦边框:...
组件清单文章标头页脚桌子卡片网格形式纽扣清单已订购无序定义标签导航面包屑垂直链接分页制表符媒体数字图像视频声音的模态警报通知工具提示命名法或层次结构描述标头卡片文章Article组件遵循以下约定: -容器...
CSS “float” 属性 获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法...
匈牙利命名法:先写数据类型(数据类型的缩写),在写名字 驼峰命名法:大驼峰(每个单词首字母大写) 小驼峰(每个单词首字母大写,除了第一个单词首字母小写) 先动词后名词:获取:get、设置:set 注释...
2、普通变量名和函数名采用"小驼峰式命名法", 如:firstName、lastName,作为构造函数的函数采用"大驼峰式命名法",如:Person;3、每条语句必须使用分号结尾(特别是需要压缩的js,省略分号常常会导致压缩失败);...
获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法: 复制代码
发展规则:命名语言: 评论=法语; BDD =法语; 代码php / js / html / css =英文; 命名: 所有变量/函数名称均以小写字母开头; 变量/函数的名称没有空格:单词用大写字母分隔(nomDeVariable / nomDeFonction); ...