อย่าเขียนหัวเรื่องใน CSS
เพียงแค่แบ่งส่วนต่างๆเป็นไฟล์ ความคิดเห็น CSS ใด ๆ ควรเป็นเพียงความคิดเห็น
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
ใช้สคริปต์เพื่อรวมเข้าเป็นหนึ่งเดียว ในกรณีที่จำเป็น. คุณสามารถมีโครงสร้างไดเรกทอรีที่ดีได้เช่นกันและให้สคริปต์ของคุณทำการสแกน.cssไฟล์ซ้ำ ๆ
หากคุณต้องเขียนหัวเรื่องให้มี TOC ที่จุดเริ่มต้นของไฟล์
หัวเรื่องใน TOC ควรเท่ากับส่วนหัวที่คุณเขียนในภายหลังอย่างสมบูรณ์ การค้นหาหัวเรื่องเป็นเรื่องยาก ในการเพิ่มปัญหาใคร ๆ จะรู้ว่าคุณมีส่วนหัวอื่นหลังจากส่วนหัวแรกของคุณอย่างไร PS อย่าเพิ่ม Doc-like * (ดาว) ที่จุดเริ่มต้นของแต่ละบรรทัดเมื่อเขียน TOC มันแค่ทำให้การเลือกข้อความน่ารำคาญยิ่งขึ้น
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
เขียนความคิดเห็นด้วยหรือภายในกฎไม่ใช่ด้านนอกบล็อก
ก่อนอื่นเมื่อคุณแก้ไขสคริปต์มีโอกาส 50/50 คุณจะต้องใส่ใจกับสิ่งที่อยู่นอกบล็อกกฎ (โดยเฉพาะอย่างยิ่งถ้ามันเป็นข้อความขนาดใหญ่;)) ประการที่สองมี (เกือบ) ไม่มีกรณีที่คุณจะต้องมี "ความคิดเห็น" นอก หากอยู่นอกก็เป็น 99% ของเวลาที่มีชื่อดังนั้นให้เป็นเช่นนั้น
แยกหน้าออกเป็นส่วนประกอบ
ส่วนประกอบควรมีposition:relativeไม่paddingและไม่marginใช้เวลาส่วนใหญ่ ช่วยลดความยุ่งยากนี้% กฎจำนวนมากเช่นเดียวกับการอนุญาตให้ง่ายมากabsolute:position'ไอเอ็นจีขององค์ประกอบเพราะถ้ามีภาชนะบรรจุในตำแหน่งที่แน่นอนองค์ประกอบในตำแหน่งที่แน่นอนจะใช้ภาชนะเมื่อคำนวณtop, right, bottom, leftคุณสมบัติ
DIV ส่วนใหญ่ในเอกสาร HTML5 มักเป็นส่วนประกอบ
องค์ประกอบเป็นสิ่งที่สามารถพิจารณาหน่วยอิสระในหน้า ในแง่ของฆราวาสรักษาบางอย่างเช่นองค์ประกอบถ้ามันทำให้รู้สึกถึงบางสิ่งบางอย่างรักษาเหมือนกล่องดำ
ไปกับตัวอย่างหน้า QA อีกครั้ง:
#navigation
#question
#answers
#answers .answer
etc.
โดยการแบ่งหน้าออกเป็นส่วนประกอบคุณแบ่งงานของคุณออกเป็นหน่วยที่จัดการได้
วางกฎที่มีเอฟเฟกต์สะสมในบรรทัดเดียวกัน
ตัวอย่างเช่นborder, marginและpadding( แต่ไม่outline) เพิ่มทั้งหมดไปยังมิติและขนาดขององค์ประกอบที่คุณได้รับการจัดแต่งทรงผม
position: absolute; top: 10px; right: 10px;
หากพวกเขาเป็นเพียงที่ไม่สามารถอ่านได้ในหนึ่งบรรทัดอย่างน้อยทำให้พวกเขาอยู่ใกล้:
padding: 10px; margin: 20px;
border: 1px solid black;
ใช้ชวเลขเมื่อเป็นไปได้:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
อย่าเลือกตัวเลือกซ้ำ
หากคุณมีอินสแตนซ์เพิ่มเติมของตัวเลือกเดียวกันมีโอกาสดีที่คุณจะหลีกเลี่ยงไม่ได้ที่จะต้องจบด้วยอินสแตนซ์ของกฎเดียวกันหลายอินสแตนซ์ ตัวอย่างเช่น:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
หลีกเลี่ยงการใช้ TAGs เป็นตัวเลือกเมื่อคุณสามารถใช้ id / คลาส
ก่อนปิดแท็ก DIV และ SPAN เป็นข้อยกเว้น: คุณไม่ควรใช้มันเลย! ;) ใช้เพื่อแนบ class / id เท่านั้น
นี้...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
ควรเขียนดังนี้:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
เนื่องจาก DIV ที่ห้อยอยู่พิเศษนั้นไม่เพิ่มอะไรให้กับตัวเลือก พวกเขายังบังคับใช้กฎแท็กที่ไม่จำเป็น ตัวอย่างเช่นถ้าคุณเปลี่ยน.answerจาก a divเป็นarticleสไตล์ของคุณ
หรือถ้าคุณต้องการความชัดเจนมากขึ้น:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
เหตุผลที่เป็นคุณสมบัติเป็นคุณสมบัติพิเศษที่ทำให้รู้สึกเมื่อนำไปใช้กับborder-collapse tableถ้า.statisticsไม่ใช่tableจะไม่ควรใช้
กฎทั่วไปเป็นสิ่งชั่วร้าย!
- หลีกเลี่ยงการเขียนกฎทั่วไป / เวทมนตร์หากคุณทำได้
- ยกเว้นว่าจะเป็นสำหรับ CSS-reset / unreset เวทมนตร์ทั่วไปทั้งหมดของคุณควรใช้กับองค์ประกอบของรากอย่างน้อยหนึ่งองค์ประกอบ
พวกเขาไม่ได้ช่วยคุณประหยัดเวลาพวกเขาทำให้หัวของคุณระเบิด เช่นเดียวกับการบำรุงรักษาฝันร้าย เมื่อคุณเขียนกฎคุณอาจทราบว่ามีการนำไปใช้ที่ไหน แต่ไม่รับประกันว่ากฎของคุณจะไม่ยุ่งกับคุณในภายหลัง
ในการเพิ่มกฎทั่วไปนี้ทำให้เกิดความสับสนและอ่านยากแม้ว่าคุณจะมีความคิดเกี่ยวกับเอกสารที่คุณใส่สไตล์ นี่ไม่ได้เป็นการบอกว่าคุณไม่ควรเขียนกฎทั่วไปเพียง แต่อย่าใช้กฎเหล่านั้นเว้นแต่ว่าคุณต้องการให้เป็นกฎทั่วไปและถึงแม้จะเพิ่มข้อมูลขอบเขตเข้าไปในตัวเลือกเท่าที่คุณจะทำได้
อะไรเช่นนี้ ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... มีปัญหาเช่นเดียวกับการใช้ตัวแปรโกลบอลในภาษาโปรแกรม คุณต้องให้ขอบเขต!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
โดยทั่วไปที่อ่านว่า:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
ฉันชอบใช้ ID ทุกครั้งที่องค์ประกอบที่ฉันรู้จักคือซิงเกิลตันบนหน้า ความต้องการของคุณอาจแตกต่างกัน
หมายเหตุ: เป็นการดีที่คุณควรเขียนพอ การกล่าวถึงส่วนประกอบเพิ่มเติมในตัวเลือกอย่างไรก็ตามเป็นข้อผิดพลาดที่ให้อภัยมากกว่าเมื่อเปรียบเทียบกับการกล่าวถึงส่วนประกอบที่น้อยลง
สมมติว่าคุณมีpaginationองค์ประกอบ คุณใช้งานได้ในหลายที่ทั่วทั้งไซต์ของคุณ นี่จะเป็นตัวอย่างที่ดีของการที่คุณจะเขียนกฎทั่วไป ให้บอกว่าคุณdisplay:blockลิงค์หมายเลขหน้าแต่ละคนและให้พวกเขามีพื้นหลังสีเทาเข้ม เพื่อให้มองเห็นได้คุณจะต้องมีกฎเช่นนี้:
.pagination .pagelist a {
color: #fff;
}
ตอนนี้สมมติว่าคุณใช้การแบ่งหน้าสำหรับรายการคำตอบคุณอาจพบสิ่งนี้
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
นี่จะทำให้ลิงก์สีขาวของคุณเป็นสีดำซึ่งคุณไม่ต้องการ
วิธีที่ไม่ถูกต้องในการแก้ไขคือ:
.pagination .pagelist a {
color: #fff !important;
}
วิธีที่ถูกต้องในการแก้ไขคือ:
#answers .header .pagination .pagelist a {
color: #fff;
}
ความคิดเห็น "ตรรกะ" ที่ซับซ้อนไม่ทำงาน :)
ถ้าคุณเขียนบางอย่างเช่น: "ค่านี้ขึ้นอยู่กับ blah-blah บวกกับความสูงของ blah-blah" มันเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่คุณจะทำผิดพลาดและมันจะล้มลงเหมือนบ้านของไพ่
ทำให้ความคิดเห็นของคุณง่าย ถ้าคุณต้องการ "ตรรกะการดำเนินงาน" พิจารณาหนึ่งในบรรดาภาษา CSS templating เช่นSASSหรือน้อย
ฉันจะเขียนพาเลทสีได้อย่างไร
ปล่อยให้เรื่องนี้จบ มีไฟล์สำหรับพาเลทสีทั้งหมดของคุณ หากไม่มีไฟล์นี้สไตล์ของคุณยังควรมีพาเลทสีที่สามารถใช้งานได้ในกฎ พาเลทสีของคุณควรเขียนทับ คุณเลือกลูกโซ่โดยใช้ส่วนประกอบหลักระดับสูงมาก (เช่น. #page) จากนั้นเขียนสไตล์ของคุณเป็นบล็อกกฎแบบพอเพียง มันอาจเป็นแค่สีหรืออะไรมากกว่านั้น
เช่น.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
ความคิดนั้นง่ายแท่นวางสีของคุณเป็นสไตล์ชีทซึ่งเป็นอิสระจากสไตล์ฐานซึ่งคุณเรียงซ้อนกัน
ชื่อน้อยต้องการหน่วยความจำน้อยลงทำให้อ่านง่ายขึ้น
ใช้ชื่อน้อยกว่าดีกว่า ใช้คำที่ง่ายมาก (และสั้น ๆ ) คำ: ข้อความส่วนหัว
ฉันยังพบว่าการผสมผสานของคำง่าย ๆ นั้นง่ายต่อการเข้าใจแล้วมีซุปคำที่ "เหมาะสม" ที่ยาว: postbody, posthead, userinfo เป็นต้น
รักษาคำศัพท์เล็ก ๆ ด้วยวิธีนี้แม้ว่าคนแปลกหน้าบางคนจะเข้ามาอ่านซุปสไตล์ของคุณ (เช่นตัวคุณเองหลังจากผ่านไปสองสามสัปดาห์)) เพียงแค่ต้องเข้าใจว่าคำศัพท์นั้นถูกใช้ที่ไหน ตัวอย่างเช่นฉันใช้.thisเมื่อใดก็ตามที่องค์ประกอบควรจะเป็น "รายการที่เลือก" หรือ "รายการปัจจุบัน" ฯลฯ
ทำความสะอาดตัวเอง
การเขียน CSS ก็เหมือนกับการกินบางครั้งคุณก็ทิ้งความวุ่นวายเอาไว้ ตรวจสอบให้แน่ใจว่าคุณล้างระเบียบนั้นมิฉะนั้นรหัสขยะก็จะกองพะเนินเทินทึก ลบคลาส / รหัสที่คุณไม่ได้ใช้ ลบกฎ CSS ที่คุณไม่ได้ใช้ ตรวจสอบให้แน่ใจว่าทุกอย่างเรียบร้อยดีและคุณไม่มีกฎที่ขัดแย้งหรือซ้ำซ้อน
หากคุณแนะนำให้คุณปฏิบัติต่อคอนเทนเนอร์บางตัวเป็นกล่องดำ (ส่วนประกอบ) ตามสไตล์ของคุณใช้ส่วนประกอบเหล่านั้นในตัวเลือกของคุณและเก็บทุกอย่างไว้ในไฟล์เฉพาะไฟล์เดียว (หรือแบ่งไฟล์ด้วย TOC และส่วนหัวอย่างถูกต้อง) ทำงานง่ายกว่ามาก ...
คุณสามารถใช้เครื่องมือเช่นส่วนเสริม firefox Selectors Dust-Me (เคล็ดลับ: ชี้ไปที่ sitemap.xml) เพื่อช่วยคุณค้นหาขยะบางส่วนที่ซ่อนอยู่ใน css nukes และ carnies ของคุณ
เก็บunsorted.cssไฟล์
สมมติว่าคุณมีการจัดแต่งทรงผมเว็บไซต์ QA และคุณมีสไตล์ชีทสำหรับ "คำตอบที่หน้า" answers.cssซึ่งเราจะเรียก หากคุณต้องการเพิ่ม css ใหม่จำนวนมากให้เพิ่มลงในunsorted.cssสไตล์ชีทจากนั้นปรับโครงสร้างใหม่ในanswers.cssสไตล์ชีทของคุณ
ด้วยเหตุผลหลายประการ:
- มันเร็วกว่าที่จะ refactor หลังจากเสร็จสิ้นจากนั้นก็คือการค้นหากฎ (ที่อาจไม่มีอยู่) และฉีดโค้ด
- คุณจะเขียนสิ่งที่คุณจะลบการฉีดโค้ดทำให้ยากที่จะลบรหัสนั้น
- การต่อท้ายไฟล์ต้นฉบับจะนำไปสู่การทำซ้ำกฎ / ตัวเลือก
simplicity,complexity,maintenance, และstructurerefactoring