网易NEC命名规范笔记_pannno的博客-程序员宝宝

技术标签: css  css规范  css结构  

写完一个30多个页面的项目,代码冗余和命名污染确实很头大,代码冗余用less可以尽可能的减少,命名污染问题看了网易的NEC规范,发现非常不错,结合了下less,做个总结

前提:放弃id,统一用class命名;属性间不换行且重要的属性靠前原则;

  1. 建reset.less(预设样式,功能样式),mixin.less(元素内复用的样式),common.less(公共样式)三个文件,对应的用来放置预设样式he
  2. 布局(grid):(.g-)开头,页面分割成块,一般有.g-head,.g-body,.g-sidebar,.g-foot等
  3. 模块(module):(.m-)开头,布局的块里再细分出几个模块,一般有.m-nav,.m-log,.m-news,.m-list等
  4. 公共模块(common-module):(.cm-)开头,有些模块是多个页面复用的,将它们统一写在common.less中
  5. 元件(unit):(.u-)开头,模块下多处复用的个体(样式类似即可),写在common.css中用less定制,一般有.u-btn,-u-input等
  6. 功能(function):(.f-)开头,类似清除浮动,文本溢出之类的,如.f-clearFix,.f-ellipsis等
  7. 状态:(.is-)开头,如果一个元素有另一个状态(显示隐藏),触发时加.is-active,.is-dis等
  8. js抓取类:(.j-)开头,为了方便js获取DOM元素,加在需要DOM操作的类上,如.j-nav等

依照上述规则写出来的代码应该是下面这样,结构清晰,结合less,应该可以初步很好地解决代码冗余和命名污染的问题了,等下一个项目实践后再来修改一下

.g-index{
  .g-head{
    .m-search{
      .u-icon-search{...}
      .u-ipt{...}
    }
    .cm-nav{
      ul{
        li{...}
        li{...}
        li{...}
      }
    }
  }
  .g-body{...}
  .g-foot{...}
}


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41636338/article/details/79836340

智能推荐

一个简单的网页制作作业,宠物html静态网页制作成品代码(学生网页设计作业源码)[email protected]蜡笔小新星的博客-程序员宝宝_网页设计与制作成品

网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件

TensorFlow入门第六课——保存和载入模型_To_1_oT的博客-程序员宝宝

一、保存自己搭建网络的模型在前面简单的神经网络基础上填加了保存模型的代码。代码如下:import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data# 载入数据集mnist = input_data.read_data_sets("MNIST_data", one_hot=True)...

Acwing_851spfa求最短路【SPFA算法】_DJL_DJL_DJL的博客-程序员宝宝

题目链接:Acwing_851spfaAC代码:#include<iostream>#include<cstring>#include<algorithm>#include<queue>using namespace std;const int N = 1e5 + 10;int h[N], e[N], w[N], ne[N], idx;int n, m;queue<int> q;int st[N], dist[N];vo

Flex4 弹出窗口的数据交互_LUKA530230的博客-程序员宝宝

取出数据使用组件属性,设置返回字段的getter来获取数据主程序<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" ...

java redis缓存理解_Java项目中使用Redis缓存案例_weixin_39638304的博客-程序员宝宝

缓存的目的是为了提高系统的性能,缓存中的数据主要有两种:1.热点数据。我们将经常访问到的数据放在缓存中,降低数据库I/O,同时因为缓存的数据的高速查询,加快整个系统的响应速度,也在一定程度上提高并发量。2.查询耗时的数据。如果有一些数据查询十分耗时,那么每次请求这些数据时,都去数据库查询的话,会使得系统响应速度特别低,数据库cpu 100%。将这些数据放缓存,会极大提高系统响应速度,但同时数据实时...

随便推点

windows10安装redis数据库,并设置开机自启动_东林牧之的博客-程序员宝宝_windows10 开启redis

window10设置redis开机自启动,windows10安装redis数据库,windows10使用redis数据库,windows如何设置redis开机自启动,

软件工程的经验分享(来自一位前辈的经验)_Daniel_Dragon的博客-程序员宝宝_软件工程 投稿经验分享

本文来自:https://blog.csdn.net/Max__Payne/article/details/1858862感谢这位前辈的分享1、分享第一条经验:“学历代表过去、能力代表现在、学习力代表未来。”其实这是一个来自国外教育领域的一个研究结果。相信工作过几年、十几年的朋友对这个道理有些体会吧。但我相信这一点也很重要:“重要的道理明白太晚将抱憾终生!”所以放在每一条,让刚刚毕...

SSM框架+WebSocket实现网页聊天(Spring+SpringMVC+MyBatis+WebSocket)_黄复贵的博客-程序员宝宝

建站不止于增删改查,还有很多很有魅力的地方。对于通信聊天这块已经青睐好久了,前段时间在做的j2ee项目运用到Spring+SpringMVC+MyBatis的框架集合,是关于一个社交平台的网站,类似于facebook,twitter,微博等。在做完基本的CURD(例如评论模块)后,开始研究网站通信并应用于项目中。提到通信,大家都知道Socket。确实,运用Socket能在服务器与客户端之间建立一个数

AutoCompleteExtender返回text-value键值对的变通方法_ytc_1224的博客-程序员宝宝_前端 返回text value

项目中遇到一个问题:有些下拉列表的项目过多,用户选择起来十分麻烦。这使我想到了使用Ajax的AutoCompleteExtender控件替代DropDownList来解决这个问题。但是标准的AutoCompleteExtender控件只返回Text列表,我如何取得用户选择的ID呢? 网络上有些做法是改变AutoCompleteExtender的某些内部函数(http://www.cnb

计算机语言TOP10!该如何选择合适自身的_YNYS灿若星辰的博客-程序员宝宝_哪种计算机语言最好

程序编写行业大概有700种编码语言。了解计算机语言的必要性及其其怎样危害必须实行的主要职责尤为重要。一篇文章可循700种语言不实际,都没有实际意义。因而,小编筛出了当下最受欢迎的缘故,在文中中一一剖析其特点、优点和缺点和发展前景,并明确其是不是有学习培训使用价值。    原文中一些见解很有可能比较主观性,阅读者能够在看了解读后追究其最合适自身学习培训的语言。下边就刚开始依照排行由后至前的次序了解这种语言吧。    照片    彩色图库:GitHub    第十名:C语言    C语言是一

android安装图标不显示文字,最新版BottomNavigationView 3个以上图标不显示文字解决方法..._当然是不承认的博客-程序员宝宝

既然遇到此问题,那么BottomNavigationView的作用就不多介绍了。当图标小于等于3个时,显示的是图标加文字。当图标大于3个时,显示图标和当前页的文字。 网上搜索使用反射的方法,修改BottomNavigationMenuView的shiftMode属性https://www.jianshu.com/p/0ba25cc65889遗憾的是我的代码中BottomNavigation...

推荐文章

热门文章

相关标签