寫css的毛病

wenyiweb 發(fā)布于2019-08-28 17:56 / 1281人閱讀

摘要：最近公司要做手機端頁面，之前沒做過，也只是給另一邊的美工指點一下，不過發(fā)現(xiàn)現(xiàn)在寫有一個毛病那就是類型下面的代碼為什么這樣寫，原因是在寫或看別人的代碼時，會發(fā)現(xiàn)有很多代碼都重復(fù)于是遵循個人感覺找頁面中的共同點來封裝，如大小，字體等做到對

最近公司要做手機端頁面，之前沒做過，也只是給另一邊的美工指點一下，

不過發(fā)現(xiàn)現(xiàn)在寫css有一個毛病

那就是類型下面的代碼

.text-blue{color:blue}
.text-left{text-alitn:left}

.layoutLeft{float:left}
.layoutRight{float:right}

form labelCom input[type="xx"]{//code}

為什么這樣寫，原因是在寫或看別人的代碼時，會發(fā)現(xiàn)有很多代碼都重復(fù)

于是遵循個人感覺

找頁面中的共同點來封裝，如大小，字體等

做到對封裝后的class只需寫 color,background,width,height等即可重用

給標簽找好父級，防止一些裸生效

我說的裸生效是指類型

.button{width,padding,height,color}亂亂的全生效了

  舉個例子

  比如在非塊元素里用的Button那么就給Button設(shè)置為非塊的

  反之~~~

  好了，不扯了

GPU云服務(wù)器云服務(wù)器如何寫css html寫css css樣式怎么寫 css的樣式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110901.html

相關(guān)文章

學(xué)不動了?可能方法不太對-Grid 網(wǎng)格布局

摘要：前情提要本人是一個學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開始我就開始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只前情提要 ??本人是一個學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué), showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 評論0 收藏0
XSS全解析—初探

摘要：持久型相當于存儲型跨站腳本。這玩意兒涉及到一點和瀏覽器引擎解析的問題。說正事，是支持碼形式的。的調(diào)用有幾個概念我們先來了解一下。本來說的只用天完成的，沒想到各種事兒拖了兩天，。前些時間準備面試的時候一直會遇到這個XSS，寥寥幾句話好像很簡單，后來看到同學(xué)的《XSS跨站腳本攻擊剖析與防御》這本書，稍微翻看了一下，其中的學(xué)問還是挺多的。這系列的文章就當做讀書筆記吧。什么是XSS 聽過很...

Lucky_Boy 2019-08-20 12:09 評論0 收藏0
【移動端web開發(fā)】（二）深入viewport

摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發(fā)生變化但是值所占的屏幕分辨率的值變小了。前言通過上一篇我們已經(jīng)大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！三個v...

Baoyuan 2019-08-22 16:58 評論0 收藏0
使用GrumPHP來糾正代碼“毛病”

摘要：默認的配置不會檢測任何代碼。參數(shù)列表質(zhì)量檢測包其他有人問，你為什么要這么折磨自己呢其實像類型代碼質(zhì)量工具，不是僅僅自己拿來玩的，在開發(fā)人員略多的技術(shù)團隊，可以通過使用它來達到代碼規(guī)范一致，如果每個人代碼都不一樣，后果不堪設(shè)想。 showImg(https://segmentfault.com/img/bVbtfeF?w=1796&h=724); 前言我一生的文章都會放在這里，我的博客...

jubincn 2019-07-01 12:50 評論0 收藏0
墨瞳漫畫h5一期 vuejs總結(jié)

摘要：歡迎體驗提墨瞳漫畫這里踩的坑主要是組件的重用。這樣可以防止圖和圖片大小不一樣引起的頁面跳動繼而導(dǎo)致的加載圖片時機錯誤?？缬驎r，會先發(fā)送一個空的請求來查看接口是不是支持跨域，再發(fā)送一次真實請求。前言博主也是vuejs萌新，公司僅我一個前端，收到做h5的需求后，馬上想到要用下vuejs，于是說服領(lǐng)導(dǎo)，開始慢慢鉆研，現(xiàn)在記錄一下踩到的坑。這些坑主要是在一些組件的使用上，其它的只要好好看官...

王巖威 2019-08-20 11:10 評論0 收藏0