首頁 > 博客教程 > seo知識 >

石家莊高端網站開發:如何更好的實現代碼的簡潔性


編輯:石家莊展為網絡有限公司更新日期:2019-08-12

CSS Pt的現代方法。2:構建資源

 

CSS Pt的現代方法。 2:構建資源

設計系統和現代規范在如何解決當前的CSS問題方面發揮了重要作用。  本系列的第一部分中,我們研究了現代CSS工具如何幫助我們編寫更有條理和編程的CSS。第二部分以這些工具為基礎,研究如何使用它們為我們的網站創建資源。我們將使用Sass自動生成一個CSS系統,完成命名空間。然后我們將深入探討CSS規范并觸及規范當前狀態如何幫助解決常見問題的示例。

通過Shopify合作伙伴計劃拓展業務

無論您是提供營銷,定制還是網頁設計和開發服務,Shopify合作伙伴計劃都將幫助您取得成功。免費加入并獲得收益分享機會,發展業務的工具以及充滿激情的商業社區。

注冊

系統

 

看起來你到處都在談論使用設計系統關于設計系統,調查報告設計系統使用和統計的整個會議,以及致力于該概念的Slack團隊從外部看設計系統時,高級視圖可能看起來很簡單,但隨著您越來越近,它變得越來越復雜。要理解的主要內容是,設計系統是一組獨立系統的術語,它們協同工作,為設計人員和開發人員提供快速創建一致,高效設計和代碼的方法。

CSS系統通常是良好設計系統的核心。排版,間距,布局,網格和顏色是設計系統的常見元素,但它們可以獨立于完整的設計系統使用。像Sass和PostCSS這樣的工具可以幫助自動創建HTML中使用的這些系統。像BEMIT這樣的組織方法提供了構建這些系統類名的框架。作為一個例子,我將逐步使用Sass自動創建一個我在過去幾年中多次使用過的簡單間距系統。這個系統的優點在于它具有很強的可塑性,可以根據每個特定項目的需要進行調整。

您可能也喜歡: CSS Pt的現代方法。1:工具和組織

第1步:變量和地圖

 

在開始創建這個系統時,有必要制定一些指導原則,主要是一些由文檔驅動的開發。此系統的目標是提供可在HTML中的任何位置使用的類,以向元素添加填充或邊距值。這些類需要提供快速選項,以單獨添加padding添加margin到頂部,右側,底部,左側位置,并且具有允許為所有位置,水平位置和垂直位置添加相等間距的類。該系統應該是自動生成的,以便在編寫最少代碼的情況下實現一致的輸出。

這將是一個遵循ITCSS方法來組織文件的Sass文件,因此我們將命名此文件_trumps.utilities.spacing.scss這里的命名是我發現組織有用的方式。我使用CSS適合的ITCSS部分啟動名稱,然后我提供一個描述性類別,在本例中為實用程序。由于我很可能會有多個實用程序系統,因此我添加了進一步的說明。使用您的文件名這樣描述將有助于您和其他人在代碼庫增長時快速找到適當的文件。

在這個新的Sass部分文件中,我們將首先添加一個名為的變量$spacing-limit并將值設置為4

  $ spacing-limit4 ;
查看GitHub用?托管的rawspacing-system-1.scss

此變量是我們的間距系統的最大值。我們寫系統將進行迭代,以從間距值創建類0,以4rem1rem遞增。

接下來,我們創建一個我們想要定位的位置的地圖。如前所述,我們希望定位頂部,右側,底部和左側位置,并提供一種方法來創建平等地定位所有位置的類,將頂部和底部值組合為垂直類,左右組合值作為水平類。正如命名空間部分所述,重要的是保持命名簡潔但人類可讀。考慮到命名空間,我們將創建一個鍵值對,其中鍵是我們的簡潔名稱,限制為三個字符,值將是該屬性的全名。請注意,由于所有,垂直和水平都是位置的集合,因此它們的值是null

  $ spacing-key :(
  頂部頂部
 
 
  btm bottom
  all :null,
  vert :null,
  horiz :null
  );
查看GitHub用?托管的rawspacing-system-2.scss

第2步:使用類名稱進行增量循環

 

就像塔倫蒂諾電影一樣,我們將把這個演示的結尾放在中間。這樣做的原因是要了解我們將在下一步中將哪些信息傳遞到循環混合中。對于初學者,我們將創建一個@for循環,從0我們的$spacing-limit增加到4這會增加整數,因此我們的類將包含0,1,2,3和4作為間距類中的值。

  @for $ space 0 $ spacing-limit {
   
  }
