บูตมาตรฐาน CSS การเข้ารหัส

ก่อนหน้านี้: Bootstrap ประชุม HTML เข้ารหัส

ไวยากรณ์

ด้วยสองช่องว่างแทนของแท็บ (แท็บ) - นี้เป็นวิธีเดียวที่จะให้แน่ใจว่าเป็นวิธีการที่สอดคล้องที่จะแสดงในทุกสภาพแวดล้อม
เมื่อเลือกจะถูกจัดกลุ่มแยกตัวเลือกบรรทัด
สำหรับการอ่านรหัสในด้านหน้าของบล็อกคำสั่งแต่ละรั้งที่จะเพิ่มพื้นที่
คำสั่งบล็อกรั้งเพียงอย่างเดียวควรจะทำให้การเดินทาง
แต่ละคำเป็นคำสั่งที่ : หลังจากที่ควรแทรกช่องว่าง
เพื่อที่จะได้รับการรายงานข้อผิดพลาดที่แม่นยำมากขึ้นคำสั่งแต่ละคนควรจะเป็นบรรทัดที่แยกต่างหาก
คำสั่งประกาศทั้งหมดควรจะจบด้วยเครื่องหมายอัฒภาค อัฒภาคอยู่เบื้องหลังคำสั่งประกาศที่ผ่านมาเป็นตัวเลือก แต่ถ้าคุณไม่ใช้อัฒภาครหัสของคุณอาจจะไม่ถูกต้องมากขึ้น
สำหรับค่าทรัพย์สินคั่นด้วยเครื่องหมายจุลภาคแต่ละจุลภาคควรจะแทรกเข้าไปในช่องว่าง (ตัวอย่างเช่น box-shadow )
อย่า rgb() , rgba() , hsl() , hsla() หรือ rect() ที่อยู่เบื้องหลังค่าภายในจุลภาคแทรกช่องว่าง สิทธิประโยชน์ดังกล่าวจากส่วนใหญ่ของค่าแอตทริบิวต์ (ยังเป็นทั้งจุลภาคและพื้นที่) ที่จะแยกแยะความแตกต่างระหว่างส่วนใหญ่ของค่าสี (เฉพาะเครื่องหมายจุลภาคไม่มีช่องว่าง)
สำหรับค่าแอตทริบิวต์สีหรือพารามิเตอร์ละเว้นน้อยกว่า 1 ในด้านหน้าของทศนิยม 0 (ตัวอย่างเช่น .5 แทน 0.5 ; -.5px แทนที่ -0.5px )
ค่าเลขฐานสิบหกที่ควรจะเป็นตัวพิมพ์เล็กทั้งหมดเช่น #fff เมื่อสแกนเอกสารตัวอักษรตัวพิมพ์เล็กง่ายต่อการแยกแยะความแตกต่างเพราะรูปแบบของพวกเขาคือความแตกต่างได้อย่างง่ายดายมากขึ้น
พยายามที่จะใช้แบบฟอร์มสั้นของค่าเลขฐานสิบหกเช่นกับ #fff แทน #ffffff
เพิ่มราคาคู่สำหรับการเลือกของสถานที่ให้บริการสำหรับตัวอย่างเช่น input[type="text"] เฉพาะในบางสถานการณ์มันเป็นตัวเลือก แต่สำหรับข้อเสนอรหัสสม่ำเสมอในราคาคู่
0 หน่วยเป็นค่าที่ระบุเพื่อหลีกเลี่ยงการยกตัวอย่างเช่นมี margin: 0; แทน margin: 0px;

สำหรับคำที่ใช้ในที่นี้มีคำถาม? โปรดดูที่วิกิพีเดีย แผ่น Cascading Style - ไวยากรณ์

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

เพื่อประกาศ

งบทรัพย์สินที่เกี่ยวข้องควรมีการจัดกลุ่มและจัดให้อยู่ในลำดับต่อไปนี้:

การวางตำแหน่ง
รูปแบบกล่อง
พิมพ์
ภาพ

