以文本方式查看主题
-
咿思舞论坛
(http://bbs.145829.com/index.asp)
--
『网站资源』
(http://bbs.145829.com/list.asp?boardid=8)
----
CSS重构技巧和难题，案例
(http://bbs.145829.com/dispbbs.asp?boardid=8&id=792)
-- 作者：admin
-- 发布时间：2012/5/29 1:22:19
-- CSS重构技巧和难题，案例
以下内容含脚本,或可能导致页面不正常的代码
<font face="Verdana">CSS重构技巧和难题，案例</font> 最近在做一个新的小应用，前端基本上是我做的，码了大概600行的css，清楚并痛恨css管理的不易。 主要有这么几个方面的问题： <blockquote> 1、该用"空格"还是该用">"，用>更严谨，不容易出现因为class重名导致的问题，但问题是不易修改。比如加在外面加一层container，那这一块的css都要加上这个container。用"空格"则相反，容易调整结构，但对于一些通用的class名称，比如name等，要么只用一个name，要么就给name都加上前缀。 2、圆角问题。有些地方圆角是4，而有些地方是8，这样你要么直接用round4，round8来命名，要么就直接把圆角的css写进container的css里边。不管哪一种，看起来都是特别别扭的。 3、一般习惯用同一个css文件，但一个css文件就会显得特别大，尤其是到后来的时候，这个css文件就会变得难以维护，因为你已经很难找到你该插入的位置了。 </blockquote> 所以，在坚持着写完这些css之后，就希望用<a title="SASS" href="http://sass-lang.com/" target="_blank">Sass</a>或者<a title="LESS" href="http://lesscss.org/" target="_blank">LESS</a>对我的css进行重构。同时也是第一次使用，这也是对Sass之类的一个学习。 重构的第一步是决定用<a title="SASS" href="http://sass-lang.com/" target="_blank">Sass</a>还是用<a title="LESS" href="http://lesscss.org/" target="_blank">LESS</a>，大致翻看了<a title="SASS" href="http://sass-lang.com/" target="_blank">Sass</a>和<a title="LESS" href="http://lesscss.org/" target="_blank">LESS</a>的文档之后，以及其他人的一些比较<sup><span style="LINE-HEIGHT: 17px; FONT-SIZE: 12px">[<a href="http://bbs.145829.com/post.asp?action=new&boardid=8&stype=0#reference">1</a>]</span></sup>之后，决定使用<a title="SASS" href="http://sass-lang.com/" target="_blank">Sass</a>，原因是它跟Ruby更近。在选定了<a title="SASS" href="http://sass-lang.com/" target="_blank">Sass</a>之后，就是到底用Sass还是用Scss的问题了。Sass采用Haml的语法，采用缩进代替{}，而Scss是css3的超集，兼容现有的css格式，并且跟LESS格式很像。我采用的是Scss。 下面就是从CSS到Scss的转换了。因为没有经验，我借鉴了bootstrap的结构。 <blockquote> scss <p style="MARGIN-LEFT: 30px">variables.scss <p style="MARGIN-LEFT: 30px">mixins.scss <p style="MARGIN-LEFT: 30px">global.scss <p style="MARGIN-LEFT: 30px">application.scss <p style="MARGIN-LEFT: 30px">... </blockquote> <ol> <li>为网站中用到的颜色取个好名字，同样的，我也是借鉴了bootstrap的variaables.less <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div><pre><span style="COLOR: #008000">//</span><span style="COLOR: #008000"> Links</span><span style="COLOR: #008000"> </span>$linkColor: #0b4aab; $linkColorHover: darken($linkColor, 15); <span style="COLOR: #008000">//</span><span style="COLOR: #008000"> Grays</span><span style="COLOR: #008000"> </span>$black: #000; $grayDark: lighten($black, 25%); <span style="COLOR: #008000">//</span><span style="COLOR: #008000">404040</span><span style="COLOR: #008000"> </span>$gray: lighten($black, 50%); <span style="COLOR: #008000">//</span><span style="COLOR: #008000">808080</span><span style="COLOR: #008000"> </span>$grayLight: lighten($black, 80.5%); <span style="COLOR: #008000">//</span><span style="COLOR: #008000">cdcdcd //default for 75</span><span style="COLOR: #008000"> </span>$grayLighter: lighten($black, 93.5%); <span style="COLOR: #008000">//</span><span style="COLOR: #008000">eee //default for 90</span></pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div></div></li> <li>添加圆角代码 <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div><pre>@mixin round{ border:1px solid #DDD; @include border-radius; @include box-shadow; } <span style="COLOR: #008000">//</span><span style="COLOR: #008000"> Border Radius</span><span style="COLOR: #008000"> </span>@mixin border-radius($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } <span style="COLOR: #008000">//</span><span style="COLOR: #008000"> Drop shadows</span><span style="COLOR: #008000"> </span>@mixin box-shadow($shadow: 0 1px 1px rgba(0,0,0,.25)) { -webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; box-shadow: $shadow; }</pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div></div></li> <li>抽象公共样式，分离出单独页面样式文件，最终的main.scss只含有下面的代码 <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div><pre>@import "variables"; <span style="COLOR: #008000">//</span><span style="COLOR: #008000">@import "mixins";</span><span style="COLOR: #008000"> </span>@import "global"; @import "application"; @import "choose_courses"; @import "course_index"; @import "course_show"; @import "friends"; @import "session_new"; @import "info"; @import "activities"</pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码" href="javascript:void(0);"><img alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif"/></a></span></div></div></li></ol> <ol>下面说几点体会。</ol> <blockquote> <ol>1、在单独的scss文件中也需要包含@import "variables"，否则找不到颜色变量</ol> <ol>2、css的嵌套不宜太深，如果太深了，我觉得一般是html结构有问题。</ol> <ol>3、巧用Sass Script能为你节省很多代码。比如:</ol> <div class="cnblogs_Highlighter"> <div> <div id="highlighter_896641" class="syntaxhighlighter nogutter="nogutter" javascript="javascript" ie"> <div class="toolbar"><span><a class="toolbar_item command_help="command_help" help" href="http://bbs.145829.com/post.asp?action=new&boardid=8&stype=0#">?</a></span></div> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="code"> <div class="container"> <div class="line number1="number1" index0="index0" alt2"><code class="javascript plain">@each $item </code><code class="javascript keyword">in</code> <code class="javascript string">"mine"</code><code class="javascript plain">, </code><code class="javascript string">"friends"</code><code class="javascript plain">, </code><code class="javascript string">"activities"</code><code class="javascript plain">{ </code></div> <div class="line number2="number2" index1="index1" alt1"><code class="javascript spaces"> </code><code class="javascript plain">li.</code><code class="javascript preprocessor">#{$item}{ </code></div> <div class="line number3="number3" index2="index2" alt2"><code class="javascript spaces"> </code><code class="javascript plain">a{ </code></div> <div class="line number4="number4" index3="index3" alt1"><code class="javascript spaces"> </code><code class="javascript plain">background: url(</code><code class="javascript string">"/images/#{$item}_normal.png"</code><code class="javascript plain">) no-repeat left center; </code></div> <div class="line number5="number5" index4="index4" alt2"><code class="javascript spaces"> </code><code class="javascript plain">} </code></div> <div class="line number6="number6" index5="index5" alt1"><code class="javascript spaces"> </code><code class="javascript plain">&.active a, a:hover{ </code></div> <div class="line number7="number7" index6="index6" alt2"><code class="javascript spaces"> </code><code class="javascript plain">background: url(</code><code class="javascript string">"/images/#{$item}_active.png"</code><code class="javascript plain">) no-repeat left center; </code></div> <div class="line number8="number8" index7="index7" alt1"><code class="javascript spaces"> </code><code class="javascript plain">} </code></div> <div class="line number9="number9" index8="index8" alt2"><code class="javascript spaces"> </code><code class="javascript plain">} </code></div> <div class="line number10="number10" index9="index9" alt1"><code class="javascript plain">}</code></div></div></td></tr></tbody></table></div></div></div> 4、重构css的根本就在于优化html的结构，这也是前台工作最核心的地方，一个好的html的结构带来的不仅仅是css的清晰，js的方便，更重要的提高了前台的可维护性。 </blockquote>
说明：
上面显示的是代码内容。您可以先检查过代码没问题，或修改之后再运行.