資訊專欄INFORMATION COLUMN
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 OrderLocation 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 conventionLong 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 freelyThe 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
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113359.html
摘要：分享實(shí)錄云計(jì)算技術(shù)源于互聯(lián)網(wǎng)公司，現(xiàn)在云計(jì)算已經(jīng)是下一代企業(yè)級(jí)的發(fā)展趨勢(shì)。如何做云計(jì)算一直是云計(jì)算技術(shù)的領(lǐng)導(dǎo)者?；ヂ?lián)網(wǎng)公司的快速發(fā)展，已經(jīng)印證了云計(jì)算技術(shù)和云原生應(yīng)用相比傳統(tǒng)構(gòu)架的巨大優(yōu)勢(shì)。 今天小數(shù)又給大家?guī)硪黄韶洕M滿的分享——來自KVM社區(qū)線上群分享的實(shí)錄，分享嘉賓是數(shù)人云CEO王璞，題目是《云計(jì)算與 Cloud Native》。這是數(shù)人云在KVM社區(qū)群分享的第一彈，之后還有數(shù)...
摘要：在谷歌不是這樣，谷歌不會(huì)把特定的應(yīng)用裝在某臺(tái)服務(wù)器上，業(yè)務(wù)應(yīng)用和服務(wù)器的強(qiáng)綁定對(duì)于谷歌這種量級(jí)的數(shù)據(jù)中心的維護(hù)難度太高了。但是金融機(jī)構(gòu)的數(shù)據(jù)中心規(guī)模不像谷歌這么大，所以能做到業(yè)務(wù)應(yīng)用和硬件的強(qiáng)綁定。 復(fù)雜的基礎(chǔ)IT架構(gòu)是傳統(tǒng)金融的現(xiàn)狀，如何快速響應(yīng)用戶需求，加快新業(yè)務(wù)上線速度，縮短產(chǎn)品的迭代周期? 數(shù)人云在容器落地金融云的2年實(shí)踐中，實(shí)現(xiàn)金融核心業(yè)務(wù)技術(shù)WebLogic、J2EE、Or...
摘要：編者按本文作者為，文章從程序架構(gòu)與系統(tǒng)的發(fā)展歷程出發(fā)，逐步論證了為什么響應(yīng)式編程并非一時(shí)之勢(shì)，而是能帶來更快處理速度，更高硬件利用率的未來選擇。這就是摩爾定律所說的應(yīng)用程序。響應(yīng)式方法并非一時(shí)之勢(shì)它是編寫軟件的未來趨勢(shì)。 【編者按】本文作者為 David Buschman，文章從程序架構(gòu)與系統(tǒng)的發(fā)展歷程出發(fā)，逐步論證了為什么響應(yīng)式編程并非一時(shí)之勢(shì)，而是能帶來更快處理速度，更高硬件利用率...
摘要：現(xiàn)在回到我們這一章節(jié)的標(biāo)題，將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫基礎(chǔ)庫構(gòu)思為什么要做基礎(chǔ)庫我上一章節(jié)的末尾拋出了幾個(gè)問題假設(shè)你要做一個(gè)游戲單頁面，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié)，我們都說了哪些內(nèi)容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
閱讀 1964·2021-09-07 09:59
閱讀 2527·2019-08-29 16:33
閱讀 3701·2019-08-29 16:18
閱讀 2860·2019-08-29 15:30
閱讀 1687·2019-08-29 13:52
閱讀 2050·2019-08-26 18:36
閱讀 543·2019-08-26 12:19
閱讀 706·2019-08-23 15:23
