起名CSS命名实践

DI—Dependency Injection,即“依赖注入”:组件之间因关系由容器在运行期决定,形象的游说,即由容器动态的用某因关系注入到零部件之中。依赖注入的目的决不为软件系统带来重新多效益,而是以提升组件重用的频率,并为系统多建筑一个活、可扩大的阳台。

前面的语

  每次写HTML结构关系到CSS命名时,都如挣扎一番。关于CSS命名的正规,市面上出广大,如OOCSS、SMACSS、BEM和MVCSS等。在就之中最火之相应算BEM了。本文将详细介绍CSS命名

 

手动注入的setter注入

 

根据性的两样品类,可以分为三种注入方式:

   1)基本型注入 

   2)Spring组件类型注入

   3)集合类型注入

代码演示:

 

<bean id="boy" class="model.Boy">
    <property name="age" value="18"></property>  <!-- spring基本数据类型的注入 -->
    <property name="name" value="张三"></property>

    <property name="dog" ref="dog"></property>  <!-- spring bean组件的注入 -->

     <property name="likes" >   <!-- spring 集合类型List的注入 注意有先后顺序 -->
             <list>
                    <value type="java.lang.String">打篮球 </value>
                    <value type="java.lang.String">踢足球 </value>
                    <!--ref bean="cat"/-->
             </list>
       </property>

     <property name="likesset" >   <!-- spring 集合类型Set的注入 注意没有先后顺序 -->
            <set>
                 <value type="java.lang.String">打游戏 </value>
                 <value type="java.lang.String">聊天</value>
                  <!--ref bean="cat"/-->
            </set>
     </property>

    <property name="scoremap" >   <!-- spring 集合类型Map的注入 注意没有先后顺序 -->
          <map>
               <entry key="语文" value="100"> </entry>
               <entry key="数学" value="90"> </entry>
               <!--entry key-ref="bean" value-ref=""></entry-->
          </map>
   </property>        
 </bean>

 

主流命名

【BEM】

  说于CSS命名,当然如果提到BEM。BEM的意就是是B模块(block)、E元素(element)、M修饰符(modifier)。模块和子元素之间为此简单只下划线分隔,子元素和修饰符之间因此少独中划线分隔

  关于子元素E,有星星点点栽写法。一种植是按层级嵌套来写,如block-ele1-son-inner,但是这样勾画会造成命名了长;另一样种是扁平化,一个模块B下的有子元素,无论相互层级如何,都一直连接B,如block-inner,但是如此即便无法代表层级关系,命名时为恐怕会见冒出冲

  BEM的命名是异常好之,不然也无克成最好风靡的命名方式。但是,BEM对子元素的命名,无论是层级长命名还是扁平化短命名,都出欠缺

【NEC】

  相较于BEM以模块B为五星级元素,子元素类名吃包含继承关系的命名,网易的NEC规范应用后选择器方式

  NEC将元素分为了5近乎:布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。而后人选择器不需总体展现结构树层级,尽量能差则缺乏

.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}

  个人觉得,网易对于元素分类的做法很好。关于部分大局可复用的功能性的模块进行区分,结构更鲜明。但是,对于用后选择器的不二法门,个人非太认可。当嵌套层级较生时,命名冲突仍然是一个题材

【JD】

  京东之命名规则以表示层级嵌套关系之增长命名。当子孙模块超过4级或以上之时光,考虑于先人模块内装有识辨性的独自缩写作为新的遗族模块

<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="起名 1">
                <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

  京东这种以子元素名字了长如果用首字母缩写的做法非常赞赏,至今市面上没有任何还好的解决长命名的方案

 

行使注解配置文件

设拿spring-aop-4.1.0.RELEASE包导入项目蒙,这个保险供对注解的支撑,如果非用注解,那就是不用此保险。

xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

    <context:component-scan base-package="com.chinasofti"></context:component-scan>    

</beans>

@Service:用于标注业务层组件、

@Controller:用于标注控制层组件(如struts中之action)、

@Repository:用于标注数据访问组件,即DAO组件。

@Component:泛指组件,当组件不好归类的时光,我们可以应用此注解进行标注。

 

@Component(value="boy")
public class Boy {

    @Value(value="张三")
    private String name;
    @Value(value="10")
    private int age;
    @Resource(name="dog")
    private  Dog dog;
    Set get 方法

}

