如何规范 CSS 的命名和书写

我开始学前端的时候也是对于规范问题头疼,后来看了网易的NEC规范,惊呼牛逼

NEC : 更好的CSS样式解决方案

 

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

显示属性自身属性文本属性和其他修饰
 displaywidthfont
 visibilityheighttext-align
 positionmargintext-decoration
 floatpaddingvertical-align
 clearborderwhite-space
 list-styleoverflowcolor
 topmin-widthbackground

 

 

 

 

 

 

 

1
.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}

如果属性间存在关联性,则不要隔开写。

1
2
/* 这里的height和line-height有关联性 */
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}

私有在前,标准在后

先写带有浏览器私有标志的,后写W3C标准的。

1
.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;

 

作者:词晖 链接:https://www.zhihu.com/question/19586885/answer/48933504 来源:知乎

CSS书写顺序

  1.位置属性(position, top, right, z-index, display, float等)

  2.大小(width, height, padding, margin)

  3.文字系列(font, line-height, letter-spacing, color- text-align等)

  4.背景(background, border等)

  5.其他(animation, transition等)

<img src="https://pic4.zhimg.com/50/5a67fa4dab92c018abfd97e4ab286ac9_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic4.zhimg.com/5a67fa4dab92c018abfd97e4ab286ac9_r.jpg">

CSS书写规范使用CSS缩写属性

  CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

<img src="https://pic3.zhimg.com/50/2166c1fb168908a5858998eab2d309aa_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/2166c1fb168908a5858998eab2d309aa_r.jpg">

  去掉小数点前的“0”

<img src="https://pic2.zhimg.com/50/ea65b1c1c00c792866a670e9d66161a8_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic2.zhimg.com/ea65b1c1c00c792866a670e9d66161a8_r.jpg">

  简写命名

  很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

<img src="https://pic3.zhimg.com/50/53ddaefb44a6a8ce5b54de9f15466fca_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic3.zhimg.com/53ddaefb44a6a8ce5b54de9f15466fca_r.jpg">

  16进制颜色代码缩写

  有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

<img src="https://pic4.zhimg.com/50/46bf23e08a7195ec7091217bb5c667d6_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic4.zhimg.com/46bf23e08a7195ec7091217bb5c667d6_r.jpg">

  连字符CSS选择器命名规范

  1.长名称或词组可以使用中横线来为选择器命名。

  2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  输入的时候少按一个shift键;

  浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  能良好区分JavaScript变量命名(JS变量命名是用“_”)

<img src="https://pic2.zhimg.com/50/45dddce1b5295a7c09f2380900dce8d1_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic2.zhimg.com/45dddce1b5295a7c09f2380900dce8d1_r.jpg">

  不要随意使用Id

  id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。 

<img src="https://pic2.zhimg.com/50/951bee68367f559a1fd37db3d242e59f_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic2.zhimg.com/951bee68367f559a1fd37db3d242e59f_r.jpg">

  为选择器添加状态前缀

  有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

<img src="https://pic4.zhimg.com/50/d81807b01ec5d710debe3f0b4191ae2f_hd.jpg" data-rawwidth="500" data-rawheight="250" class="origin_image zh-lightbox-thumb" width="500" data-original="https://pic4.zhimg.com/d81807b01ec5d710debe3f0b4191ae2f_r.jpg">

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

  头:header

  内容:content/container

  尾:footer

  导航:nav

  侧栏:sidebar

  栏目:column

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

  左右中:left right center

  登录条:loginbar

  标志:logo

  广告:banner

  页面主体:main

  热点:hot

  新闻:news

  下载:download

  子导航:subnav

  菜单:menu

  子菜单:submenu

  搜索:search

  友情链接:friendlink

  页脚:footer

  版权:copyright

  滚动:scroll

  内容:content

  标签:tags

  文章列表:list

  提示信息:msg

  小技巧:tips

  栏目标题:title

  加入:joinus

  指南:guide

  服务:service

  注册:regsiter

  状态:status

  投票:vote

  合作伙伴:partner

