编写CSS代码时样式命名的规则

   要注意的内容:

  一,命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等)的单词,以避免当状态改变时名称失去意义。

  二,样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号(-)组成。

  ID名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。

  可使用类似下面的规则:

  [模块前缀|类型|作用]_[名称]_[状态|位置]

  约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。

  例:

  通用名词缩写

  设置 set

  成功 suc

  提示 hint

  操作 op

  密码 pw

  菜单 menu

  按钮 bt

  文本 tx

  颜色 c

  背景 bg

  边框 bor

  居中 center

  图标 icon

  弹出 pop

  文本输入框 .input_tx

  密码输入框 .input_pw

  登录密码输入框 .input_pw_login

  日志设置成功提示 .hint_suc_blogset

  相册弹出的设置层 .pop_set_photo

  公共提示 .hint_bg

  文本颜色 .c_tx

  段落文本颜色 .c_tx_p

时间: 2024-11-21 06:25:23

编写CSS代码时样式命名的规则的相关文章

提高编写CSS代码效率的10个习惯

  这篇文章介绍了提高编写CSS代码效率的10个习惯,看了觉得不错,大家可以学习一下.文章底部有原文链接. 1.保持一贯性. 就像其它的任何事一样,值得一直保持一贯性.保持连贯性,而不是想到什么就给id和class命名什么. CSS的级联样式有利于加深你的记忆,而且充分利用样式的继承去设置样式表. 首先声明通用的部分的样式,然后继续声明不通用的.这样当你需要的时候更容易的去覆盖一个特定的样式.因为样式更易于阅读和更具逻辑性,你会发现编写CSS更迅速. 使用一种最是适合你的方式. 复位和覆盖 链接

高效编写CSS代码:WEBJX分享15个CSS开发工具

文章简介:对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 对于Web开发人员来说,好用的CSS工具可以让那些枯燥的工作变得有趣,并且还可以帮你更高效的编写CSS代码,在这里向大家推荐15个必不可少的CSS开发工具和应用. 1. CSS Desk : An online CSS Sandbox 这是一个支持即时预览的在线CSS编辑工具,无需安装任何形式的插件或是软件,就能在线编辑CS

[译] 编写整洁 CSS 代码的黄金法则

本文讲的是[译] 编写整洁 CSS 代码的黄金法则, 原文地址:Golden Guidelines for Writing Clean CSS 原文作者:本文已获作者 Tiffany Brown 授权 译文出自:掘金翻译计划 译者:reid3290 校对者:weapon-xx,bambooom 编写整洁 CSS 代码的黄金法则 要编写整洁的 CSS 代码,有一些规则是应当极力遵守的,这有助于写出轻量可复用的代码: 避免使用全局选择器和元素选择器 避免使用权重(specific)过高的选择器 使用

解决Sublime Text 3编写CSS输入分号时自动提示的问题

自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onLayout源码详尽分析 自定义View系列教程04–Draw源码分析及其实践 自定义View系列教程05–示例分析 自定义View系列教程06–详解View的Touch事件处理 自定义View系列教程07–详解ViewGroup分发Touch事件 自定义View系列教程08–滑动冲突的产生及其处理

在 BigCommerce 我们如何编写 CSS

本文讲的是在 BigCommerce 我们如何编写 CSS, CSS 很难,而写出好的 CSS 代码更难.在一个大团队中,基于巨大的代码库写出好的 CSS 代码,更是难上加难. 我们并不是一家独一无二的软件公司:120个工程师,4间办公室,3个不同国家,3个时区,以及7年时间,代表着一个大家都很熟悉的代码库环境.每个人都有着一份干劲.这里有着30种不同风格的按钮,4种"品牌色彩"的变形,以及一个列举了互联网上所有 JavaScript 包的 package.json / bower.j

CSS技巧:五个方面促进你写出更加专业的CSS代码

核心提示:每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好! 一.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset,或者你自己编写的重置代码,只要使用就对了. 它能很简单的移除所

5种方法立刻写出更好的CSS代码

无论你决定使用什么方式去编写代码,保持一致.我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦.这是不需要争辩的.每个人都有自己的观点,所以选择一种你喜欢的工作方式,并在所有的样式表中保持一致. 简介当然,每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了.但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!1.重置 首先,很认真的告诉你,总是要重置某些分类.无论你是使用 Eric Meyer Reset.YUI Reset 或者你自己编写的重置代码,只要

总结:用CSS进行网页样式设计攻略全集

css|攻略|设计|网页 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法结见附>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数

学习CSS小技巧:优化你的CSS代码

css|技巧|优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding属性 参照相关资料我们可以知道,margin和padding代表的意思分别是外部边距和内部填充距离,在许多网友的CSS中,关于这两个属性的冗余代码是出现得最多的.比如:margin:0px,大家可以查看一下自己的CSS文件中,是否许多的margin:0px,其中有的是不需要的,你可以尝试删除它,当然