0

0

【CSS】class和id命名规则_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:24:06

|

1167人浏览过

|

来源于php中文网

原创

说明,本篇内容为书籍《高流量网站css开发技术》的学习总结,文字出自书本

书不错,推荐阅读学习

也可参阅网上的博文

原载:彬Go
链接:http://blog.bingo929.com/css-coding-semantic-naming.html

 

立即学习前端免费学习笔记(深入)”;

class和id是用来建立CSS到HTML文件内部的衔接

注意,有些选择器的写法应考虑浏览器兼容问题,如nth-child选择器,多class选择器.classA.classB(IE6和以前的版本不能理解)

 

立即学习前端免费学习笔记(深入)”;

对于元素class和id命名,有几件事要放在心上:

  • 语义性
  • 可接受的字符
  • 惯例
  • 一致性
  •  

    立即学习前端免费学习笔记(深入)”;

    1.首先说说语义性

    所谓语义性,即名字应当描述内容,而不是描述表现,例子如下

    ♦表现型(不提倡)

    PurpleBold(紫色粗体)

    BigHeading(大号标题)

    top-left-box(左上方框)

    underlined-and-green(下划线绿色)

    boxLeft(左侧框)

    red(红色)

    红色标示涉及元素的表现形式,这在命名里是不允许的,因为表现形式是变化的,当变化发生,不仅要修改CSS的class和id名,还要修改html相应元素的class和id名,相当麻烦,当你所编辑的是大型网站,出现多处这样的修改,是非常耗时且头疼的。所以应该尽可能采用适应变化的命名,即命名与内容紧密相关。

    ♦语义型(提倡)

    sidebar(侧边栏)

    warning(警告)

    当然,有些时候适当运用表现来命名会更灵活。如,用bordered(带边框)的表现名给网站多处添加同样的样式。

    记住,最佳方案不是最干净的那个,也不是最漂亮的那个,与其拘泥成法,不如将思路放开一些。

     

    立即学习前端免费学习笔记(深入)”;

    2.可接受的字符

    最佳规则:始终使用字母、数字或连字符,并且始终以字母开头

    记住,class和id名称是区分大小写的。

    不要使用下划线,不要以数字或连字符打头,不接受“*”,“/”,“\”。虽然新的浏览器对生僻字符集的支持功能更多,但不是所有的浏览器如此,为了保证兼容性,请遵循最佳规则吧。

    神采PromeAI
    神采PromeAI

    将涂鸦和照片转化为插画,将线稿转化为完整的上色稿。

    下载

     

    立即学习前端免费学习笔记(深入)”;

    3.惯例

    使用一些约定俗称的惯例名称,可提高代码可预测性,既让自己和他人容易理解,也有助于屏幕阅读器和分析器的工作,提高SEO(搜索引擎优化)

    惯例参照Web前端开发规范手册

     

    立即学习前端免费学习笔记(深入)”;

    4.大小写

    驼峰式(缩写单词的每个字母采用同样的大小写:pdfLink linkPDF)

    连字符

     

    立即学习前端免费学习笔记(深入)”;

    5.命名空间

    加前缀,如:wp-users。命名空间需要制定团队内的命名空间约定。

    这是防御式CSS采用的技术之一,通过命名空间隔离代码,避免冲突,使其不影响原有和未来的代码。

     

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

     

    立即学习前端免费学习笔记(深入)”;

    后续阶段的学习:

    Microformat(微格式)    http://microformats.org/

     

    立即学习前端免费学习笔记(深入)”;

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    Word 字间距调整方法汇总
    Word 字间距调整方法汇总

    本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

    2

    2025.12.24

    任务管理器教程
    任务管理器教程

    本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

    2

    2025.12.24

    AppleID格式
    AppleID格式

    本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

    0

    2025.12.24

    csgo视频观看入口合集
    csgo视频观看入口合集

    本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

    29

    2025.12.24

    yandex外贸入口合集
    yandex外贸入口合集

    本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

    58

    2025.12.24

    添加脚注通用方法
    添加脚注通用方法

    本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

    1

    2025.12.24

    重启电脑教程汇总
    重启电脑教程汇总

    本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

    3

    2025.12.24

    纸张尺寸汇总
    纸张尺寸汇总

    本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

    5

    2025.12.24

    Java Spring Boot 微服务实战
    Java Spring Boot 微服务实战

    本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

    1

    2025.12.24

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号