查看GitHub用?托管的rawspacing-system-3.scss

接下來我們將創建一個新變量,它接受$space增量值并將單位添加到它,在本例中為a rem使用Sass就像將兩者結合起來一樣簡單。

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  }
查看GitHub 用?托管的rawspacing-system-4.scss

現在我們需要創建我們的類名,或者至少創建它們的開頭。由于這些是實用程序類,我們將它們命名為util-,然后為padding我們將使用padmargin我們將保持原樣。

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  .util-pad {
  }
   
  .util-margin {
  }
  }
查看GitHub用?托管的rawspacing-system-5.scss

我們的下一步將負責創建我們需要添加到這兩個選擇器塊中的mixin,但是現在我們可以調用我們即將創建的mixin。這個mixin將命名為'spacing-loop',它由the啟動@include,包括選擇器塊中的mixin。注意,此時你的Sass會在生成時出錯,因為它沒有調用mixin spacing-loop我們希望將三個值傳遞給尚未混合的值,即我們作為字符串定位的屬性的名稱,因此類的“填充”和.util-pad類的“邊距” .util-margin然后我們想要傳遞$space值,以及我們的單位版本$value

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  .util-pad {
  @include spacing-loop padding $ space$ value);
  }
   
  .util-margin {
  @include spacing-loop margin $ space$ value);
  }
  }
查看GitHub用?托管的rawspacing-system-6.scss

第3步:位置循環混合 

 

我們的最后一步是最復雜的步驟,可能需要一些額外的閱讀才能完全理解。首先,讓我們制作mixin并定義它將接受的屬性。我們會嘗試保持名稱相同以防止混淆,$property是我們要定位的屬性名稱,margin或者padding然后我們將通過上一步變量$space$value屬性。

  @mixin spacing-loop$ property$ space$ value){
  }
查看GitHub用?托管的rawspacing-system-7.scss

現在我們的Sass再次編譯,我們將創建一個@each循環,$spacing-key從第一步開始遍歷我們的地圖。這里的結構告訴@each我們從地圖中獲取密鑰和值,并將它們分別分配給變量$poskey$posvaluepos名稱中的指的位置。

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $間距鍵 {
  }
  }
查看GitHub用?托管的rawspacing-system-8.scss

接下來,我們將通過使用混合變量以編程方式創建類名。第一個變量由&符號&)表示。這是Sass的一個特殊功能,稱為父選擇器,它捕獲選擇器的范圍直到它被調用的點。在這種情況下,它將轉換為.util-margin.util-pad,取決于mixin運行的選擇器塊。 

接下來的兩個部分是標準的Sass變量,但由于它們在類名中使用,因此必須先對它們進行插值,以便它們安全地輸出為Sass,否則Sass會認為類名是util-margin-$poskey-$space@each循環遍歷映射的所有條目時,它將插入$poskey值和從步驟2循環$space傳遞的當前迭代@for。在實用程序類的情況下,所有邊距位置的間距為2,從此設置創建的類將讀取.util-margin-all-2請注意,當Sass變量用作選擇器時,必須通過將變量包裝在以哈希/井號開頭的大括號集中進行插值#{$variable}

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $間距鍵 {
  - #{$ poskey} - #{$ space} {
  }
  }
  }
查看GitHub用?托管的rawspacing-system-9.scss

現在我們已經創建了類選擇器,現在是時候在最后一位信息中添加選擇器塊屬性了。由于我們的鑰匙allverthoriznull,我們需要執行和@if語句來檢測的情況下,輸出正確的屬性或屬性。第一次檢查將看是否$poskey等于“all”,在這種情況下,它將獲取$prop“margin”或“padding”的值并輸出$value。 

請注意,使用變量作為屬性名稱時,也必須進行插值。任何時候變量都不被稱為屬性值,它必須進行插值。我們可以重復這個檢查verthoriz創造適當的屬性。一旦我們完成了所有的if條件,我們就可以結束一個@else條件,它將獲得$posvalue適當迭代的關鍵值,即$poskey等于“右” $posvalue輸出的情況right

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $間距鍵 {
  - #{$ poskey} - #{$ space} {
  @if $ poskey == all {
  #{ $ property }$ value ;
  }
  @else if $ poskey == vert {
  #{ $ property } -top$ value ;
  #{ $ property } -bottom$ value ;
  }
  @else如果 $ poskey == HORIZ {
  #{ $ property } -right$ value ;
  #{ $ property } -left$ value ;
  }
  @else {
  #{ $ property } - #{ $ posvalue }$ value ;
  }
  }
  }
  }