1)@Component(value=”boy”) 相当给把Boy加入Spring容器中,并于名叫boy

2)@Value(value=”张三”) 相当给setter方式,给成员变量赋值为张三

3)@Resource(name=”dog”)相当于

  <bean id = “boy” class=”com.chinasofti.Boy”>

      <property name=”dog” ref=”dog”></property>

   </bean>

总结:注解使用好替部署文件,不过,这种注解的法门不切合利用在深品种受到,因为@Component(value=”boy”)boy有或会见一如既往。

命名方式

【后代选择器还是类名】

  关于CSS命名,最深之争议就是运用后选择器还是使用类名。以下例所示

<ul class="list">
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
</ul>

<ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

<ul class="list">
    <li></li>
    <li></li>
    <li></li>
</ul>

  如果利用第一栽长类名的方式,为<li>元素设置样式,只需要如下设置即可

.list-item{}

  如果用第二栽短类名的点子,则为<li>元素设置样式,需如下设置

.list .item{}

  如果使用第三种植后选择器的章程,则为<li>元素设置样式,需如下设置

.list li{}

  如果起简单角度来拘禁,第三栽后选择器的措施最好简易,无需花时间错开叫子元素起名,且在sass中修好爱

.list{
    li{}
}

  但是,它起一个怪严重的题目,就是要是HTML结构层级较充分,往往出现选择器层级过长,如.list
li span a{}

  而且,因为后选择器强烈地依赖HTML结构,为了避免为少写一层构造,导致选择器特殊性降低,样式无法生效的情景,也只好这样勾画

  一个不得不提的题材是,CSS选择器的分析顺序是由右侧至左。而使后选择器.list
li{},浏览器需要遍历出有的li,再找找出.list下的li,效率是低于的

  因此,个人认为第三种植后选择器的主意并无是好选

  下面介绍第二种植短类名的章程

  1、选择器解析效率比第三栽方式好,毕竟.item比li的克小多

  2、短类名.list
.item同样在依赖HTML结构的情景,很可能出现选择器层级过长

  3、使用比较简单,在sass中开好,且由名叫也比简单

  4、由于吃li增加了类名,于是加了HTML文件大小

  最后介绍第三种植长类名的点子

  这种方法的挑选器效率最高,因为.list-item这个类别页面被仅出现一样不善,可类比较为id选择器的剖析速度

  由于下长类名的计,可以了无应用后选择器,则不管需考虑选择器特殊性较逊色,样式无法生效之情景,也未见面出现选择器层级过长,因为她只来一级

  但是,相应地,它太可怜之短处是类名较丰富,大大地多了HTML文件大小。于是,可借鉴京东,当子孙模块超过3级时,采用首字母缩写,并拿缩写后首许母大写的做法,在如将.list-item-link-title缩写为.Lil-title

  最终,选择而缩写的长类名作为CSS命名的关键方法

【分隔符】

  一般地,classname分隔符发3栽,中划线-,下划线_,以及首字母大写,以分隔list和item为例

//中划线
list-item
//下划线
list_item
//首字母大写
listItem

  1、中划线

  中写道可以为此来表示层级关系

<div class="box">
    <ul class="box-list">
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
        <li class="box-list-item"></li>
    </ul>
</div>

  2、下划线

  下划线可以用来表示不同的状态

<div class="box">
    <button class="box-btn box-btn_default" type="button"></button>
    <button class="box-btn" type="button"></button>
</div>

  3、首字母大写

  首配母大写得用来表示以体的待,而不得不增加的HTML结构。一般地,如果以外层加结构,可以长Wrap,在内层增加结构,可以多Inner,且非影响原本的classname的命名

<div class="boxWrap">
    <section class="box">
        <h2 class="box-title"></h2>
        <p class="box-content"></p>
    </section>    
</div>

【组件】

  通过地方的长命名方式以及分隔符的施用,解决了基础结构的命名。但是,在页面中,很可能出现部分零部件的运,这些零件可以复用到页面的多独岗位。这时,再采取方面的法就未顶方便

  于是,可以为m-为前缀,来表示这是一个零部件

<div class="box">
    <button class="m-btn m-btn_error" type="button"></button>
    <button class="m-btn" type="button"></button>
</div>

 

Log4J用法:

1)导入log4j-1.2.8.jar
位居WebRoot->WEB-INF->lib中,切记,要把她加载到品种遭到(Build
path)

