企业中书写css,web前端开发企业级CSS常用命名,书写规范总结(示例代码)
(1)页面结构
容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center
(2)导航
导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary
(3)功能
标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search 功能区:shop 标题:title 加入:joinus 状态:status 按钮:btn 滚动:scroll 标签页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon 注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download 投票:vote 合作伙伴:partner 友情链接:link 版权:copyright
3.class命名
(1)颜色:使用颜色的名称或者16进制代码,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如:
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如:
.barnews { }
.barproduct { }
推荐的CSS书写顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
Positioning
Box model
Typographic
Visual
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
1 .xxx {2
3 /*Positioning*/
4
5 position: absolute;6
7 top:0;8
9 right:0;10
11 bottom:0;12
13 left:0;14
15 z-index:100;16
17 /*Box-model*/
18
19 display: block;20
21 float: right;22
23 width: 100px;24
25 height: 100px;26
27 /*Typography*/
28
29 font: normal 13px "Helvetica Neue", sans-serif;30
31 line-height:1.5;32
33 color:#333;34
35 text-align: center;36
37 /*Visual*/
38
39 background-color:#f5f5f5;40
41 border: 1px solid #e5e5e5;42
43 border-radius: 3px;44
45 /*Misc*/
46
47 opacity:1;48
49 }
企业中书写css,web前端开发企业级CSS常用命名,书写规范总结(示例代码)相关推荐
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...
- 【web前端开发】CSS浮动
文章目录 1.浮动 2.伪元素 3.标准流 4.行内块元素的问题 5.浮动的作用 6.浮动的特点 7.清除浮动 方法1:额外标签 方法2:单伪元素 方法3:双伪元素 方法4:overflow 1.浮动 ...
- 【web前端开发】CSS文字和文本样式
文章目录 前言 字体大小 字体粗细 字体样式 字体 font复合属性 文本缩进 文本水平对齐方式 文本修饰线 行高 颜色 标签水平居中 ⭐思维导图 前言 本篇文章主要讲解CSS中的文字和文本样式及一些 ...
- 【web前端开发】CSS定位
文章目录 1.定位介绍 2.定位的方式 2.1 相对定位 2.2 绝对定位 2.2.1 子绝父相 2.3 固定定位 3. 元素的层级关系 4. 总结 1.定位介绍 定位有两个作用: 1.可以解决盒子和 ...
- web前端开发-HTML+CSS基础入门 课程笔记
https://www.bilibili.com/video/BV1yx411d7Rc?p=3&share_source=copy_web 目录 概述 术语 版本和兼容性 开发环境的准备 第一 ...
- (转)web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 3. web前端开发分享-css,js提高篇
http://www.cnblogs.com/jikey/p/3604459.html 一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清posit ...
最新文章
- HTML表单的enctype属性详解{转}
- Linux Kernel 3.8.8/3.4.41/3.0.74 发布
- HDU4006(The kth great number)
- 关于NAND flash的MTD分区与uboot中分区的理解 .
- Docker容器实战思维
- mysql安全性特点_MySQL数据库有哪些特点?为何能得到了广泛应用?
- 每天干的啥?(2017.6)
- 【报告分享】2021人才资本趋势报告:重塑时代-BOSS直聘.pdf(附下载链接)
- 弹出框之对话框和提示框,可共用代码
- Tensorflow——Dropout(解决过拟合问题)
- 恒压板框过滤实验数据处理_中学少见、高考常考的化学实验仪器
- 大学用什么python教材_Python开发基础 大学教材
- 路在何方 路在脚下 -- !!
- 关于 Cannot assign requested address 错误
- 苹果手机计算机隐藏应用,操作如此简单 iPhone十大隐藏功能汇总
- flash绘制矢量人物教程
- uni-app思维导图
- 激荡的2020过后,物流江湖下个十年谁主沉浮?
- 原来window7系统转化为xp的时候,安装系统的时候,出现蓝屏错误(stop:0x0000007b)
- 还原android系统文件夹,如何从Android的内存中恢复文件-万兴恢复专家
热门文章
- cedit多行文本设置透明背景会重叠_PPT脱白教程11期【形状篇2】聊聊形状和文本框的那些事儿~...
- 这所高校的快递被机器人承包了,别人家的学校!
- 可以编程的 “骰子” :带 LED、陀螺仪,WiFi!
- 基于FPGA的ADC和DAC设计
- Nexys4DDR+OV7670实现sobel算子边缘检测系统
- box2d 碰撞检测_(译)如何使用box2d来做碰撞检测(且仅用来做碰撞检测)
- python中静态方法可以访问对象变量_python 面向对象-实例变量、类变量、实例方法、类方法、静态方法...
- java数组复制用for_在JavaScript中复制数组的最快方法 - 切片与'for'循环
- linux系统下c语言编程的,Linux操作系统下C语言编程从零开始
- 的内怎么放_放了心脏支架能活多久?医生坦言:做到三件事,才能和正常人一样...