ในฐานะที่เป็นตำแหน่ง (ตำแหน่ง) สามารถเอาองค์ประกอบจากการไหลของเอกสารตามปกติและยังครอบคลุมรูปแบบกล่อง (กล่องแบบ) ที่เกี่ยวข้องกับรูปแบบดังนั้นในแถวแรก รูปแบบกล่องในสถานที่ที่สองเพราะมันเป็นตัวกำหนดขนาดและตำแหน่งขององค์ประกอบ

คุณสมบัติอื่น ๆ มีผลเฉพาะชิ้นส่วนภายใน (ภายใน) หรือไม่ได้ส่งผลกระทบต่อทั้งสองกลุ่มแรกแอตทริบิวต์ดังนั้นที่ด้านหลัง

รายการที่สมบูรณ์ของคุณสมบัติและการสั่งซื้อของพวกเขาอ้างถึง Recess

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

อย่าใช้ `@import`

และ <link> เมื่อเทียบกับแท็ก @import สั่งช้ากว่ามากไม่เพียง แต่เพิ่มจำนวนของการร้องขอเพิ่มเติม แต่ยังนำไปสู่ปัญหาที่ไม่คาดคิด มีหลายทางเลือกคือ:

ใช้หลาย <link> องค์ประกอบ
โดย Sass หรือน้อยเช่น CSS preprocessor ไฟล์ CSS หลายรวบรวมเป็นไฟล์เดียว
โดยทางรถไฟ Jekyll หรือระบบอื่น ๆ CSS คุณลักษณะผสานไฟล์

อ้างถึง บทความสตีฟ Souders ที่จะเรียนรู้ความรู้มากขึ้น

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

คำสั่งสื่อ (แบบสอบถามสื่อ) ตำแหน่ง

แบบสอบถามสื่อวางไว้ใกล้เคียงกับกฎระเบียบที่เกี่ยวข้อง อย่าเก็บไว้ในไฟล์รูปแบบเดียวหรือที่ด้านล่างของเอกสาร หากคุณนำพวกเขาออกจากกันและในอนาคตทุกคนจะถูกลืม นี่เป็นตัวอย่างทั่วไป

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

ด้วยคำนำหน้าแอตทริบิวต์

เมื่อใช้คุณลักษณะเฉพาะผู้ขายนำหน้าด้วยการเยื้องซึ่งจะช่วยให้มูลค่าของทรัพย์สินแต่ละมีความสอดคล้องในทิศทางแนวตั้งมันเป็นเรื่องง่ายที่จะแก้ไขหลายคู่สาย

ใน Textmate ใช้ข้อความ→แก้ไขแต่ละบรรทัดในการคัดเลือก ( ^ ⌘A) ใน Sublime Text 2 ใช้การเลือก→เพิ่มบรรทัดก่อนหน้า (^ ⇧↑ ) และการคัดเลือก→เพิ่มถัดไปสาย (^ ⇧↓ )

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

บรรทัดเดียวประกาศกฎ

สำหรับรูปแบบที่มีเฉพาะคำสั่งในการสั่งซื้อเพื่ออำนวยความสะดวกและความชัดเจนการแก้ไขอย่างรวดเร็วเราขอแนะนำให้คำสั่งในบรรทัดเดียวกัน สำหรับจำนวนของรูปแบบที่มีการประกาศหรือคำสั่งควรจะแบ่งออกเป็นหลายสาย

เป็นปัจจัยสำคัญในการทำเช่นนี้คือการตรวจสอบข้อผิดพลาด - ตัวอย่างเช่น CSS ตรวจสอบชี้ให้เห็นว่า 183 เส้นมีข้อผิดพลาดทางไวยากรณ์ ถ้าเป็นบรรทัดเดียวคำเดียวคุณจะไม่ละเว้นข้อผิดพลาดนี้ถ้ามันเป็นมากกว่าคำสั่งบรรทัดเดียวคุณอย่างต้องวิเคราะห์ความผิดพลาดที่จะหลีกเลี่ยงที่ขาดหายไป

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

ประกาศสถานที่ให้บริการจดชวเลข

ในความต้องการอย่างชัดเจนกำหนดค่าของทุกกรณีที่เราควรจะพยายามที่จะ จำกัด การใช้งานของการประกาศคุณสมบัติชวเลข สถานการณ์ทำร้ายทั่วไปคุณสมบัติจดชวเลขประกาศดังต่อไปนี้:

padding
margin
font
background
border
border-radius

