Question

事情已经失控。

我的应用即将完成，只有少数 unanswered SO questions 。

我现在开始清理我的代码，从样式表开始。

起初有一种疯狂的方法，但随后我随意开始将代码放入两个文件中的一个： bootstrap_and_customization.css.scss ＆amp;的 attributes.css.scss

忽略这些生成的文件：

account_activations.css.scss
activities.css.scss
application.css
comments.css.scss
custom.css.scss
days_missed.css.scss
framework_and_overrides.css.scss
notifications.css.scss
pages.css.scss
password_resets.css.scss
relationships.css.scss
scaffolds.css.scss
sessions.css.scss
users.css.scss。

不要求您清理我的代码，只是询问有关哪些内容适合您和最佳做法的建议。我在网上找不到任何明确的答案：

我应该删除这些附加文件还是从两个文件中分散我的代码？而且我还想重命名一些课程和id更清楚地表示他们的行为，而不是像.america那样挑选任意名称。

您对如何执行此操作有任何建议或最佳做法吗？

bootstrap_and_customization.css.scss

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                         #fff;
$font-family-sans-serif:          'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                   45px;
$navbar-default-bg:               white;
$navbar-default-brand-color:      #446CB3;
$brand-primary:                   #000;
$jumbotron-bg:                    #FFFFFF;

@import 'bootstrap-sprockets';
@import 'bootstrap';

.valuation-padding {
  padding-bottom: 13px;
}
.comment-content-padding {
  padding-top:  30px;
}

.pagination {
  vertical-align: center;
  text-align: center;
  .active { 
    a {
    color: white;
    background-color: #446CB3; 
    }
  }

      a {
        color: white;
        background-color: #446CB3; 
      }

}

.pagination > li > a, .pagination > li > span {
    color: #446CB3;
}

//////
.padding-feed {
  padding-left: 30px;
}

.float-feed {
  float: left;
  display: inline-block;
}

.activities {
  padding-top: 30px;
  padding-bottom: 30px;

  em {
    color: #777;
    font-size: 12px;
    padding-left: 5px;
  }
}

.comment-border {
  border-bottom: solid 1px #CCC;
  padding: 5px 0;
  em {
    color: #777;
    font-size: 12px;
    padding-left: 5px;
  }
}

////////


.comments-same-line {
  display: inline-block;
}


.ad {
  width: 100%;
}


.col-xs-2 {
  float: none;
  padding-left: 0px;
  width: 9.6666666667%;
}

#two.form-control {
  background-color: #ecf0f1;
  padding-right: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.form-control {
  margin-top: 15px;
  margin-bottom: 15px;
}

body { padding-bottom: 100px; }

.bad-pad {
  display: inline-block;
  padding-left: .5em;
}


.label-primary {
  background-color: #446CB3;
  color: white !important;
  a {
  color: white;
}
}

.label-info {
  background-color: #446CB3;
  color: white !important;
  a {
  color: white;
}
}

.label-warning {
  background-color: #ccac00;
  color: white !important;
  vertical-align: middle;
  display: inline-block;
  a {
  color: white;
}
}

.label-danger {
  background-color: #c0392b;
  vertical-align: middle;
  a {
  color: white;
}
}

.badge {
  background-color: #ccac00;
  font-size: 12px
}

#red.badge {
  background-color: red;
}

.habit-space {
    padding-bottom: 25px;
    display: block;
}

.shrink-center {
    padding-left: 10em;
    padding-right: 10em;
    padding-top: 25px;
    padding-bottom: .5em;
    display: block;
}

// Span progressbar from badge to badge
td.stretch {
    width: 350px;
    vertical-align: center;
}

// Condense badges to sit up against progressbar
td.condense-red {
    color: white;
    text-align: center;
    width: 80px;
    font-size: 75%;
    font-weight: bold;
    padding-right: 2px;
    padding-left: 2px;
    background-color: #c0392b;
}

td.condense-gold {
    color: white;
    text-align: center;
    width: 80px;
    font-size: 75%;
    font-weight: bold;
    padding-right: 2px;
    padding-left: 2px;
    background-color: #446CB3;
}

// Position progressbar in the middle and more
.progress {
  margin-bottom: 0px;
  border-radius: 0px;
}

// Make progress bar's progress default blue
.progress-bar{
  background-color: #446CB3;
    font-size: 75%;
    font-weight: bold;
}

.h {
  display: block;
  font-size: 50px;
  margin-top: .87em;
  margin-bottom: .4em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold; 
}

.float-right {
  float: right;
}

.float-right {
  float: left;
}

.page-header {
  border-bottom: 1px solid #eee;
}

.gold-standard {
  color: #ccac00;
  a {
    color: #ccac00;
  }
}