注释的写法:

  /* Header */

  内容区

  /* End Header */

Id的命名:

  1)页面结构

  容器: container

  页头:header

  内容:content/container

  页面主体:main

  页尾:footer

  导航:nav

  侧栏:sidebar

  栏目:column

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

  左右中:left right center

(2)导航

  导航:nav

  主导航:mainnav

  子导航:subnav

  顶导航:topnav

  边导航:sidebar

  左导航:leftsidebar

  右导航:rightsidebar

  菜单:menu

  子菜单:submenu

  标题: title

  摘要: summary

(3)功能

  标志:logo

  广告:banner

  登陆:login

  登录条:loginbar

  注册:register

  搜索:search

  功能区:shop

  标题:title

  加入:joinus

  状态:status

  按钮:btn

  滚动:scroll

  标籤页:tab

  文章列表:list

  提示信息:msg

  当前的: current

  小技巧:tips

  图标: icon

  注释:note

  指南:guild

  服务:service

  热点:hot

  新闻:news

  下载:download

  投票:vote

  合作伙伴:partner

  友情链接:link

  版权:copyright

注意事项::

  1.一律小写;

  2.尽量用英文;

  3.不加中槓和下划线;

  4.尽量不缩写,除非一看就明白的单词。

CSS样式表文件命名

  主要的 master.css

  模块 module.css

  基本共用 base.css

  布局、版面 layout.css

  主题 themes.css

  专栏 columns.css

  文字 font.css

  表单 forms.css

  补丁 mend.css

  打印 print.css

转载于:https://www.cnblogs.com/rik28/p/8417911.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453511.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《学做程序经理》完整版

