当前位置: 首页 > news >正文

CSS规范命名

CSS命名对于网页的开发管理的重要性往往被人忽略,很多初学者认为,css命名没什么,就是个名字而已,随便根据自己的意愿写就行了,因

  为它对于网页的表现没有任何影响。可是有过网页制作和网站管理经验的人都会知道,css的命名对于网站的清晰和日后的管理很重要,初学者

  应该从一开始就学习和尊重这些规范,形成良好的代码编写习惯,对于以后网站的建设、维护和改造有着至关重要的影响。下面是作者列出的

  一些css常用的规范性命名,这些名字已经成了网页设计规范,在网页设计中我们应该遵循这些规范性的名字。
站点:site
首页:homepage
导航:nav
布局:layout
搜索:search
网页头部:head/header
二级页面/子页面:subpage
登录条:loginbar
侧栏:side/sidebar
广告:banner
子导航:subnav
当前位置导航:crumb
菜单:menu
子菜单:submenu
滚动:scroll
下拉:drop
表单:form
箭头:arr/arrow
下拉菜单:dropmenu
主题/外观:theme
页面主体:main
内容:content
标签页:tab
列表:list
工具条:tool/toolbar
转角/圆角:cor/corner
提示信息:msg
小技巧:tips
标题:title
特别的:spec
资源:source
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
关于我们:aboutus
网站地图:sitemap
合作伙伴:partner
友情链接:friendlink
网页底部:foot/footer
版权:copyright
提交:submit
搜索框:searchbox
文本框:textbox
统计:count
以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav 

  规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
  一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
  f-blue:表示蓝色字体样式
  f-blod:表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
  n-title:新闻标题
  n-list:新闻列表
  二、我们还可以将代表各个部分的名字组合起来使用,如 ,对于上面的例子,我们可以这样命名:
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
  这样的命名方式同样清晰明了,为大多网页设计师所接受,只不过要特别注意大小写的区分,css中是区别大小写的.开始时容易出错,多加注意便可.
  按照这样的一些命名方式,我们可以非常明确的知道css中的每一个class的用途,便于使用和设计、维护。
想一想,你要想出很多名字来命名css也很麻烦的,是吧?

转载于:https://www.cnblogs.com/shimily/articles/3813125.html

相关文章:

  • Redis命令详解:Lists
  • 深度学习中的注意力机制
  • PV与并发之间换算的算法 换算公式
  • 序列化组件
  • 日常遇到的问题
  • 添加sudo免密码
  • 利用交通在手数据为换乘添加关注
  • qt注册表关联文件格式
  • [AIR] NativeExtension在IOS下的开发实例 --- IOS项目的创建 (一)
  • Java设计模式——单例模式(创建型模式)
  • Android高德地图贴合图片完成手绘地图展示
  • 使用ServletContext读取properties配置文件
  • java程序员必备的15个框架
  • 做还是不做,是一个问题
  • java springboot b2b2c shop 多用户商城系统源码-Spring Cloud Hystrix依赖隔离
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 「译」Node.js Streams 基础
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • 11111111
  • CSS 专业技巧
  • gops —— Go 程序诊断分析工具
  • js面向对象
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • markdown编辑器简评
  • mysql常用命令汇总
  • Next.js之基础概念(二)
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • 从setTimeout-setInterval看JS线程
  • 关于 Cirru Editor 存储格式
  • 回顾2016
  • 基于 Babel 的 npm 包最小化设置
  • 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
  • 普通函数和构造函数的区别
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 原生Ajax
  • ionic入门之数据绑定显示-1
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • puppet连载22:define用法
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ​批处理文件中的errorlevel用法
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (4.10~4.16)
  • (js)循环条件满足时终止循环
  • (PHP)设置修改 Apache 文件根目录 (Document Root)(转帖)
  • (ZT)出版业改革:该死的死,该生的生
  • (阿里巴巴 dubbo,有数据库,可执行 )dubbo zookeeper spring demo
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (转)h264中avc和flv数据的解析