#gold-standard {
  border-color: #ccac00;
}

.btn {
  background: #446CB3;
  color: #ffffff;
}

#gold.btn {
   background: #ccac00;
}

#red.btn {
   background: #c0392b;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn:active{
  color: #FFFFFF;
}

.jumbotron {
  background-color: #446CB3;
  color: white;
  padding-top: 35px;
  padding-bottom: 40px;
  text-align: left;
  padding-left: 36px;
  p {
    color: #a0b4f0;
  }
}

.link-jumbotron {
    a {
    color: #a0b4f0;
  }
}

.navbar { margin-bottom: 0 }

.green {
    a {
      color: #ccac00;
    }
    color: #ccac00;
    padding-top: 2px;
    padding-bottom: 2px;
}

.striked {
    color: red;
}

.red {
    vertical-align: center;
    a {
      color: #c0392b;
    }
    color: #c0392b;
    padding-top: 2px;
    padding-bottom: 2px;
}

.navbar-brand {
  margin-left: 0px !important;
}

/* link */
.navbar-default .navbar-nav > li > a {
  color: #446CB3;
}

.panel-default > .panel-heading {
  background-color: #2E2E2E;
  color: white;
}

.panel-default {
  border-style: none;
}

.sidebar-daddy {
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
}

#sidebarheadingtop {
  padding-top: .1em;
  border: none;
  border-radius: 0px;
  background-color: #446CB3;
  color: white;
  padding-bottom: 3px;
}

#sidebarheading {
  padding-top: .1em;
  border-radius: 0px;
  border: none;
  background-color: #446CB3;
  color: white;
  padding-bottom: 3px;
}

#sidebarsectiontop {
  margin-top: 0px;
  margin-bottom: 0px;
  border-bottom-right-radius: 0em 0em;
  border-bottom-left-radius: 0em 0em;
  border-style: none;
}

#sidebarsection {
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
  border-style: none;
}

#sidebarsectionbottom {
  margin-top: 0px;
  margin-bottom: 0px;
  border-top-radius: 0px;
  border-style: none;
}

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}

a {
  &:hover {
    color: #666;
    text-decoration: none;
  }
}

attributes.css.scss

// Place all the styles related to the Values controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//sidebar
.ingrain-padding {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  display: inline-block;
  ul {
    margin-bottom: 0px;
  }
}

.recommendations-padding {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

#tag_cloud {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  line-height: 1.6em;
  .s { font-size: 10px; }
  .m { font-size: 14px; }
  .l { font-size: 18px; }
}

.stats-left {
  display: inline-block;
  width: 50%;
}

.stats-right {
  vertical-align: top;
  display: inline-block;
  width: 50%;
}

.blue-background {
  background-color: #446CB3;
  padding-left: 15px;
  a {
    color: white;
  }
}

.full-blue-background {
  background-color: #446CB3;
  width: 100%;
  text-align: center;
  border: solid #eee;
  border-width: 1px 0px 1px 0px;
  a {
    color: white;
  }
}

.gold-background {
  background-color: #ccac00;
  padding-left: 15px;
  a {
    color: white;
  }
}

.border-box-1 {
  border: solid #eee;
  border-width: 1px 1px 0px 0px;
}

.border-box-2 {
  border: solid #eee;
  border-width: 1px 1px 0px 0px;
}

.border-box-3 {
  border: solid #eee;
  border-width: 1px 1px 0px 0px;
}

.border-box-4 {
  border: solid #eee;
  border-width: 1px 1px 0px 0px;
}

.border-box-5 {
  border: solid #eee;
  border-width: 1px 0px 0px 0px;
}

.border-box-6 {
  border: solid #eee;
  border-width: 1px 0px 0px 0px;
}

.border-box-7 {
  border: solid #eee;
  border-width: 1px 0px 0px 0px;
}

.border-box-8 {
  border: solid #eee;
  border-width: 1px 0px 0px 0px;
}

.count-padding {
  display: inline-block;
  padding-top: .8em;
  padding-bottom: .8em;
  padding-left: .9em;
  padding-right: .9em;
  font-size: 80%;
  font-weight: bold;
}

.goal-padding {
  padding-top: .5em;
  padding-bottom: .5em;
  padding-left: 1em;
  padding-right: 1em;
}

.goalname {
  padding-top: .7em;
  padding-bottom: .7em;
  padding-right: .5em;
}

.goaldeadline {
  width: 70px;
  padding-left: .2em;
  padding-right: 1em;
  padding-top: .7em;
  padding-bottom: .7em;

}

#white {
  color: white;
}

.deadline_label_class {
  display: inline;
}

