搜索
首页web前端html教程【CSS】class和id命名规则_html/css_WEB-ITnose

说明,本篇内容为书籍《高流量网站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名称是区分大小写的。

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

     

    3.惯例

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

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

     

    4.大小写

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

    连字符

     

    5.命名空间

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

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

     

     

     

     

     

     

    后续阶段的学习:

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

     

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

    布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

    如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

    HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

    HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

    HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

    HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

    HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

    HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

    HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

    HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

    HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

    HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

    HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

    HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    适用于 Eclipse 的 SAP NetWeaver 服务器适配器

    将Eclipse与SAP NetWeaver应用服务器集成。

    WebStorm Mac版

    WebStorm Mac版

    好用的JavaScript开发工具

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。