ในกรณีส่วนใหญ่ที่เราไม่จำเป็นต้องระบุค่าทั้งหมดของรูปแบบการประกาศแอตทริบิวต์ย่อ ยกตัวอย่างเช่น HTML มุ่งหน้าไปเพียงองค์ประกอบด้านบนชุดและอัตรากำไรที่ด้านล่าง (ขอบ) มูลค่าดังนั้นเมื่อมีความจำเป็นเพียงครอบคลุมทั้งสองค่าสามารถ การใช้งานที่มากเกินไปแบบสั้น ๆ ของการประกาศทรัพย์สินที่สามารถนำไปสู่ความสับสนรหัสมูลค่าทรัพย์สินและจะนำมาทับซ้อนที่ไม่จำเป็นก่อให้เกิดผลข้างเคียงที่ไม่คาดคิด

MDN (Mozilla พัฒนาเครือข่าย) บนความคิดที่ดีมากเกี่ยวกับ คุณสมบัติของชวเลข ของบทความสำหรับการประกาศคุณสมบัติคุ้นเคยน้อยจดชวเลขและพฤติกรรมของผู้ใช้เป็นประโยชน์

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

น้อยลงและ Sass ซ้อนกัน

หลีกเลี่ยงการทำรังที่ไม่จำเป็น นี้เป็นเพราะแม้ว่าคุณสามารถใช้รัง แต่ไม่ได้หมายความว่าคุณควรใช้ซ้อนกัน เฉพาะในรูปแบบที่คุณต้อง จำกัด ภายในองค์ประกอบหลัก (เช่นลูกหลานตัวเลือก) และต้องการเพียงเสียงส่วนใหญ่ขององค์ประกอบที่ซ้อนกันโดยใช้ซ้อนกันอยู่

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

หมายเหตุ

รหัสที่เขียนและดูแลโดยคน โปรดตรวจสอบว่ารหัสของคุณสามารถเป็นตัวอธิบายที่ดีให้ความเห็นและเข้าใจคนอื่นได้ง่าย ความคิดเห็นดีรหัสสามารถถ่ายทอดบริบทและวัตถุประสงค์ของรหัส ไม่เพียงแค่ย้ำส่วนประกอบหรือชื่อชั้น

สำหรับความเห็นอีกต่อไปให้แน่ใจว่าจะเขียนเป็นประโยคที่สมบูรณ์สำหรับการแสดงความคิดเห็นโดยทั่วไปสามารถเขียนประโยคง่ายๆ

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

ชื่อชั้น

ชื่อชั้นสามารถปรากฏตัวอักษรตัวพิมพ์เล็กเท่านั้นและขีดคั่น (Dashe) (ไม่ได้ขีดเส้นใต้หรือโคกศัพท์) Dash ควรจะใช้สำหรับการเรียนที่เกี่ยวข้องที่มีชื่อ (เช่น namespaces) (ตัวอย่างเช่น .btn และ .btn-danger )
หลีกเลี่ยงการจดชวเลขพลมากเกินไป .btn ปุ่มแทน แต่ .s ได้แสดงความหมายใด ๆ
ชื่อชั้นควรจะเป็นระยะสั้นและความหมายที่ชัดเจน
ใช้ชื่อที่มีความหมาย ใช้จัดหรือเด็ดเดี่ยวของชื่อไม่ได้ใช้การแสดงออก (presentational) ชื่อ
ขึ้นอยู่กับระดับผู้ปกครองที่ใกล้ที่สุดหรือขั้นพื้นฐาน (base) เป็นคำนำหน้าชั้นเรียนใหม่
ใช้ .js-* ระดับการระบุพฤติกรรม (เมื่อเทียบกับรูปแบบ) และไม่ได้มีระดับเหล่านี้เพื่อ CSS แฟ้ม

Sass และหักการตั้งชื่อตัวแปรยังอ่านรายละเอียดทั้งหมดที่ระบุไว้ข้างต้น

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

ผู้เลือก