查看GitHub用?托管的rawspacing-system-10.scss

將這一切全部拉到一起大約是50行Sass,它將輸出70個獨特的間距實用程序類。然后,通過為所需的間距量添加適當的類,可以使這些類快速地間隔出您網站上的內容。由于它使用了長期存在的屬性和方法,因此該系統創建的類具有巨大的瀏覽器支持。由于舊版瀏覽器不太需要支持,我們可以使用CSS自定義屬性開始擴展這個系統,正如Kasey Bonifacio在她的文章可管理實用程序系統中使用CSS變量所示

您可能還喜歡: 使用CSS變量的反應式UI動畫

CSS規范

 

在編寫現代CSS時,我們必須回到CSS規范本身。CSS工作組已經采取了許多線索來自網絡的發展趨勢和實踐在過去十年中心臟。在過去幾年中,CSS獲得了功能查詢自定義變量數學功能以及識別元素的獨特方法。并且我們忘記了混合使用FlexboxCSS Grid的所有布局選項。 

有了所有這些新功能,很難知道從哪里開始。我的日常工作涉及引用MDN Web文檔我可以定期使用網站。還有其他可用的資源,但這兩個資源已成為我的開發伙伴。沒有必要知道每個屬性,但知道如何導航在哪種情況下使用哪個屬性是一項重要技能。簡單地探索這兩個網站可以揭示很多關于作為前端開發人員可用的選項。

我想給你留下三個特定于CSS的東西,我真正依賴它。這些東西不同于迄今為止所討論的所有花哨的工具和方法 - 純CSS。

漸進增強和功能查詢

 

CSS的一個顯著特征是屬性在列表中越來越重要的方式。這意味著當CSS屬性排序良好時,它們可以為特定瀏覽器提供特定樣式,而無需依賴基于JavaScript的功能檢測器,如Modernizr例如,在編寫布局樣式時,首先使用浮點數,然后在Flexbox中添加,然后再添加CSS Grid。這將允許Internet Explorer 9等瀏覽器獲得基于浮動的布局。 

這是一個簡單的例子。讓我們從浮動的舊布局方法開始,以及我們需要完成它的工作。在這個例子中,我將display: inline-block用作清除浮動元素的方法。

  .layout-main {
  display inline-block ;
  寬度 100 ;
  }
   
  .layout-main__left {
  浮動 ;
  寬度 75 ;
  }
   
  .layout-main__right {
  浮動 ;
  寬度 25 ;
  }
查看GitHub用?托管的原始進度增強1.css

使用IE 10和11以及舊版本的現代瀏覽器,我們可以添加Flexbox版本。但是,由于我們希望這是漸進的并且隨著級聯一起流動,我們在舊版本的屬性下面添加類似屬性:

  .layout-main {
  display inline-block ;
  顯示 flex ;
  寬度 100 ;
  }
   
  .layout-main__left {
  浮動 ;
  寬度 75 ;
  }
   
  .layout-main__right {
  浮動 ;
  寬度 25 ;
  }
查看GitHub 用?托管的rawprogressive-enhancement-2.css

令人難以置信的是,我們需要添加的是display: flex;這些類現在正在使用Flexbox。Flexbox周圍的屬性否定子類中的浮點數,但仍使用寬度。這是有效的,因為Flexbox的自然狀態是將所有子元素保持在一行上,并且子元素上的寬度允許空間被完全填充,而不用擔心第二個子包裝在第一個下面。

增強示例的最后一步是添加CSS Grid。盡管父類屬性的增加一樣簡單display: gridgrid-columns-template財產問題與孩子的寬度就出現了。與浮點和Flexbox方法不同,CSS網格寬度由父級通過grid-columns-template子項的寬度現在將是列寬的百分比。要刪除這些寬度,我們可以添加一個功能查詢來檢查是否支持CSS Grid @supports (display: grid)

  .layout-main {
  display inline-block ;
  顯示 flex ;
  顯示網格 ;
  寬度 100 ;
  }
   
  .layout-main__left {
  浮動 ;
  寬度 75 ;
  }
   
  .layout-main__right {
  浮動 ;
  寬度 25 ;
  }
   
  @supportsdisplaygrid){
  .layout-main {
  grid-template-columns 75 25 ;
  }
   
  .layout-main__left
  .layout-main__right {
  寬度自動 ;
  }
  }
查看GitHub用?托管的原始進步增強型3.css