文/Joel Spolsky 译/罗小平 指派一名优秀的程序经理,是团队产出优秀软件的重要前提之一。你的团队里可能没有这样的人,其实绝大多数团队都没有。 Charles Simonyi,这位曾与MarthaStewart(译者注:美国女富豪&#…

java工程mvn引用jar_maven 项目加载本地JAR

将jar安装到本地的maven仓库1.首先确定本地有maven环境。2.安装本地jar模板:mvn install:install-file -Dfile -DgroupId -DartifactId -Dversion -Dpackaging示例:mvn install:install-file -DfileF:\jave-ffmpegjave-1.0.2.jar -DgroupIdffmpegjave -D…

优秀的软件企业为何倒下?

最近不到一个月,就看到两家著名公司——SUN公司和Borland公司相继被收购,引起IT界不小的震动,让人感慨万分。在此之前有北电(Nortel)、摩托罗拉的衰退,再往前有 美国数字设备公司Digital(Digita…

kafka exporter v0.3.0 发布: Prometheus官方推荐,欢迎试用

2019独角兽企业重金招聘Python工程师标准>>> 时隔1个半月,kakfa exporter v0.3.0于今日正式发布,欢迎大家试用。 项目地址 Github: https://github.com/danielqsj/kafka_exporter Docker Hub: https://hub.docker.com/r/danielqsj/kafka-expo…

java手动切换成独立显卡_JAVA设计模式之调停者模式

在阎宏博士的《JAVA与模式》一书中开头是这样描述调停者(Mediator)模式的:调停者模式是对象的行为模式。调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用。从而使它们可以较松散地耦合。当这些对象中的某些对象之间的相互作用发…

Hadoop2.6.0完全分布式安装

1、修改主机名称 对master/slave1/slave2同时配置为Master/Slave1/Slave2 masterMaster:~$ sudo gedit /etc/hostname 上述3个虚机结点均需要进行以上步骤 2、填写主机IP 对master/slave1/slave2同时配置 masterMaster:~$ sudo gedit /etc/hosts 192.168.48.128 master192.168.…

DEX加密效果分析

dex加密目的:保护安卓应用的Java源代码,避免被恶意分析,技术被窃取准备工具:1、apktool :反编译apk,提取smali代码2、dex2jar :将dex转化为jar文件3、jd-gui :查看jar文件&#xff0…

kd树的原理

kd树就是一种对k维空间中的实例点进行存储以便对其进行快速检索的树形数据结构,可以运用在k近邻法中,实现快速k近邻搜索。构造kd树相当于不断地用垂直于坐标轴的超平面将k维空间切分。    假设数据集\(T\)的大小是\(m*n\),即\(T{x_1,x_2,...x_m}\),其中…

力软 java主从表保存_JAVA常用知识总结(十二)——数据库(二)

MySQL主从热备份工作原理简单的说:就是主服务器上执行过的sql语句会保存在binLog里面,别的从服务器把他同步过来,然后重复执行一遍,那么它们就能一直同步啦。整体上来说,复制有3个步骤:作为主服务器的Maste…

Java——线程的创建,线程池

线程 多线程就是一个程序中有多个线程在同时执行。 多线程下CPU的工作原理 实际上,CPU(中央处理器)使用抢占式调度模式在多个线程间进行着高速的切换。对于CPU的一个核而言,某个时刻,只能执行一个线程,而CPU的在多个线程间切换速度…

java并查集找朋友圈_图—并查集(解决朋友圈问题)

图也是一种 非线性结构,是由多个顶点组成的关系集合组成的一种数据结构。图可以分为两种,无向图和有向图。★图的定义:★典型问题:利用图能够解决很多问题,这里有一个较为典型的问题,假如已知有n个人和m对好友关系(存于…

(三)SpringBoot之配置文件详解:Properties和YAML

一、配置文件的生效顺序,会对值进行覆盖: 1. TestPropertySource 注解2. 命令行参数3. Java系统属性(System.getProperties())4. 操作系统环境变量5. 只有在random.*里包含的属性会产生一个RandomValuePropertySource6. 在打包的j…

fscanf()php,fscanf函数的用法

以前解析有规律的文件的时候要么用正则表达式,要么就是傻傻的自己写程序来解析有规律的文件。今天突然发现c的库函数中有一个现成的可以解析有规律的文件的函数,就是fscanf()函数。fscanf 位于头文件中,函数原型为 int fscanf(FILE * stream,…

为什么设计师应该学习编写代码

通常,在完成了一件网页设计后,设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此(完整图文版)。残酷的事实就是&#…

iOS内存区域部分内容

目前参考这里: https://www.zhihu.com/question/263823072/answer/273452932 以后整理相关的代码问题。 更多参考资料: https://stackoverflow.com/questions/79923/what-and-where-are-the-stack-and-heap 堆栈:https://baike.baidu.com/ite…

浅析Numpy.genfromtxt及File I/O讲解

Python 并没有提供数组功能,虽然列表 (list) 可以完成基本的数组功能,但它并不是真正的数组,而且在数据量较大时,使用列表的速度就会慢的让人难受。为此,Numpy 提供了真正的数组功能,以及对数据快速处理的函…

php如果实现日历的制作,教大家制作简单的php日历

最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:一、计算数据1、new一个Calendar类2、初始化两个下拉框中的数据,年份…

编程要养成的好习惯

1.- DRY: Don’t repeat yourself. DRY 是一个最简单的法则,也是最容易被理解的。但它也可能是最难被应用的(因为要做到这样,我们需要在泛型设计上做相当的努力,这并不是一件容易的事)。它意味着,当我们在…

flink整合java,Flink使用SideOutPut替换Split实现分流

基于apache flink的流处理实时模型44元包邮(需用券)去购买 >以前的数据分析项目(版本1.4.2),对从Kafka读取的原始数据流,调用split接口实现分流.新项目决定使用Flink 1.7.2,使用split接口进行分流的时候,发现接口被标记为depra…

WCF和webservice的区别

微软论坛的斑竹回答如下: 脑内:果然是高大上啊 1.WebService:严格来说是行业标准,不是技术,使用XML扩展标记语言来表示数据(这个是夸语言和平台的关键)。微 软的Web服务实现称为ASP.NET Web Ser…