2)在src目录下新建一个log4j.properties文件,此文件的力量是,设置出错信息录入方式

log4j.rootLogger=INFO,BB

log4j.appender.BB=org.apache.log4j.FileAppender
log4j.appender.BB.File=D:\\test.log
log4j.appender.BB.layout=org.apache.log4j.PatternLayout
log4j.appender.BB.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %l %F %p %m%n

3)创建一个类似吃Log.java的切近,写入public static Logger logger =
Logger.getLogger(Log.class.getName()); 得到log4j的靶子

import org.apache.log4j.Logger;

public class Log {   
    public static Logger logger = Logger.getLogger(Log.class.getName()); 
}

4)当次来非常时,就足以于catch中利用

public class Login4jServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request,response);
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        Log.logger.error("进入Login4jServlet模块");
        try{      
        String aa = request.getParameter("aa");
        int  count = 100/0;
        int  intaa = Integer.parseInt(aa);
        }catch(Exception e){   
            Log.logger.error(e.getMessage());
            request.setAttribute("errMsg","系统繁忙,请稍后连接");
            request.getRequestDispatcher("error.jsp").forward(request, response);      
        }      
    }
}

运作后会见于指定位置输出log文件,可以拉调试程序错误。

 

命名推荐

  有矣适龄的命名方式,还待语义化命名,且发出免影响语义的景象下,可以简写

【布局】

文档    doc
头部    header(hd)
主体    body    
尾部    footer(ft)    
主栏    main
侧栏    side    
容器    box/container

【通用部件】

列表    list
列表项  item
表格    table    
表单    form
链接    link
标题    caption/heading/title
菜单    menu
集合    group
条      bar
内容    content    
结果    result    

【组件】

按钮        button(btn)
字体        icon
下拉菜单     dropdown
工具栏       toolbar
分页         page
缩略图       thumbnail
警告框       alert
进度条       progress
导航条       navbar
导航         nav    
子导航       subnav
面包屑       breadcrumb(crumb)    
标签        label
徽章        badge
巨幕        jumbotron
面板        panel
洼地        well
标签页      tab
提示框      tooltip
弹出框      popover
轮播图      carousel
手风琴      collapse 
定位浮标    affix

【语义化小部件】

品牌        brand
标志        logo
额外部件    addon
版权        copyright
注册        regist(reg)
登录        login
搜索        search    
热点        hot
帮助        help
信息        info
提示        tips
开关        toggle
新闻        news
广告        advertise(ad)
排行        top    
下载        download    

【功能部件】

左浮动    fl
右浮动    fr
清浮动    clear

【状态】

前一个    previous
后一个    next
当前的    current

显示的    show
隐藏的    hide
打开的    open
关闭的    close

选中的    selected
有效的    active
默认的    default
反转的    toggle

禁用的    disabled
危险的    danger
主要的    primary
成功的    success
提醒的    info
警告的    warning
出错的    error

大型的    lg
小型的    sm
超小的    xs

 

实践

<header class="hd">
    <nav class="hd-navbar m-navbar m-varbar_primary">
        <div class="hd-navbar-tel">联系方式:400-888-8888</div>
        <ul class="hd-navbar-nav">
            <li class="Hnn-itm m-btn m-btn_info"><a href="#">登录</a></li>
            <li class="Hnn-itm m-btn"><a href="#">快速注册</a></li>
            <li class="Hnn-itm m-btn"><a href="#">关于</a></li>
            <li class="Hnn-itm m-btn"><a href="#">帮助</a></li>
        </ul>
    </nav>
    ...
</header>

【幻灯片】

<div class="carousel">
  <div class="carousel-banner">
    <a class="carousel-banner-item Cbi_slide1 Cbi_active" href="#"></a>
    <a class="carousel-banner-item Cbi_slide2" href="#"></a>
    <a class="carousel-banner-item Cbi_slide3" href="#"></a>
    <a class="carousel-banner-item Cbi_slide4" href="#"></a>          
  </div>
  <a class="carousel-control carousel-control_prev" href="javascript:;">&lt;</a>
  <a class="carousel-control carousel-control_next" href="javascript:;">&gt;</a>
  <div class="carousel-indicators">




  </div>
</div>

  关于CSS命名,并不曾最佳实践的说,根据项目之复杂性程序进行适当的命名才是亮点的  

  欢迎交流  

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图