正如您所看到的,@supports工作就像@media,并且功能查詢也可以嵌套在媒體查詢中。使用此方法時需要注意的一點是,如果您使用Autoprefixer自動創建供應商前綴,它將display: grid為IE 11 創建供應商前綴display: -ms-grid雖然IE11很早就實現了CSS Grid,但它對功能查詢沒有任何支持。這可能會導致問題,因為網格屬性已添加到元素,但寬度無法控制。在這種情況下,最好將display: grid聲明分組在特征查詢中,并強制IE 11使用Flexbox方法。

您可能也喜歡: 什么是漸進增強以及您為什么要關心

考慮使用替代選擇器

 

當我們談論CSS命名方法和組織時,它幾乎總是關于類選擇器的使用。這是可以理解的,因為類選擇器是一個定義的選擇器類型,可以有多個值,這是一個嚴重依賴的方面。但是,還有許多其他方法可以定位一個元素,為CSS選擇器提供類似條件的邏輯。特別是兩個,我發現有力的工作,是屬性選擇器和:not()選擇器。

自CSS 2.1以來,屬性選擇器已經出現,并支持IE 7。它們可用于跟蹤和設置input元素type,例如input[type="radio"]選擇單選按鈕。它們還可以幫助跟蹤數據屬性中空格分離的lis中的特定值,例如[data-date~="tuesday"]最近,我已經看到使用屬性選擇器的極好用途,aria-expanded以檢查元素是否被擴展,并提供必要的CSS來隱藏或顯示元素。

:not()偽類是CSS3此外,其允許選擇方案以從應用樣式被排除。當一個特定的狀態指示類不存在時,這作為一種應用樣式的方式派上用場。例如,如果我們想要在沒有圖標的情況下為按鈕設置特定樣式,我們可以編寫如下選擇器:.button:not('.has-icon') {...}起初它似乎不是一個值得使用的方法:not(),但我發現一旦它被認為是一個選項,它解決的問題揭示了自己。

我在過去一年左右經常采用的方法是將這兩個選擇器組合起來為通用元素創建樣式。在編寫通用元素選擇器(例如pa或)時h4,這些選擇器將影響這些元素的每個實例的結果。由于這個原因,元素選擇器通常不受歡迎,并且應用于DOM中的這些元素之一的任何類將需要額外的CSS來抵消元素的樣式。 

但是,對于可能在沒有類的情況下顯示的元素具有默認樣式非常方便。這使我通過添加:not([class])到那些選擇器來包含沒有類的元素選擇器。這允許通用元素獲得自定義樣式,但不會損害類選擇器。一個p {...}選擇變得p:not([class]) {...}和現在的沖突具體到這個類在DOM使用的樣式不會來:<p class="hero-subtitle">...</p>

您可能還喜歡: 使用CSS動畫來指導更好的電子商務體驗

玩CSS

 

我作為CSS開發人員多年來學到的最重要的事情是知道CSS需要使用CSS的游戲時間。當我在2012年開始使用CodePen時,這個想法變得很快。我開始制作一個振蕩風扇動畫,作為嘗試嵌套元素動畫的一種方式。從那里我發現使用CSS的最佳方式是采取挑戰并添加限制。 

“作為一名CSS開發人員,我多年來學到的最重要的事情就是知道CSS需要使用CSS的游戲時間。”

通過嘗試其中一個CSS 每日 挑戰,但添加自己的規則來挑戰。嘗試一個新屬性,強迫自己只使用一個HTML元素來完成任務,或者看看你是否可以單獨CSS完成一個kata,比如FizzBu??zz當你使用CSS時,你學到的東西比你的使用僅限于項目的需要。

CSS作為橋梁

 

CSS是設計和開發之間的橋梁,導致語言獨特,有能力,有時被低估。豐富而復雜的能力使經驗豐富的開發人員能夠創造出真正迷人的風格。同時,作為Web技術的介紹,語言仍然簡單易用。CSS的這些特性在編寫既不是設計也不是編程的CSS時需要特定的思維方式,而在中間某處。該技術在過去幾年中經歷了強勁的擴張,并沒有放緩的跡象。

Sass和Node等技術為語言帶來了編程和自動化,并為程序員提供了可能導致混淆的概念。作為回報,CSS規范已經擴展到包含CSS工具引入的想法,添加了特征檢測,數學和變量。盡管在CSS中添加編程層有了進一步的改進,但該語言仍然需要一種特定的思維模式,使級聯功能成為開發高效實用樣式的核心。


野狼社区,旬果小姐,韩国一本到,色情97,色伦视频综合青青草免费23 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>