码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式过度约束

时间:2020-03-02 15:06:54      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:body   ado   div   过多   red   决定   变化   避免   pre   

过度约束

什么是CSS 样式过度约束呢?

一、CSS代码不够精简

代码不够精简,添加过多不必要的约束

例如:

相对定位元素(position: relative; )的垂直位置由 top 和 bottom 决定,一般来说使用其中一个属性即可。

HTML

<div> 我是相对定位元素 <div>

CSS

过渡约束的代码:

div{
      position:relative;
      bottom:100px;
      top:-200px;
      width: 200px;
      height: 200px;
      background-color:lightcoral;
}

好的简洁的代码

 div{
    position:relative;
     top:-200px;
     width: 200px;
     height: 200px;
     background-color:lightcoral;
}

 

二、使用后代选择器或是元素选择器

在正常开发中 HTML 和 CSS代码分开的。使用后代选择器CSS代码就会严重依附于HTML代码,当HTML代码结构结构发生变化时,CSS代码也得修改。这就会造成很麻烦的情况。

例如:这就是很麻烦的代码

body div ul li {    ...   }

 

三、尽可能使用简写属性

使用简写属性可以使代码更加简洁,轻量

1、不简洁糟糕的代码

.box{
      border-top: 100px solid blue;
      border-left:100px solid blue;
      border-right:100px solid blue;
      border-bottom:100px solid blue;
      width:100px;
      height:100px;
  }

 2、简洁的代码

.box{
      border:10px solid blue;
      width:100px;
      height:100px;
  }

 

三、避免不必要重复

1、多余重复的代码

.box1{
     color:red;       
     font-size:15px;
}    
.box2{
     color:red;
     font-size:15px;
}

  2、简洁的代码

.box1,.box2{
     color:red;
     font-size:15px;
}

 

四、好的代码格式

代码的易读性和易维护性有着直接关系。

1、不易读的代码

.pre-round,.next-round,.middle-round {   ...    }

2、易读的代码

.pre-round,
.next-round,
.middle-round {
 ...
}

易读的代码

.round {
        background-image:   
        linear-gradient(#000, #ccc),   
        linear-gradient(#ccc, #ddd);   
        box-shadow:   
        2px 2px 2px #000,   
        1px 4px 1px 1px #ddd inset;      
}

 


参考博客:

https://www.xp.cn/b.php/78217.html

 

CSS样式过度约束

标签:body   ado   div   过多   red   决定   变化   避免   pre   

原文地址:https://www.cnblogs.com/nyw1983/p/12294325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!