CSS命名规则
css命名及书写规范
css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
CSS命名规范简介
CSS命名规范简介
大家知道CSS命名规范吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。
骆驼式命名法：
正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字。
例如，下面是分别用骆驼式命名法和下划线法命名的同一个函数：
printEmployeePaychecks();
print_employee_paychecks();
第一个函数名使用了骆驼式命名法，函数名中的每一个逻辑断点都有一个大写字母来标记;第二个函数名使用了下划线法，函数名中的每一个逻辑断点都有一个下划线来标记。
骆驼式命名法近年来越来越流行了，在许多新的函数库和Microsoft Windows这样的环境中，它使用得当相多。
另一方面，下划线法是c出现后开始流行起来的，在许多旧的程序和UNIX这样的环境中，它的使用非常普遍。
匈牙利命名法：。
CSS书写规范
CSS命名规则页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。
关于CSS的命名我们采用骆驼式命名法。
骆驼式命名法：正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。
例如：mianNav footNav1.通用命名规则：1)所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_22)所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav3)页面主体框架布局命名：Lay_1、Lay_2 、Lay_34)栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N5)栏目标题块命名一律采用title。
元素标签采用:<h4> 如：<div class="tit"><h4>标题</h4></div>6)页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N7)页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N8)页面上按钮采用：btn_1、btn_2、btn_3、btn_N9)广告区域：ad_1,ad_2,ad_3,ad_N2.主框架命名规则：1)#header (页面头部)2)#main (页面主体)3)#footer (页面尾部)3.通用命名规则：主体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink 版权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb 容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多fl /fr float:left/float:righttit 标题栏spr 空行t / d / mid / l / r：上 / 下 / 中 / 左 / 右bdr：边w：宽h：高1.频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。
前端命名规范
前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。
下面是一些常见的前端命名规范：1. 文件和文件夹命名规范- 文件名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：index.html, main.css。
- 文件夹名也应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：images, scripts。
2. HTML/CSS命名规范- HTML和CSS中的类名和ID名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：header-wrapper, main-content。
- 避免使用无意义的命名，应该根据元素的作用和意义来命名。
3. JavaScript命名规范- 变量和函数名应该使用驼峰式命名法，即第一个单词的首字母小写，后面的单词的首字母大写，例如：firstName, getUserInfo。
- 常量名应该使用全大写字母，多个单词之间使用下划线“_”分隔，例如：MAX_NUM, API_URL。
- 类名应该使用帕斯卡命名法，即所有单词的首字母都大写，例如：Person, UserService。
4. 图片命名规范- 图片命名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：logo.png, slide-image.jpg。
5. URL命名规范- URL路径应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：/news-list, /contact-us。
6. Git分支和提交规范- Git分支名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：feature/login,hotfix/bug-fix。
- Git提交消息应该简明扼要地描述所做的更改，可以包括关键词和操作，例如：Add login form validation, Fix broken link。
css命名规范
css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。
在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。
CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。
标签名称也可以使用中划线，但无建议，仍建议使用下划线。
例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。
例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。
例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。
常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。
例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。
例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。
CSS规范-根据W3C标准制定
由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTM l和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。
为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用h eader，头部左边，可以用hea der_l eft或h eader_l,还有如果是列结构的可以这样——box _1of3(三列中的第一列)，box_2o f3 (三列中的第二列)、box _3of3(三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。
）容器：contai ner/box头部：header主导航：m ainNa v子导航：subNav顶导航：topNav网站标志：logo大广告：banner页面中部：m ainBo dy底部：footer菜单：menu菜单内容：m enuCo ntent子菜单：subMen u子菜单内容：subMen uCont ent搜索：search搜索关键字：keywor d搜索范围：range标签文字：tagTit le标签内容：tagCon tent当前标签：tagCur rent/curren tTag标题：title内容：conten t列表：list当前位置：curren tPath侧边栏：sideba r图标：icon注释：note登录：login注册：regist er列定义：column_1of3(三列中的第一列)column_2of3(三列中的第二列)column_3of3(三列中的第三列)二、id和cla ss的使用及区别我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>id一个页面只可以使用一次，class可以多次引用。
scss 标准
scss 标准SCSS（Sassy CSS）是一种CSS 预处理器，它提供了更高级的CSS 特性，例如变量、嵌套规则、混合（mixins）、继承等。
SCSS 的标准主要基于CSS，但增加了许多有用的功能和约定。
以下是一些SCSS 的标准建议和约定：1. **变量命名**：变量应该使用中划线分隔，例如`$font-stack`。
2. **嵌套规则**：嵌套规则应该尽可能地简洁，避免过深的嵌套。
3. **混合（Mixins）**：混合是可重用的CSS 块，可以包含属性和规则。
例如：```scss@mixin button($color: blue, $hover-color: darken($color, 10%)) {display: inline-block;padding: 1em 2em;background-color: $color;color: white;border: none;cursor: pointer;&:hover {background-color: $hover-color;}}```4. **继承**：使用`@extend` 关键字可以使一个选择器继承另一个选择器的所有样式。
例如：```scss.message {border: 1px solid #ccc;padding: 10px;}.success {@extend .message;border-color: green;}```5. **命名约定**：类名和ID 应该使用小写字母和短横线分隔，例如`.button-primary` 和`#logo`。
6. **避免使用ID 选择器**：ID 选择器的优先级过高，可能导致样式冲突。
尽可能使用类选择器。
7. **代码格式化**：遵循一定的代码格式化约定，例如每行一个属性，使用两个空格缩进等。
8. **注释**：添加必要的注释以解释复杂的样式或混合。
例如：```scss// This is a comment explaining what this mixin does.@mixin button($color: blue) {// ... styles ...}```9. **可读性**：尽管SCSS 提供了许多高级功能，但最终的CSS 应该易于阅读和理解。
css命名规范
css命名规范以CSS命名规范为标题，本文将介绍CSS命名规范的主要规则及其实践方法。
1.解CSS命名规范CSS命名规范旨在使CSS的命名结构可读性更强，可维护性更高，从而使CSS编码更轻松、高效。
当有一个明确的命名规范时，CSS代码也会更有组织，可以让他人更轻松地读懂，时也能够更轻松地调试、扩展现有的CSS代码。
CSS命名规范的精髓在于采用“短且易懂”的命名规则。
其含义通常能从简单的词汇中理解出来，在CSS中可以用更短的名称表示，以减少开发人员在编写样式时所需要记忆的命名空间。
2. CSS命名规范的主要规则CSS的命名规范规定，在生成类名时必须要遵循以下几个原则：（1）层级性：CSS的类名必须有层级性，可以根据文档的内容结构设计CSS的类名，以增强代码的可读性。
（2）效率：CSS的类名应该有一定的简写规则，避免重复，使开发人员可以更加轻松地记忆、使用。
（3）可读性：CSS的类名应该有简洁清晰的表意，使开发人员可以轻松地更改或定位某个HTML元素的CSS样式。
（4）标识：CSS的类名应该有一些“标识符”，使得命名更加明确，便于维护。
3.践CSS命名规范（1）使用层级性命名：CSS的类名要根据文档的内容结构设计，以便更有层次，让代码变得更具可读性，更容易维护。
如：.header-nav {list-style: none;padding: 0;margin: 0;}.header-nav li {float: left;margin-right: 10px;}.header-nav a {padding: 10px;color: #FFF;}（2）使用简写规则：在CSS类名中，应该避免过长的词汇，可以使用简写来代替，例如，使用“cont”表示“content”，使用“nav”表示“navigation”等，以减少开发人员在编写样式时所需要记忆的命名空间。
（3）使用可读性的类名：CSS的类名必须有简洁清晰的表意，以便开发人员可以轻松地更改或定位某个HTML元素的CSS样式。
Css选择器命名规则
操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。
它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。
由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。
关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。
除此之外，没有相关的说明。
那么各浏览器下的表现是否遵循这一规则呢？请观察如下代码：12 3 4 5 6 7 8 9 1 0 1 1 1 2 div{width:160px;height:20px;font-size:12px;line-height: 20px;background- color:yellow;}.f-1_f_{background-color:#d4d4d4;}.1{background-color:#A8A8A8;}.123456{background-color:#d4d4d4;}.2demo{background-color:#A8A8A8;}.2-demo {background-color:#d4d4d4;}.2_demo {background-color:#A8A8A8;}13 14 15 16 17 18 19 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 .-demo{background-color:#d4d4d4;}.-2demo {background-color:#A8A8A8;} ._demo {background-color:#d4d4d4;} ._2demo {background-color:#A8A8A8;} .-{background-color:#d4d4d4;}.---{background-color:#A8A8A8;}._{background-color:#d4d4d4;} .——{background-color:#A8A8A8;}._-{background-color:#d4d4d4;}.-_{background-color:#A8A8A8;}.-{background-color:#d4d4d4;}.---_{background-color:#A8A8A8;}.---123{background-color:#d4d4d4;} .__123{background-color:#A8A8A8;}3536373839441421 23 45 67 89 1011 1213 1415 1617 1819 20<div class ="f-1_f_">字母开头</div ><div class ="1">单个数字</div ><div class ="123456">多个数字</div > <div class ="2demo">数字开头 + [a-z][A-Z]</div > <div class ="2-demo">数字 + "-" 开头</div > <div class ="2_demo">数字 + "_" 开头</div > <div class ="-demo">连字符(-)开头 + [a-z][A-Z]</div > <div class ="-2demo">连字符(-) + 数字 开头</div > <div class ="_demo">下划线(_)开头 + [a-z][A-Z]</div > <div class ="_2demo">下划线(_) + 数字 开头</div > <div class ="-">单个连字符(-)</div > <div class ="---">多个连字符(-)</div > <div class ="_">单个下划线(_)</div ><div class =" ">多个下划线(_)</div ><div class="_-">下划线(_) + 连字符(-)</div><div class="-_">连字符(-) + 下划线(_)</div><div class=" -">多个下划线(_) + 连字符(-)</div> <div class="---_">多个连字符(-) + 下划线(_)</div><div class="---123">多个连字符(-) + 数字</div><div class=" 123">多个下划线(_) + 数字</div>看看各浏览器下面的结果观察上表，分析各浏览器下的表现，总结如下从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。
Css命名规范大全
Css命名规范大全网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIVCSS命名规则CSS命名大全内容如下：页头：header如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id 区别及用法登录条：loginBar标志：logo侧栏：sideBar广告：banner导航：nav子导航：subNav菜单：menu子菜单：subMenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendLink页脚：footer版权：copyRight常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u 1.CSS的ID的命名也许你需要了解class与Id区别外套：wrap主导航：mainNav子导航：subnav页脚：footer整个页面：content页眉：header版权：copyRight商标：label标题：title主导航：mainNav(globalNav)顶导航：topnav边导航：sidebar左导航：leftsideBar右导航：rightsideBar旗志：logo标语：banner菜单内容1：menu1Content菜单容量：menuContainer子菜单：submenu边导航图标：sidebarIcon注释：note面包屑：breadCrumb(即页面所处位置导航提示)容器：container内容：content搜索：search登陆：login功能区：shop(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。
css 命名规范
css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。
以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。
2. 以字母开头，不以数字开头。
3. 使用有意义的名称，避免使用缩写或简写。
命名应反映元素的功能或用途。
4. 使用短小、精准的名称，不使用冗长或复杂的名称。
二、选择器命名：1. 使用有意义的名称来定义选择器。
例如，使用类名来表示元素的特征或功能。
（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。
可以使用多个类名来表示一个元素的多个特征或功能。
（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。
三、类名命名：1. 使用小写字母或连字符来分隔单词。
例如：.nav-bar，.info-box。
2. 使用有意义的名称来描述元素的功能或用途。
例如：.card，.container。
3. 使用简洁明了的名称，不要出现冗长或复杂的类名。
4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。
四、ID命名：1. 使用小写字母或连字符来分隔单词。
例如：#home-page，#top-header。
2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。
五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。
（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。
3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。
六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。
css文件命名规则
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。为避免冲*突，可以在样式表一开始就先定义所有元素的
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
二、id和class的使用及区别
css变量命名规则
css变量命名规则
CSS变量是CSS3中新增的一个重要特性，它可以让开发者在CSS 中定义一些可重复使用的变量，从而简化CSS编写过程，提高代码的可维护性和可读性。
然而，为了更好地使用CSS变量，我们需要遵循一些命名规则，以确保代码的可读性和可维护性。
以下是一些常见的CSS变量命名规则：
1. 变量名称应该以“--”开头。
这可以帮助开发者快速识别它们是CSS变量。
2. 变量名称应该尽可能简洁。
变量名称应该准确地描述它们的含义，但不应过长或过复杂。
这有助于提高代码的可读性和可维护性。
3. 变量名称应该使用小写字母和短划线来分隔单词。
这可以提高代码的可读性，并使其更易于使用。
4. 变量名称应该与其所代表的值相关。
这有助于开发者更容易地理解变量的含义和用途。
5. 变量名称应该尽量避免使用数字和特殊字符。
这可以避免一些奇怪的问题，并提高代码的可读性。
6. 变量名称应该使用语义化的命名约定。
这将使代码更易于理解，并减少出错的可能性。
遵循这些CSS变量命名规则可以帮助开发者编写更具可读性和
可维护性的CSS代码，并提高代码的易用性和扩展性。
- 1 -。
css选择器命名规则
css选择器命名规则摘要：1.CSS选择器概述2.CSS选择器命名规则3.常见CSS选择器类型及用法4.实践案例与应用正文：## 1.CSS选择器概述CSS（层叠样式表，Cascading Style Sheets）是一种用来描述HTML或XML文档样式的样式表语言。
CSS选择器是CSS中的核心部分，它用于选择并匹配特定的HTML元素，从而为其应用样式。
通过使用CSS选择器，我们可以实现对网页元素的精确控制和个性化定制。
## 2.CSS选择器命名规则CSS选择器的命名规则主要遵循以下几个原则：1.选择器名称应简洁明了，便于理解和记忆。
例如：`.className`、`.elementName`、`#idName`等。
2.选择器名称中不应包含特殊字符，如空格、逗号、冒号等。
3.选择器名称中可以包含字母（大小写）、数字、连字符（-）和点（.）。
4.选择器命名应遵循驼峰式命名规则，即变量名中每个单词的首字母大写，除第一个单词外。
例如：`mainNavigation`、`searchInput`等。
5.同一选择器命名应保持一致，避免混乱。
例如，不要在同一个项目中使用`.class1`和`.Class1`。
## 3.常见CSS选择器类型及用法1.通用选择器（*）：选择页面上所有元素，常用作reset 或normalize 样式的基础。
2.元素选择器（element）：根据元素标签名称选择元素，如`div`, `p`, `h1` 等。
3.类选择器（.class）：根据元素类的名称选择元素，如`.container`, `.button` 等。
4.ID选择器（#id）：根据元素的ID 属性值选择元素，如`#header`, `#footer` 等。
5.属性选择器（[attribute]、[attribute=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]）：根据元素的属性及值选择元素，如`[data-toggle]`, `[data-target=”#target”]` 等。
css命名规范
css命名规范CSS（层叠样式表）命名规范是网页开发中的一种必不可少的知识。
它被广泛用于编写网页，是一种简单而又强大的工具，可以控制网页的外观和样式，使其看起来更加简洁实用。
首先，让我们先来看一下CSS命名规范究竟有哪些。
CSS命名规范主要分为三个方面：（1）结构命名。
结构命名是指针对HTML结构设定的CSS命名，也就是将标签结构体系化，命名规范要求简要、清晰明了、比较统一，方便大家统一管理和调用，使开发更加有序顺利。
（2）功能命名。
功能命名是指将CSS样式文件中的代码按其功能进行命名，这样可以使CSS文件更易于调用。
（3）定义命名。
定义命名指的是在CSS文件中定义某类样式及其相关属性时，设定的具体命名，它是CSS文件中主要体现CSS命名规范的地方。
要求名称简要、清晰，尽量要求通用性，方便在不同网页中调用。
其次，如何在实际开发中制定合理的命名规范，并使之有效执行呢？首先，尽量遵守一定的命名规则，比如给每个标签设置统一的命名，把结构命名和定义命名区分开来，不要把它们混在一起使用；功能命名中也要尽量保证每个命名都能够表达出它的实际意义，以便以后对它进行修改和替换。
其次，在定义一个新的元素时，不要只专注于属性，同时要考虑将它归入哪一类，以便便于管理和调用，让每一个元素都有其所属的定义命名和结构命名，这样可以让CSS文件的整体结构更加清晰、有条理。
再次，在CSS命名规范中，有一项很重要的是引用规则，一般情况下，CSS文件中使用的样式都应该是经过统一定义、以及充分考虑过其功能和结构的，而每一个元素命名时也应该遵守一定的引用规则，比如在引用类的时候，尽量使用类名加编号的方式，这样有利于管理。
最后，在实际开发中，CSS命名规范应该遵守一定的水平对齐原则，比如网页中使用的标签均应有一个专门的类名，这样可以有效避免CSS代码的混乱，使其具备更好的可读性和可维护性。
总而言之，要想使网页开发更加高效，CSS命名规范就显得至关重要，它不仅可以使开发更加轻松，还能让网页的样式更加简洁实用。
css 名称拼接写法
css 名称拼接写法
“CSS 名称拼接写法”这句话指的是在 CSS 中使用特定的命名约定或规则来拼接或组合类名、ID 等标识符的写法。
这种写法可以帮助开发者更清晰、有组织地管理和维护 CSS 代码，同时也有助于提高代码的可读性和可维护性。
CSS 名称拼接写法的具体规则和约定可能因团队或项目而异，但一般来说，以下是一些常见的 CSS 名称拼接写法：
1.使用小写字母：通常，CSS 类名和 ID 名都使用小写字母。
2.使用短横线分隔单词：在类名和ID 名中，通常使用短横线（-）来分隔单
词，以增加可读性。
3.使用缩写：为了减少代码长度，开发者可能会使用缩写来代替完整的单词。
4.使用前缀或后缀：为了区分不同模块或组件的样式，开发者可能会在类名
或 ID 名前添加前缀或后缀。
总结来说，“CSS 名称拼接写法”是指在使用 CSS 时，通过遵循一定的命名约定或规则，将类名、ID 等标识符进行拼接或组合的写法。
这种写法可以帮助开发者更清晰、有组织地管理和维护 CSS 代码，同时也有助于提高代码的可读性和可维护性。
css类名命名规则
css类名命名规则CSS类名命名规则在编写CSS样式表时，为了方便管理和维护，我们需要遵循一定的类名命名规则。
合理的类名命名可以提高代码的可读性和可维护性，同时也能够增强代码的可扩展性和复用性。
本文将介绍一些常见的CSS类名命名规则。
一、使用语义化的类名语义化的类名可以让开发者更好地理解代码的含义，减少歧义和误解。
我们应该尽量使用能够准确描述元素或组件功能的类名。
例如，如果我们要设置一个导航栏的样式，可以使用类名"nav"或"navbar"，而不是"header"或"top"。
二、使用有意义的单词或缩写类名应该使用能够清晰表达其含义的单词或缩写，避免使用无意义的字符或数字。
例如，如果我们要设置一个按钮的样式，可以使用类名"button"或"btn"，而不是"class1"或"btn1"。
三、避免使用过长的类名虽然我们要使用有意义的类名，但是也要避免过长的类名。
过长的类名不仅会增加代码的复杂度，还会增加错误的可能性。
一般来说，类名应该控制在2到3个单词之间，尽量简洁明了。
四、使用连字符分隔单词在类名中，我们应该使用连字符（-）来分隔单词，而不是下划线（_）或驼峰命名法。
连字符可以增加类名的可读性，使代码更易于理解。
例如，如果我们要设置一个列表项的样式，可以使用类名"list-item"，而不是"list_item"或"listItem"。
五、避免使用具体的元素名称作为类名为了增加代码的灵活性和复用性，我们应该避免使用具体的元素名称作为类名。
例如，不要使用类名"div"或"p"，而是使用描述性的类名，如"container"或"paragraph"。
blanc规则
blanc规则Blanc规则是一种CSS编写规范，它使得CSS代码可读性更好，更易于维护。
以下是关于Blanc规则的详细解释。
第一步：命名约定为了使代码更具可读性，我们需要约定一个命名规范。
在Blanc 规则中，我们使用BEM（Block, Element, Modifier）命名规则。
块是一个可重用组件，具有明确的功能和结构。
一个块可以包含多个元素。
元素是一个块内部的单个组成部分。
修改器是用于修改块或元素的外观或行为的特殊类。
使用这种命名规范，我们可以更好地组织和管理CSS代码。
第二步：结构约定在编写CSS代码时，我们需要按照特定的结构进行组织，以确保代码易于维护。
在Blanc规则中，我们将CSS代码按照以下方式结构化：1.布局这里包括网格、浮动、定位等。
在Blanc规则中，我们可以使用flexbox或者grid等技术来实现网格布局，定位和浮动技术要尽可能少的使用。
2.块，元素和修改器按照BEM命名规则，我们将所有块、元素和修改器组织在一起。
例如，我们可以使用以下方式编写代码：.block {}.block__element {}.block--modifier {}在这个例子中，我们有一个块、一个元素，以及一个名为“modifier”的修改器。
3.通用类通用类是指在整个网站中多次使用的类。
在Blanc规则中，我们将这些通用类按照特定的命名规则组织在一起，以使它们易于管理。
4.状态类状态类是指在某些情况下给块或元素添加额外样式的类。
在Blanc规则中，我们将这些状态类组织在一起，以便快速识别它们。
第三步：样式约定在Blanc规则中，我们约定了以下样式规则：1.缩进使用2个空格进行缩进。
这种缩进方式既可读性好，而且使得代码易于修改。
2.属性顺序按特定顺序排列CSS属性，以使代码易于阅读和理解。
常见的属性顺序为：位置相关属性（如position, top, left等）、盒模型属性（如width, height等）、字体属性（如font-size, font-family 等）等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS-命名总结热度2已有26 次阅读2010-8-13 23:42 |个人分类:资料库|关键词:CSS 命名CSS书写命名总结一、命名原则:不要通过视觉外观来给元素命名，而是根据功能给元素命名。
ID具有唯一性，Class具有可重复性。
让所有的Class元素都成为外围ID元素的子级或孙级。
网页模块化，利于网站代码的控制，维护和修改a.外围架构使用ID控制b.内部结构使用Class控制二、命名规则:a.骆驼命名法指混合使用大小写字母来构成变量和函数的名字,首写字母小写myDatab.帕斯卡命名法指混合使用大小写字母来构成变量和函数的名字,首写字母大写MyDatac.匈牙利命名法标识符的名字以一个或者多个小写字母开头作为前缀，标识出变量的作用域，类型等。
前缀之后的是首字母大写的一个单词或多个单词组合或者符号，该单词要指明变量的用途。
txtMyDatad.下划线或中划线命名法树状结构的命名层叠式命名每一个逻辑断点都有一个下划线或中划线来标记DWMenu_Insert_AnimalsDWMenu_Insert_Animals_DogDWMenu_Insert_Animals_CatDWMenu_Insert_Animals_MonkeyDWMenu-Insert-AnimalsDWMenu-Insert-Animals-DogDWMenu-Insert-Animals-CatDWMenu-Insert-Animals-Monkeytxt-MyDatae.常量命名SQL_SELECT_CA TEGORIES三、CSS推荐命名方式[模块前缀(模块标识|区域标识)]+[功能标识]+[模块后缀(状态|位置|[A-Z]:多风格标识|[0-9]:行标识|[a-z]:列标识)]wrapperDetailsdetailsLeftdetailsRightsection01section02section03sectionYoulikesectionTelsectionNewslist01list02list03listProlistArtlistMediaitemArticleitemMediaitembgBodybtnAddbtnDelbtnSubmitbtnSubmit01btnSubmit02btnSubmit03四、常用的样式文件命名全局样式表:base.css页面级别样式表:style.css 五、1、页面框架:页面主体:container|icontainer 页眉:header页中:pagebody侧栏:aside|sidebar正文:content页脚:footer版块:section行:sectionR|column栏:sectionC|rowarticledialogfiguredetailsdatagridnavmenucommandvideoaudio2、结构元素Wrapper外框:wrapper外框内套:iWrapper导航:menu标签页:tab容器:pannel列表:list内容的内套:inner上:[top]-[T]中:[middle]-[M]下:[bottom]-[B]左:[left]-[L]中:[center]-[C]右:[right]-[R]多行多列:[part]-[P]3、模块item元素选择:一行多列:li + 属性命名list控制一行两列和多行一列:dl dt dd + 属性命名list控制多行多列:div item控制三种状态:[A][B][C][on]Layout-版式:上:[top]-[T]-[IT]中:[middle]-[M]-[IM]下:[bottom]-[B]-[IB]左:[left]-[L]-[IL]中:[center]-[C]-[IC]右:[right]-[R]-[IR]多行多列:-[part]-[P]Property-属性命名:Profile-色彩|背景六、网站常用模块中英文对照表版权:copyright导航:nav顶导航:topNav主导航:mainNav子导航:subNav用户导航:userNav菜单:menu主菜单:mainMenu子菜单:subMenu右键菜单:contentMenu快捷菜单:shortcutMenu搜索:search登录:login登录条:loginbar功能区:shop加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status投票:vote合作伙伴:partner友情链接:friendlink网站导航Site Map公司简介Profile or Company Profile or Company 公司设备Equipment Equipment公司荣誉Glories Glories企业文化Culture Culture产品展示Product Product资质认证Quality Certification企业规模Scale Scale营销网络Sales Network组织机构organization organization合作加盟Join In Cooperation技术力量Technology Technology经理致辞Manager`s oration发展历程Development History工程案例Engineering Projects业务范围Business Scope分支机构Branches供求信息Supply & Demand经营理念Operation Principle产品销售Sales Sales联系我们Contact Us Contact Us信息发布Information Information返回首页Homepage Homepage产品定购order order分类浏览Browse By Category电子商务E-business公司实力Strength Strength版权所有Copy Right友情连结Hot Link应用领域Application Fields人力资源Human Resource Hr领导致辞Leader`s oration企业资质Enterprise Qualification行业新闻Trade News行业动态Trends客户留言Customer Message客户服务Customer Service新闻动态News & Trends公司名称Company Name销售热线Sales Hot-Line联系人Contact Person您的要求Your Requirements建设中In Construction证书Certificate Certificate地址ADD Add邮编Postal Code Zipcode电话TEL Tel传真FAX Fax产品名称Product Name产品说明Description Description价格Price品牌Brand规格Specification尺寸Size生产厂家Manufacuturer Manufacturer 型号Model产品标号Item No.技术指标Technique Data产品描述Description产地Production Place销售信息Sales Information用途Application论坛Forum在线订购On-line order招商Enterprise-establishing招标Bid Inviting综述General业绩Achievements招聘Join Us求贤纳士Join Us大事Great Event动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持Powered By 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training游乐园Amusement Park在线交流Online Communication专题报道Special Report。