css模塊化

時間 2019-11-30

標籤 css 模塊化欄目 CSS 简体版

原文原文鏈接

爲何要模塊化

項目多人開發，因爲命名不規範，耦合太強，致使改一個東西可能影響到別的並不想影響地方的樣式css

模塊化的好處

提升代碼重用率
提升開發效率、減小溝通成本
下降耦合
便於代碼維護

怎麼實現css模塊化

css樣式文件名，規範化，語義化

1）　
主要的 master.css 
佈局，版面 layout.css 
專欄 columns.css 
文字 font.css 
打印樣式 print.css 
主題 themes.css

2）
reset.css // 對瀏覽器的默認樣式進行重設 
layout.css // 管理頁面的佈局 
typeset.css // 圖文的編排
color.css // 統一管理顏色的搭配 
print.css // 打印效果樣式 
ie.css // 把對ie的hack單獨分開 

3）
reset.css 
header.css // 頭部的全部樣式 
container.css // 除頭部/底部外的中間區域樣式 
footer.css // 底部樣式 
print.css 
ie.css 

4)
reset.css /*頁面樣式重置*/
header.css /*全站頭部樣式*/
footer.css /*全站尾部樣式*/
public.css /*全站公共模塊樣式*/
index.css /*首頁特有樣式*/
container.css /*二級及如下主體樣式*/
print.css /*打印樣式*/
ie.css /*IE hack*/

經常使用的css命名規則

頭：header

內容：content/container

尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制總體佈局寬度：wrapper

左右中：left right center

登陸條：loginbar

標誌：logo

廣告：banner

頁面主體：main

熱點：hot

新聞：news

下載：download

子導航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情連接：friendlink

頁腳：footer

版權：copyright

滾動：scroll

內容：content

標籤頁：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標題：title

加入：joinus

指南：guide

服務：service

註冊：register

狀態：status

投票：vote

合做夥伴：partner

3.class的命名html

(1)顏色:使用顏色的名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }
（2）字體大小,直接使用」font+字體大小」做爲名稱,如

.font10px { font-size: 10px; }

.font6pt {font-size: 6pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }
(4)標題欄樣式,使用」類別+功能」的方式命名,如

.barnews { }

.barproduct { }

4.common.css全局提取的公用樣式直接使用，減小耦合性web

/* common.less */
@charset "utf-8";
/*!
 * utils.less v3.0
 * based on veryless: http://veryless.org/
 */           


// 清除(閉合)浮動：http://www.iyunlu.com/view/css-xhtml/55.html
.Clearfix () { 
    *zoom: 1;
    &:before, 
    &:after {
        display: table;
        content: "";

      /*
       * Fixes Opera/contenteditable bug:
       * http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
       */
      line-height: 0;
    }
    &:after {
        clear: both;
    }
}


// inline-block
.Inline-block () { 
    /* 若是有必要可在其父元素上應用樣式vertical-align:top; */
    display:inline-block; 
    *display:inline; 
    *zoom:1;
} 


// 文字隱藏
.Text-hidden () {
    /* 
     * 魔鬼的text-indent-9999px:
     * http://prezi.com/t8yyirefxn2u/text-indent-9999px/ 
     */
    text-indent: 100%;

    white-space: nowrap; /* 強制不換行 */
    overflow: hidden;
}

.Text-ellipsis () {
    /* 
     * 文字溢出隱藏顯示省略號，須要用在與文字最近的一個block|inline-block的祖先元素上(ie6中該元素的width須要顯性的聲明且不能爲auto,100%是可行的) 
     */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文字(強制)折行
.Text-break () {
    word-wrap:break-word;
    word-break:break-all;
}


// 自定義字體
.Font-face(@path, @font-name){
    @font-face{
        font-family: @font-name;
        src: url('@{path}/@{font-name}.eot');
        src: url('@{path}/@{font-name}.eot?#iefix') format('embedded-opentype'),
             url('@{path}/@{font-name}.woff') format('woff'),
             url('@{path}/@{font-name}.ttf')  format('truetype'),
             url('@{path}/@{font-name}.svg#svgFontName') format('svg');
    }
}


// (總體)透明
.Opacity (@a: 0.3) {
    @aa: (@a*100); 
    opacity: @a;
    filter: ~"Alpha(Opacity=@{aa})"; /* ie5-8 */
    *zoom: 1; /* 應用濾鏡的元素必須擁有layout */
}
// 背景透明
.Background-rgba (@r: 0, @g: 0, @b: 0, @a: 0.3) {
    @c: rgba(@r, @g, @b, @a);
    @cc: argb(@c);
    background-color:@c;
    filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='@{cc}',EndColorStr='@{cc}')";
    *zoom: 1;
}


// 圓角
.Border-radius (@a: 3px) {
    -webkit-border-radius: @a;
       -moz-border-radius: @a;
            border-radius: @a;
}

// 陰影
.Box-shadow ( @a: 0 1px 3px rgba(0,0,0,.3); ) {
    -webkit-box-shadow: @a;
       -moz-box-shadow: @a;
            box-shadow: @a;
}


// 漸變
.Linear-gradient (@a: #ffa600; @b: #fe9200) {
    filter: ~'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="@{a}", endColorstr="@{b}")';
    background-image: -webkit-linear-gradient(top,@a, @b);
    background-image: -moz-linear-gradient(top,@a, @b);
    background-image: -ms-linear-gradient(top,@a  0,@b 100%);
    background-image: -o-linear-gradient(top,@a, @b);
    background-image: linear-gradient(top,@a, @b);
}
// 禁用漸變
.Linear-gradientDisable () {
    background-image: none;
　　filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);  /* 禁用漸變 */
}


.Box-sizing ( @a: content-box ) {
    -webkit-box-sizing: @a;
       -moz-box-sizing: @a;
            box-sizing: @a;
}

/*!
 * 使用
 */
@charset "utf-8";
@import "lib/common.less";
/*!
 * index.less
 */

.main { .Clearfix(); }
.notice li { .Text-ellipsis(); }
.comment { .Text-break(); }