สำหรับองค์ประกอบทั่วไปใช้คลาสเอื้อดังนั้นเพื่อเพิ่มประสิทธิภาพในการแสดงผล
สำหรับส่วนประกอบมักจะหลีกเลี่ยงการใช้ทรัพย์สินเตอร์ (ตัวอย่างเช่น [class^="..."] ) ประสิทธิภาพการทำงานของเบราว์เซอร์จะได้รับผลกระทบจากปัจจัยเหล่านี้
Selectors สั้นที่สุดเท่าที่เป็นไปได้และพยายามที่จะ จำกัด จำนวนขององค์ประกอบของการเลือกที่จะขอแนะนำไม่ให้เกิน 3
เฉพาะเมื่อมันเป็นสิ่งจำเป็นที่จะ จำกัด ในชั้นสุดท้ายขององค์ประกอบหลัก (เช่นลูกหลานตัวเลือก) (ตัวอย่างเช่นไม่ใช้คลาสที่มีคำนำหน้า - คำนำหน้า namespace เป็นที่คล้ายกัน)

อ่านเพิ่มเติม:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

รหัสองค์กร

รหัสองค์กรตัวแทนหน่วย
การพัฒนาของการกำหนดคำอธิบายประกอบที่สอดคล้องกัน
ใช้ช่องว่างที่สอดคล้องกันแยกออกเป็นกลุ่มของรหัสเอื้อดังนั้นในการสแกนเอกสารขนาดใหญ่
หากมีมากกว่าหนึ่งไฟล์ CSS ในรูปแบบของสปินออกการชุมนุมมากกว่าหน้าเพราะหน้าจะมีการปรับโครงสร้างองค์กรและการชุมนุมจะถูกย้าย

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

การกำหนดค่าการแก้ไข

การแก้ไขของคุณให้สอดคล้องกับการตั้งค่าดังต่อไปนี้เพื่อหลีกเลี่ยงความไม่สอดคล้องกันรหัสทั่วไปและความแตกต่าง:

สองช่องว่างแทนของแท็บ (นิ่มแท็บที่เป็นตัวแทนของตัวละครที่แท็บที่มีช่องว่าง)
เมื่อคุณบันทึกแฟ้มเพื่อลบช่องว่างต่อท้าย
ตั้งค่าการเข้ารหัสไฟล์เพื่อ UTF-8
ในตอนท้ายของไฟล์เพิ่มบรรทัดว่างเปล่า

หมายถึงเอกสารและเพิ่มข้อมูลการกำหนดค่าให้กับโครงการ .editorconfig ไฟล์ ตัวอย่างเช่น ในเงินทุนในกรณี .editorconfig สำหรับข้อมูลเพิ่มเติมโปรดดูที่ เกี่ยวกับ EditorConfig

ก่อนหน้านี้: Bootstrap ประชุม HTML เข้ารหัส

Bootstrap หลักสูตร

Bootstrap CSS

Bootstrap ส่วนประกอบเค้าโครง

Bootstrap วิดเจ็ต

Bootstrap อื่น ๆ

บูตมาตรฐาน CSS การเข้ารหัส

ไวยากรณ์

เพื่อประกาศ

อย่าใช้ `@import`

คำสั่งสื่อ (แบบสอบถามสื่อ) ตำแหน่ง

ด้วยคำนำหน้าแอตทริบิวต์

บรรทัดเดียวประกาศกฎ

ประกาศสถานที่ให้บริการจดชวเลข

น้อยลงและ Sass ซ้อนกัน

หมายเหตุ

ชื่อชั้น

ผู้เลือก

รหัสองค์กร

การกำหนดค่าการแก้ไข

Bootstrap หลักสูตร

Bootstrap CSS

Bootstrap ส่วนประกอบเค้าโครง

Bootstrap วิดเจ็ต

Bootstrap อื่น ๆ

บูตมาตรฐาน CSS การเข้ารหัส

ไวยากรณ์

เพื่อประกาศ

อย่าใช้ @import

คำสั่งสื่อ (แบบสอบถามสื่อ) ตำแหน่ง

ด้วยคำนำหน้าแอตทริบิวต์

บรรทัดเดียวประกาศกฎ

ประกาศสถานที่ให้บริการจดชวเลข

น้อยลงและ Sass ซ้อนกัน

หมายเหตุ

ชื่อชั้น

ผู้เลือก

รหัสองค์กร

การกำหนดค่าการแก้ไข

อย่าใช้ `@import`