美文网首页
CSS的常用命名及规范

CSS的常用命名及规范

作者: MarkSJun | 来源:发表于2017-04-13 16:57 被阅读0次

常用命名

标题:title

摘要:summary

箭头:arrow

商标:label

网站标志:logo

转角/圆角:corner

横幅广告:banner

子菜单:subMenu

搜索:search

搜索框:searchBox

登录:login

登录条:loginbar

工具条:toolbar

下拉:drop

标签页:tab

当前的:current

列表:list

滚动:scroll

服务:service

提示信息:msg

热点:hot

新闻:news

小技巧:tips

下载:download

加入:joinus

注册:regsiter

指南:guide

友情链接:friendlink

状态:status

版权:copyright

按钮:btn

合作伙伴:partner

投票:vote

左/中/右:left/center/right

简介:profiles

评论:comment

ID命名

(1) 页面结构

容器:container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

(2) 导航

导航:nav

主导航:mainbar

子导航:subanv

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

摘要:summary

(3) 功能

标志:logo

广告:banner

登录:login

登陆条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的:current

小技巧:tips

图标:icon

注释:note

指南:guild

服务:service

版权:copyfight

友情链接:link

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)相关的样式,因此排在首位。盒模型拍在第二位,因为它决定了组件的尺寸和位置。


.xxx {

/* Positioning */

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

z-index:100;

/* Box-model */

display: block;

float: right;

width: 100px;

height: 100px;

/* Typography */

font: normal 13px "Helvetica Neue", sans-serif;

line-height:1.5;

color:#333;

text-align: center;

/* Visual */

background-color:#f5f5f5;

border: 1px solid #e5e5e5;

border-radius: 3px;

/* Misc */

opacity:1;

}

相关文章

  • CSS模块化

    css命名规范 常用的css命名规则 头:header 内容:content/container 尾:footer...

  • html代码规范,chrome应用

    &html,css入门 基础学习 &代码规范 点这里 CSS命名规则 常用的CSS命名规则 头:header 内容...

  • CSS的常用命名及规范

    常用命名 标题:title 摘要:summary 箭头:arrow 商标:label 网站标志:logo 转角/圆...

  • CSS常用命名

    以下是css常用的类或ID命名规范,整理分享给大家...

  • [知识点滴]Div+CSS命名规范大全

    Div+CSS命名规范(前端web开发命名规范)Div+CSS命名规范(一)窗体头:header内容:conten...

  • vue开发规范

    Vue 开发规范目录及说明 规范目的 命名规范 结构化规范注 释规范 编码规范 CSS 规范 规范目的 为提高团队...

  • 『前端规范化』CSS命名规范化

    CSS命名规范化 CSS命名规范化,有利于代码阅读和维护,在大型项目及团队协作开发中有着重要的意义。这里我推荐采用...

  • CSS命名规范(规则)常用的CSS命名规则

    头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:co...

  • WEB开发中css命名规范及常用命名

    工作中,写页面经常会出现我们起class名的时候,词穷!!!甚至有些词舍不得用,比如说left,right,cen...

  • 前端规范

    常用html、CSS、javascript前端命名规范无论是从技术角度还是开发视角,对于web前端开发规范文档都有...

网友评论

      本文标题:CSS的常用命名及规范

      本文链接:https://www.haomeiwen.com/subject/fcobattx.html