Web前端——CSS的命名规范和范例

简介:

      CSS的命名规范

1   意义

  规范的命名有助有提升团队开发效率

   规范的命名有助有后期产品的维护

   规范的命名有助有后期的二次开发

2   范例

2.1   页面结构

   container/wrap   容器

   header   页头

   main   页面主体

   sidebar   侧栏

   center   中间内容

   wrapper   整体宽度

   content   内容

   footer   页尾

   column   栏目

2.2   导航

   nav   导航

   subnav   子导航

   sidebar   边导航

   rightsidebar   右导航

   menu   菜单

   title   标题

   mainnav/globalnav   主导航

   topnav   顶导航

   leftsidebar   左导航

   sidebarIcon   边导航图标

   submenu   子菜单

2.3   功能

   logo   标志

   loginbar   登录条

   products   产品

   products_review   产品评论

   banner   广告/标语

   login   登陆

   regsiter   注册

   products_prices   产品价格

   editor_review   编辑评论

   news_release   最新产品

   summary   摘要

   publisher   生产商

   faqs   常见问题

   blog   博客

   search   搜索

   search_output   搜索输出

   joinus   加入我们

   btn   按钮

   tab   标签页

   mag/message   提示信息

   tips   小技巧

   pay   充值

   promotion   推广

   ranking   排行

   equipment   公式设备

   culture   企业文化

   sales_network   营销网络

   technology   技术力量

   enterprise_qualification   企业资质

   screenshot   缩略图

   keyword   关键词

   forum   论坛

   search_input   搜索输入框

   search_results   搜索结果

   status   状态

    scroll   滚动

   list   文章列表

   current   当前的

   skin   皮肤

   activities   活动

   announcement   公告

   company_profile   公式简介

   glories   公司荣耀

   scale   企业规模

   organization   组织机构

   branches   分支机构

   strength_strength   公式实力

   operation_principle   经营理念

   development_history   发展历程

   browse_by_category   发展要求

   human_resource_hr   人力资源

   customer_message   客户要求

   your_requirements   您的要求

   enterprise_establishing   招商

   online_communicarion   在线交流

   joinIn_cooperation   合作加盟

   business_scope   业务范围

   contact_us   联系我们

   homepage   返回首页

   e_business   电子商务

   manager_oration   经理致辞

   engineering_projects   工程案件

   application_fields   应用领域

   leader_oration   领导致辞

   customer_service   客户服务

   sales_information   销售信息

   education_training   教育培训

   quality_certification   质量认证

   products_description   产品描述

   sales_sales   产品销售

   information   信息发布

   order   产品定购

   copy_right   版权所有

   hot_link   友情连结

   trends   行业动态

   news_trends   新闻动态

   sales_hotline   销售热线

   in_construction   建设中

   add   地址

   fax   传真

   description   产品说明

   brand   品牌

   size   尺寸

   model   型号

   technique_data   技术指标

   production_place   产地

   forum   论坛

   bidInviting   招标

   achievements   业绩

   trends   动态

   investment   投资

   programming   规划

   trade_news   行业新闻

   postal_code_zipcode   邮编

   company_name   公司名称

   contact_person   联系人

   certificate   证书

   tel   电话

   product_name   产品名称

   price   价格

   speciflcation   规格

   manufacuturer   生产厂家

   item_no   产品标号

   description   产品描述

   application   用途

   on_line_order   在线订购

   general   综述

   great_event   大事

   service   服务

   industry   行业

   environment   环境

   delivery   发送

   reset   重写

   business   业务

   download   下载中心

   faq   常见问题

   amusement_park  游乐园

   icon   图标

   guild   指南

   hot   热点

   dowmload   下载

   label/branding   商标

   shop   购物车

   siteinfo_credits   信誉

   siteinfo_legal   法律声明

   friendlink   友情链接

   submit   提交

   community   社区

   online_inquiry   在线调查

   feedback   意见反馈

   general_profile   中心概况

   special_report   专题报道

   note   注释

   service   服务

   news   新闻

   vote   投票

   breadcrumb/loc   当前位置

   tag   标签

   siteinfo   网站信息

   partner   合作伙伴

   copyright   版权


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/1977563


相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
62 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
36 6
|
29天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
34 5
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
32 4
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
40 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
53 2
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!

热门文章

最新文章