css定义合并书写符,CSS 样式书写规范+特殊符号

虽然我只是刚踏入web前端开发圈子。在一次次任务里头，我发觉每一次的css命名都有所不同和不知所措。脑海就诞生了一个想法——模仿大神的css命名样式。

毕竟日后工作上，是需要多个成员共同协作的。如果没有良好的命名，就会造成许多没必要的耽误和麻烦。

命名空间的规范：

布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。

状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。

工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix(清除浮动)、u-ellipsis(省略)。

组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider(滑动)、m-dropMenu(下拉菜单)。

钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

引用于：大神ChokCoco

样式属性的规范：

单个样式规则下的属性在书写时，应按功能进行分组，并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

如果包含 content 属性，应放在最前面；

Positioning Model 布局方式、位置，相关属性包括：position / top / right / bottom / left / z-index / display /float / ...

Box Model 盒模型，相关属性包括：width / height / padding / margin / border / overflow / ...

Typographic 文本排版，相关属性包括：font / line-height / text-align / word-wrap / ...

Visual 视觉外观，相关属性包括：color / background / list-style / transform / animation / transition / ...

引用于：大神ChokCoco

positioning排在第一位，因为它可以使一个元素脱离正常文档流，box决定了一个组件的大小。其他属性只在内部起作用。

面向属性的命名：不要管页面什么位置，什么内容，面向属性的命名”就是针对自身属性的一种命名方式

.tr{text-align:right;}

.pb8{padding-bottom:8px;}

双标签方法&宽度分离原则

.w470{width:470px;}

.inset{padding:20px; border:1px solid #ddd;}

这样padding与border就会自适应width。Width就变成主动了。外层标签就负责宽度或者与之分离的margin属性，以提高CSS的重用性以及页面的容错与自适应能力。

“分离”思想下的命名只针对属性本身, “无分离”思想的命名是针对页面内容，所以上述改为：

.txtw1{width:470px;}

.inset1{padding:20px; border:1px solid #ddd;}

当以后发现其他部分也用到width470px，可以合并为

.txtw1,.w470{width:470px;}

要注意，只有页面要使用到与文本框独立宽度一样宽度的时候才进行分离并合并

精简高效CSS命名之“三无原则”

no id

no 辈分层级

no 标签

引用于：大神张鑫旭

还有就是附上一些常用的特殊符号

&nbsp：牛逼(nb)空格(sp - space)，容易受影响。

&ensp：恶念(e n-ian)空格占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp：恶魔(e m-o)空格占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

‹&lsaquo ›&rsaquo√&radic×&times

CSS 样式书写规范

可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

css样式书写规范

在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

关于CSS的书写规范和顺序

关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...

css样式书写的问题

经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.d ...

css的书写规范+常用

格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...

css命名书写规范小结。

单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

css的书写规范，有哪些注意点

一.框架为先,细节次之. 先写一些浮动,然后高与宽,然后再是细节方面的书写. 比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的 网站框架.然后再再去渲染容器里面的内容. ...

css样式书写顺序

这里推荐先写显示属性,再写自身属性,再写文字属性:并不代表非得按这个顺序写,但这种写法可以使css结构更清晰易读,修改起来比较方便. 而且在团队项目中能更好地提高效率. //显示属性 display ...

CSS3书写规范

css样式的书写顺序: 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, marg ...

随机推荐

C语言 · 最小乘积(基本型)

问题描述 给两组数,各n个. 请调整每组数的排列顺序,使得两组数据相同下标元素对应相乘,然后相加的和最小.要求程序输出这个最小值. 例如两组数分别为:1 3 -5和-2 4 1 那么对应乘积取和的最小 ...

一次性搞明白 service和factory区别

原文链接 http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html 等下,已经有一篇文 ...

移动端的几款jq插件

移动手机用户的数量每日都在增长,人们现在都习惯于使用手机来浏览网页,看小说,读新闻.如何确保你的网站对移动用户友好,是目前你需要解决的最重要的问 题之一.这里给大家介绍10款在移动手机上使用的jQue ...

百度编辑器UEditor常用设置函数

最近在研究UEditor的使用,下面是附上传送门: 这是API文档http://ueditor.baidu.com/doc/ 这是下载地址http://ueditor.baidu.com/websit ...

centos7 lamp

yum install libmcrypt libmcrypt-devel mcrypt mhash zlib zlib-devel libpng libpng-devel freetype free ...

selenium的其他操作

# author=zyqfrom selenium import webdriverimport timedriver=webdriver.Chrome()driver.get('http://ui. ...

1. String可调用方法

class str(basestring): """ str(object='') -> string Return a nice string represent ...

求组合数 C++程序

一 递归求组合数 设函数为void    comb(int m,int k)为找出从自然数1.2.... .m中任取k个数的所有组合. 分析:当组合的第一个数字选定时,其后的数字是从余下的m-1个数中 ...

2018.10.18 poj2187Beauty Contest(旋转卡壳)

传送门 旋转卡壳板子题. 就是求凸包上最远点对. 直接上双指针维护旋转卡壳就行了. 注意要时刻更新最大值. 代码: #include #include

C++_标准模板库STL概念介绍2-泛型编程

有了之前使用STL的经验后,接下来讨论泛型编程及其底层的理念: 首先我们知道STL只是泛型编程的一种: 而面向对象的编程方式关注的是编程的数据方面: 而泛型编程关注的是算法: 但是,他们之间的一个重要 ...