Css代码质量？

Question

我不是css专家，所以请帮助我解决这个问题。你会认为这是很好的css代码吗？

如果您认为这不是您认为的好代码，请指出任何问题。

                               html { -webkit-text-size-adjust: 70%;  }
  body {  margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif;  }
 { font-size:14px;}
 #wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}

  #header {
  padding: 10px;

  height:251px;
  }

  #menu { width:100%; height:2.2em; margin-top:1%;  background:#80b2e4; border-      radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
 .top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
 .top_menu_left li a    { color:#fff !important; }
 .top_menu_left li a:hover  { color:#336699 !important; }

 .top_menu_right {float:right; width:17%;;height:1.2em;}
 li{list-style:none; float:left;  color:#74677E;font-size:70%;font-   weight:bold;font-     family:Arial, Helvetica, sans-serif; text-align:left; padding:0  5px;  -top:9px;  color:#fff;}

.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}

#searchbar { width:100%; height:auto;margin-top:8%;}

#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}

.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}

.box_1 { width:20%; height:auto; float:left;font-size:85%;}
.box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}

.box_2 {width:2%; height:auto; float:left;}

#content { width:87%; height:auto; margin-left:11%; margin-top:0; }
#left_content { width:7%; height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-  bottom:1%;padding-     left:5%;background-color:#A5D959;font-family:Arial, Helvetica,   sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-  family:Arial,   Helvetica, sans-serif;font-size:75%;}

 #main_content { width:59%; height:auto;float:left;  }
.main_content_header  {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}

.content_header {width:70%; height:auto; margin-left:3%;}

 /*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px;    }*/
 .left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background-   repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background-   image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat-   y;float:left; }

.left_content_middle    {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}

.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-  weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }

.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}

.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}


  #right_content { width:20%;height:auto;background-color:white;float:left;margin-   left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border-   radius:10px; -moz-border-radius:10px}
 .right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}

 .Left_portion { width:45%; height:auto; float:left;padding-left:8%;}

 .right_portion { width:45%; height:auto; float:left;}

 .right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial,  Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
 .right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}



  .menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}

  .gap {width:35%;}

   #footer   {height:40px;width:100%;margin:auto;text-align:center;text-  align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x;    line-height:40px; color:white;}
  .footer_menu {
   color: white;
   float: right;
   height: 1.2em;
   -left: 3%;
   width: 70%;
   }
     .footer_menu li {
     color: white;
     padding-right: 1%;
  }
    .footer_menu li a   { color:#fff; text-decoration:none;}
    .footer_menu li a:hover { text-decoration:underline}
    .footer_menu2 {
    background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
    color: grey;
    float: left;
    font-size: 13px;
    margin-top: 21px;
    width: 100%;
    }
   .footer_menu strong  { font-weight:lighter; color:#666}

Answer 1

html { -webkit-text-size-adjust: 70%;  }
body {  margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif;  }

如果值为0，则不需要指定单位(px)

{ font-size:14px;}

这不是设计任何东西

#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}

假设#wrap是div或其他块级元素，则不需要给它100%的宽度，因为默认情况下所有块元素都是100%宽的。默认情况下，填充在几乎所有元素中也是0。

#header {
padding: 10px;

height:251px;
}

您不应该给元素(除了图像/画布)一个高度，因为如果用户增加字体大小，元素应该调整到新的大小的内容。

#menu { width:100%; height:2.2em; margin-top:1%;  background:#80b2e4; border-      radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}

再说一遍，不需要设置宽度，你为什么突然用它们来表示高度呢？将浏览器特有的属性放在“真实”属性之前也是很常见的。

.top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
.top_menu_left li a    { color:#fff !important; }
.top_menu_left li a:hover  { color:#336699 !important; }

以“左”(或右、粗体、红色等)作为类名并不能将内容与演示文稿分开。此外，您应该尽量避免使用！重要，因为它经常导致更多的使用！重要和很难找到错误。

.top_menu_right {float:right; width:17%;;height:1.2em;}

同样，类名与设计相关。

li{list-style:none; float:left;  color:#74677E;font-size:70%;font-   weight:bold;font-     family:Arial, Helvetica, sans-serif; text-align:left; padding:0  5px;  -top:9px;  color:#fff;}

你真的想要你所有的李:S在你的整个文件中有这种风格吗？还有语法错误(如-top)。

.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}

同样，类名--而且，这个类名应该在相同元素的其他样式旁边。

#searchbar { width:100%; height:auto;margin-top:8%;}

当您将宽度或高度设置为默认值时，无需在此设置宽度或高度。另外，为什么在这里使用#id，而在其他几乎所有东西上都使用.class？

我将在这里停止引用代码，因为其他代码包含了几乎相同的错误。

我会改进的几件事：

• 不要使用与设计相关的类或ID名称，如左和右。
• 不要使用！重要的是--而是以一种不需要它的方式来规划代码。
• 不要对每件事都用百分比。
• 以一种更有意义的方式构造您的CSS。您不必将其全部保存在一个文件中(实际上，您可能不应该这样做(但是您应该只向浏览器提供一个文件)。本技巧可能需要一本完整的书，但需要一些东西才能开始：
  • 从基本元素选择器(如h1、p、a、ul等)开始--页面上所有内容的默认通用样式。
  • 接下来进行布局--右/左列和“模块”的其他区域。
  • 最后一个样式你的模块-#搜索栏应该有这个bg，#最近-评论链接应该是红色的，#页脚的ul不应该有任何子弹等。

另外，由于HTML中的其他内容都使用破折号分隔，所以我也将其用于类名和ID名。

Answer 2

我不认为它是“好的”CSS代码，因为：

• 它不一致(空格、多行/单行等)
• 有明显的语法错误
• 有很多重复
• 大部分是基于百分比的尺寸，在很多情况下都会被打破。
• 默认情况下，还是会使用一些规则，因此不需要指定
• !important关键字的使用太多了