.quantified-horizontal {
  width:150px;
  display:inline-block; 
  vertical-align:top;
}

.set-stat {
    display: block;
    margin-left: 12px;
}

.set {
  width: 7%;
  vertical-align: top;
}

.habits {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}

// Add indenting and background to root route
.add-padding-background {
  padding-left: 1.5em;
  padding-right: 1.5em;
  background: #f7f7f9;
}


// Add indenting to root route
.add-padding {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.test {
  padding-left: 1.2em;
  padding-right: 1.2em;
  padding-top: 1.2em;
  padding-bottom: 1.2em;
}

body  {color:black;}
.gold-standard {color:#ccac00;}

table {
  padding-top: 1.2em;
  padding-bottom: 1.2em;
}

.valuation {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}

.goals {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
}

.comment {
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.stats {
  * {
    padding: 0px;
    margin: 0px
}
  display: inline-block;
  padding-left: .5em;
  padding-right: .5em;
  padding-top: .1em;
  padding-bottom: .1em;
    a {
    color: #a0b4f0;
    font-size: 21px;
    font-weight: 200;
  }
}

.america {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.feed-padding {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 7em;
  padding-right: 7em;
}

.feed-button-padding {
  padding-bottom: 1.5em;
}

.comment-background {
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  padding-top: .9em;
  padding-bottom: .9em;
  padding-left: .9em;
  padding-right: .9em; 
  border-radius: 4px;
}

.center-buttons {
  margin-left: 35%;
}

.center-buttons-feed {
  margin-left: 40%;
}

.center-buttons-feed-2 {
  padding-top: 2px;
  padding-left: 10px;
  margin-left: 46%;
}

.center-buttons-feed-3 {
  margin-left: 46%;
}

.like-float {
  padding-top:  12px;
  float: left;
  padding-left: 15px;
}


.centered {
    padding: 7px;
    float: left;
    display: inline-block;
}


.middle {
  text-align: center;
}

.category {
  float: right;
}


td {
  padding-top: .7em;
  padding-bottom: .7em;
  padding-left: .7em;
  padding-right: .7em;
}

.valuations-button {
  margin-top : -9px;
  margin-left : 10px; 
}

ul
{
    list-style-type: none;
    padding:0; margin:0;
}

select {
  width: 30.1%;
  border: 1px solid #cccccc;
  background-color: #ecf0f1;
}

// Breaks down quantifieds horizontally
.attempt {
  width:150px;
  display:inline-block; 
  vertical-align:top;
  padding: .8em .8em .8em .8em;
}

.america1 {
  float: left;
}

.deadline {
  width: 8%
}

.goal {
  width: 70%
}

.valuations-button {
  margin-top : -9px;
  margin-left : 10px; 
}

.missed {
  text-align: right;
  color: #c0392b;
  font-weight: bold;
  clear: both;
}

.collection_check_boxes {
  margin-left: 3px;
  margin-right: 6px;
}

.committed {
  text-align: center;
}


.text_field {  
    margin: 5px 5px 0px 5px;
  }

.valuations-button {
  margin-top : -9px;
  margin-left : 10px; 
}

.valuations-button {
  margin-top : -9px;
  margin-left : 10px; 
}

.sidebar {
  background: #F8F8F8;
  border: #E7E7E7;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 5px;
}

感谢您的指导！

Answer 1

好的，这个网站对于正确的命名约定非常有用：

http://www.apppie.org/pages/approach/naming.html

“避免名称中的演示文稿或位置特定的字词，如蓝色，   文本灰色或侧块。当你决定改变时会发生什么   颜色？班级蓝色实际上是红色的吗？

不要使用描述元素内容的类名。一天   你可以想出一个类名.products-list和另一天   您注意到产品列表样式非常适合列表   鸣叫。那你会怎么做？重新实现.products-list与之相同   样式，但称之为.tweets-list或只是让推文活在里面   。产品列表？最好给它一个像.entries这样的抽象名称   从一开始。

名称应为小写，使用短划线 - 作为分隔符   多字的类名。它清晰，可读，可以区分CSS   强调案件和骆驼案件命名。

使用完整的描述性词语。缩写一个单词可能会为您节省一些   最初键入的毫秒数，但可能会使您的代码难以阅读，   花费你更多时间在路上。在这个意志中保持一致   为您节省考虑如何缩写单词的时间   几个月前。

使用名词命名对象和模块。

在命名修饰符和状态时，请使用形容词   描述对象的类型或状态。“

关于如何组织样式表，我只会使用bootstrap覆盖bootstrap，其他所有内容都会进入属性，因为将其分解为各种文件会产生更多的冗余，因为我在多个地方使用了类。

如何使样式表更加清晰＆amp;有效？

1 个答案: