建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何進(jìn)行CSS代碼減肥提升前端性能
隨著越來越多的CSS預(yù)處理器的普及，一些新的工具和應(yīng)用程序，基本上使得網(wǎng)頁設(shè)計(jì)師或開發(fā)人員的開發(fā)工作更輕松，像這樣的工具：CSS2Less。今天就分享一些這個(gè)工具的使用，css2less 是一個(gè)用 Ruby 開發(fā)的小工具用來將 css 轉(zhuǎn)成 Less CSS 格式的文件。
十載建站經(jīng)驗(yàn)， 成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)客戶的見證與正確選擇。創(chuàng)新互聯(lián)公司提供完善的營銷型網(wǎng)頁建站明細(xì)報(bào)價(jià)表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
使用工具
這個(gè)工具可以讓我們自己的CSS代碼輸入后給CSS代碼減肥。所以讓我給它一個(gè)嘗試。有一個(gè)文件要轉(zhuǎn)換，下面是CSS代碼。
- nav {
- height: 40px;
- width: 100%;
- background: #000;
- border-bottom: 2px solid #fff;
- }
- nav ul {
- padding: 0;
- margin: 0 auto;
- }
- nav li {
- display: inline;
- float: left;
- }
- nav a {
- color: #fff;
- display: inline-block;
- width: 100px;
- text-shadow: 1px 1px 0px #000;
- }
- nav li a {
- border-right: 1px solid #fff;
- box-sizing:border-box;
- }
- nav li:last-child a {
- border-right: 0;
- }
- nav a:hover, nav a:active {
- background-color: #fff;
- }
下面是結(jié)果。
- nav a:hover, nav a:active {
- background-color: #fff;
- }
- nav {
- height: 40px;
- width: 100%;
- background: #000;
- border-bottom: 2px solid #fff;
- a {
- color: #fff;
- display: inline-block;
- width: 100px;
- text-shadow: 1px 1px 0px #000;
- }
- ul {
- padding: 0;
- margin: 0 auto;
- }
- li:last-child {
- a {
- border-right: 0;
- }
- }
- li {
- display: inline;
- float: left;
- a {
- border-right: 1px solid #fff;
- box-sizing:border-box;
- }
- }
- }
正如我們可以在上面看到的那樣，我們的老CSS代碼被大量的減肥，剩下簡寫的方式了，這樣的好處是減少服務(wù)器端的壓力。
局限性
但是，我們也可以看到一些限制，轉(zhuǎn)換結(jié)果。在舊的CSS，我們有幾個(gè)相同的代碼，2個(gè)關(guān)于邊框的聲明border-bottom: 2px solid #fff;和border-right: 1px solid #fff;我們只需要手動(dòng)做其他的可能，直到解決上述限制。盡管目前仍然有限制，這個(gè)工具可以節(jié)省我們的時(shí)間，嵌套CSS規(guī)則集非常有幫助。
分享題目：如何進(jìn)行CSS代碼減肥提升前端性能
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/dpegpss.html
