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

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

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

建reset.less（预设样式，功能样式），mixin.less（元素内复用的样式），common.less（公共样式）三个文件，对应的用来放置预设样式he
布局（grid）:（.g-）开头，页面分割成块，一般有.g-head，.g-body，.g-sidebar，.g-foot等
模块（module）：（.m-）开头，布局的块里再细分出几个模块，一般有.m-nav，.m-log，.m-news，.m-list等
公共模块（common-module）：（.cm-）开头，有些模块是多个页面复用的，将它们统一写在common.less中
元件（unit）:（.u-）开头，模块下多处复用的个体（样式类似即可），写在common.css中用less定制，一般有.u-btn，-u-input等
功能（function）:（.f-）开头，类似清除浮动，文本溢出之类的，如.f-clearFix，.f-ellipsis等
状态：（.is-）开头，如果一个元素有另一个状态（显示隐藏）,触发时加.is-active，.is-dis等
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{...}
}

本文链接：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来获取数据主程序&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;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%。将这些数据放缓存，会极大提高系统响应速度，但同时数据实时...

Centos安装redis6.0._New_docker的博客-程序员宝宝

redis安装