CSS基礎構架及標準

leon 發布于2019-08-29 15:30 / 2854人閱讀

CSS Architecture base.less - Provide style reset and atomic functions

the project module(.epc-page) styles

body styles

font-family

font-size

color

width factor

common width

common.less - Abstract the component styles common to the site.

page layout

responsive width

common component styles

page.less - A particular style of a particular page.

All function pages must have their scope

Defining global styles is prohibited

CSS Written Order

Location attribute (position, top, right, z-index, display, float ...)

Size (width, height, padding, margin ...)

Text series (font, line-height, letter-spacing, color- text-align ...)

Background (background, border ...)

Other (animation, transition ...)

CSS Written Standard abbreviation CSS has some properties that can be abbreviated, such as padding, margin, font, etc. This streamlines the code while improving the user"s reading experience.

Remove the "0" before the decimal point

Abbreviated name-Easy to understand, but not casual.

Hyphenated CSS selector naming convention

Long names or phrases can use the middle dash to name selectors.
It is not recommended to use the "_" underscore to name the CSS selector. Why?

Press the shift key a little while typing.

Browser compatibility issues (named after a selector using _tips, for example, is invalid in IE6)

Well-distributed JavaScript variable naming (JS variable name is "_")

Do not use id freely

The ID is unique and high priority, so we should use it on demand.

Less usage Variables

@nice-blue: #5B83AD;
#header {
    color: @nice-blue;
}

We can define the font, size, color, etc. as constants.

Mixins

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

.post a {
    color: red;
    .bordered;
}

We can transfer variables, Usage is similar to functions

Nested Rules

.header {
    color: black;
}

.header .navigation {
    font-size: 12px;
}

.header-logo {
    width: 300px;
}


.header {
    .navigation {
        font-size: 12px;
    }
    &-logo {
        width: 300px;
    }
}

Directives such as media or keyframe can be nested in the same way as selectors.

Namespaces and Accessors

#bundle {
    .button {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
            background-color: white
        }
    }
    .tab {
    ...
    }
    .citation {
    ...
    }
}

We should use the component"s namespace and scope.

Scope

@var: red;
#page {
   @var: white;
   #header {
      color: @var; // white
   }
}

GPU云服務器云服務器 css基礎基礎css ps基礎知識及操作堡壘機基礎平臺及管理調用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113359.html

云計算與 Cloud Native | 數人云CEO王璞@KVM分享實錄

摘要：分享實錄云計算技術源于互聯網公司，現在云計算已經是下一代企業級的發展趨勢。如何做云計算一直是云計算技術的領導者。互聯網公司的快速發展，已經印證了云計算技術和云原生應用相比傳統構架的巨大優勢。今天小數又給大家帶來一篇干貨滿滿的分享——來自KVM社區線上群分享的實錄，分享嘉賓是數人云CEO王璞，題目是《云計算與 Cloud Native》。這是數人云在KVM社區群分享的第一彈，之后還有數...

_Zhao 2019-06-28 10:49 評論0 收藏0
穩定高于一切的金融行業如何用容器？

摘要：在谷歌不是這樣，谷歌不會把特定的應用裝在某臺服務器上，業務應用和服務器的強綁定對于谷歌這種量級的數據中心的維護難度太高了。但是金融機構的數據中心規模不像谷歌這么大，所以能做到業務應用和硬件的強綁定。復雜的基礎IT架構是傳統金融的現狀，如何快速響應用戶需求，加快新業務上線速度，縮短產品的迭代周期? 數人云在容器落地金融云的2年實踐中，實現金融核心業務技術WebLogic、J2EE、Or...

scola666 2019-06-28 15:14 評論0 收藏0
為什么響應式編程并非一時之勢？

摘要：編者按本文作者為，文章從程序架構與系統的發展歷程出發，逐步論證了為什么響應式編程并非一時之勢，而是能帶來更快處理速度，更高硬件利用率的未來選擇。這就是摩爾定律所說的應用程序。響應式方法并非一時之勢它是編寫軟件的未來趨勢。【編者按】本文作者為 David Buschman，文章從程序架構與系統的發展歷程出發，逐步論證了為什么響應式編程并非一時之勢，而是能帶來更快處理速度，更高硬件利用率...

JessYanCoding 2019-08-14 14:05 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0