คู่มือสไตล์ Sass: บทแนะนำ Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น

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

Sass คืออะไรและทำไมคุณจึงควรใช้

สำหรับผู้ที่ไม่รู้ว่า Sass คืออะไร จุดเริ่มต้นที่ดีที่สุดคือเข้าไปที่หน้าเว็บทางการของ Sass Sass เป็นตัวย่อสำหรับ Syntactically Awesome StyleSheets และเป็นส่วนขยายของ CSS ที่เพิ่มพลังและความสง่างามให้กับภาษาพื้นฐาน

Sass เป็นตัวประมวลผลล่วงหน้า CSS ที่มีคุณสมบัติอันทรงพลังมากมาย คุณสมบัติที่โดดเด่นที่สุดคือตัวแปร ส่วนขยาย และมิกซ์อิน

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

ทำไมคุณถึงต้องการคู่มือสไตล์ CSS

น่าเสียดายที่ตัวประมวลผลล่วงหน้าไม่สามารถแก้ไขทุกอย่างและช่วยให้คุณเขียนโค้ด CSS ที่ดีได้ ปัญหาที่นักพัฒนาทุกคนต้องเผชิญคือเว็บแอปพลิเคชันปัจจุบันมีขนาดใหญ่ขึ้นเรื่อยๆ นั่นคือเหตุผลที่โค้ดต้องสามารถปรับขนาดได้และอ่านได้ และต้องหลีกเลี่ยงโค้ดสปาเก็ตตี้และบรรทัดที่ไม่ได้ใช้ เพื่อหลีกเลี่ยงปัญหาดังกล่าว จำเป็นต้องมีมาตรฐานบางอย่างสำหรับทีมของคุณในการทำงานประจำวัน รหัสสปาเก็ตตี้คืออะไรและเกิดขึ้นได้อย่างไร? รหัสสปาเก็ตตี้เป็นชื่อของรหัสที่ไม่ดี ช้า ซ้ำซ้อน และอ่านไม่ได้ เมื่อทีมเขียนแอปพลิเคชันขนาดใหญ่โดยไม่มีแนวทางหรือมาตรฐานที่กำหนดไว้ นักพัฒนาแต่ละคนจะเขียนสิ่งที่เขาต้องการและวิธีที่เขาต้องการ นอกจากนี้ เมื่อนักพัฒนากำลังเขียนการแก้ไขจุดบกพร่อง โปรแกรมแก้ไขด่วน และโปรแกรมแก้ไขจำนวนมาก พวกเขามักจะเขียนโค้ดที่จะแก้ปัญหาได้ แต่ไม่มีเวลาเขียนโค้ดอย่างดีที่สุด ในสถานการณ์เหล่านี้ เป็นเรื่องปกติมากที่จะจบลงด้วย CSS จำนวนมากที่ไม่ได้ใช้งานในส่วนใดๆ ของแอปพลิเคชันอีกต่อไป นักพัฒนาไม่มีเวลาเพียงพอในการทำความสะอาดโค้ด และพวกเขาถูกบังคับให้เผยแพร่โปรแกรมแก้ไขโดยเร็วที่สุด สถานการณ์ที่เกิดซ้ำอีกประการหนึ่งคือเพื่อแก้ไขสิ่งที่เสียหายอย่างรวดเร็ว นักพัฒนาใช้ !important จำนวนมาก ซึ่งส่งผลให้โค้ดแฮ็กมากซึ่งยากต่อการดูแล ส่งผลให้เกิดพฤติกรรมที่ไม่คาดคิดมากมาย และจำเป็นต้องปรับโครงสร้างใหม่ในภายหลัง ดังที่ได้กล่าวไปแล้ว เมื่อโค้ดเติบโตขึ้น สถานการณ์ก็ยิ่งแย่ลงเท่านั้น

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

คู่มือสไตล์

ชุดของกฎเกณฑ์และแนวทางปฏิบัติที่ดีที่สุดในคู่มือรูปแบบนี้นำมาใช้โดยพิจารณาจากประสบการณ์การทำงานกับทีมจำนวนมาก บางส่วนมาจากการลองผิดลองถูก และบางส่วนได้รับแรงบันดาลใจจากแนวทางยอดนิยมบางอย่าง เช่น BEM สำหรับกฎบางกฎ ไม่มีเหตุผลเฉพาะเจาะจงว่าทำไมและอย่างไรจึงถูกกำหนดไว้ บางครั้งการมีประสบการณ์ในอดีตเป็นเหตุผลเดียวก็เพียงพอแล้ว ตัวอย่างเช่น เพื่อให้แน่ใจว่าโค้ดสามารถอ่านได้ นักพัฒนาทุกคนจะต้องเขียนโค้ดในลักษณะเดียวกัน ดังนั้นจึงมีกฎที่จะไม่รวมช่องว่างระหว่างวงเล็บ เราสามารถโต้แย้งได้ว่าควรใส่ช่องว่างระหว่างวงเล็บหรือไม่ หากคุณคิดว่ามันดูดีกว่าเมื่อมีช่องว่างระหว่างวงเล็บ ให้ปรับคำแนะนำสไตล์และกฎตามความต้องการของคุณ ในท้ายที่สุด เป้าหมายหลักของคู่มือสไตล์คือการกำหนดกฎเกณฑ์ และทำให้กระบวนการพัฒนามีมาตรฐานมากขึ้น

กฎ CSS ทั่วไป

ควรปฏิบัติตามกฎทั่วไปเสมอ ส่วนใหญ่จะเน้นไปที่การจัดรูปแบบโค้ด Sass เพื่อให้โค้ดมีความสอดคล้องและอ่านง่าย:

• สำหรับการเยื้อง ให้ใช้ช่องว่างแทนแท็บ แนวปฏิบัติที่ดีที่สุดคือการใช้ช่องว่าง 2 ช่อง คุณสามารถทำสงครามศักดิ์สิทธิ์ด้วยตัวเลือกนี้ และคุณสามารถกำหนดกฎของคุณเองและใช้แท็บ หรือช่องว่าง หรืออะไรก็ได้ที่เหมาะกับคุณที่สุด สิ่งสำคัญคือต้องกำหนดกฎและปฏิบัติตามกฎนั้นในขณะที่มีความสอดคล้องกัน
• รวมบรรทัดว่างระหว่างแต่ละคำสั่ง สิ่งนี้ทำให้มนุษย์อ่านโค้ดได้ง่ายขึ้น และโค้ดถูกเขียนขึ้นโดยมนุษย์ ใช่ไหม
• ใช้หนึ่งตัวเลือกต่อบรรทัด ดังนี้:

 selector1, selector2 { }

• อย่าเว้นวรรคระหว่างวงเล็บ

 selector { @include mixin1($size: 4, $color: red); }

• ใช้เครื่องหมายคำพูดเดี่ยวเพื่อใส่สตริงและ URL:

 selector { font-family: 'Roboto', serif; }

• จบกฎทั้งหมดด้วยเครื่องหมายอัฒภาคโดยไม่มีการเว้นวรรคก่อน:

 selector { margin: 10px; }

กฎสำหรับผู้เลือก

ต่อไป เราจะปฏิบัติตามด้วยชุดของกฎที่จะใช้เมื่อต้องรับมือกับตัวเลือก:

• หลีกเลี่ยงการใช้ตัวเลือก ID รหัสมีความเฉพาะเจาะจงเกินไปและส่วนใหญ่ใช้สำหรับการทำงานของ JavaScript
• หลีกเลี่ยง !important . หากคุณต้องการใช้กฎนี้ หมายความว่ามีบางอย่างผิดปกติกับกฎ CSS โดยทั่วไป และ CSS ของคุณไม่มีโครงสร้างที่ดี CSS ที่มีกฎ !important จำนวนมากสามารถนำไปใช้ในทางที่ผิดได้ง่ายและจบลงด้วยโค้ด CSS ที่ยุ่งและยากต่อการดูแล
• อย่าใช้ตัวเลือกลูก กฎนี้ใช้เหตุผลเดียวกันกับ ID one ตัวเลือกย่อยมีความเฉพาะเจาะจงเกินไปและเชื่อมโยงกับโครงสร้าง HTML ของคุณอย่างแน่นหนา

รักษากฎ Sass ของคุณให้เป็นระเบียบ

สิ่งสำคัญคือต้องรักษาความสม่ำเสมอในโค้ด กฎข้อหนึ่งคือคุณต้องรักษาลำดับของกฎ วิธีนี้จะทำให้นักพัฒนาคนอื่นๆ สามารถอ่านโค้ดได้อย่างเข้าใจมากขึ้น และจะใช้เวลาน้อยลงในการหาทางแก้ไข นี่คือคำสั่งที่เสนอ:

1. ใช้ @extend ก่อน สิ่งนี้ทำให้คุณทราบในตอนแรกว่าคลาสนี้สืบทอดกฎจากที่อื่น
2. ใช้ @include ต่อไป การมีมิกซ์อินและฟังก์ชันของคุณอยู่ด้านบนนั้นเป็นเรื่องที่ดี และยังช่วยให้คุณรู้ว่าคุณจะต้องเขียนทับอะไร (ถ้าจำเป็น)
3. ตอนนี้คุณสามารถเขียนกฎคลาส CSS หรือองค์ประกอบปกติของคุณ
4. วางคลาส pseudo ที่ซ้อนกันและอิลิเมนต์ pseudo ก่อนองค์ประกอบอื่น
5. สุดท้าย เขียนตัวเลือกที่ซ้อนกันอื่นๆ ดังในตัวอย่างต่อไปนี้:

 .homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ''; } a { } ul { } }

ข้อตกลงการตั้งชื่อบางอย่าง

แบบแผนการตั้งชื่อส่วนหนึ่งของหนังสือสไตล์จะขึ้นอยู่กับสองแบบแผนการตั้งชื่อ BEM และ SMACSS ที่มีอยู่ซึ่งได้รับความนิยมในหมู่นักพัฒนา BEM ย่อมาจาก Block, Element, Modifier ได้รับการพัฒนาโดยทีมงาน YANDEX และแนวคิดเบื้องหลัง BEM คือการช่วยให้นักพัฒนาเข้าใจความสัมพันธ์ระหว่าง HTML และ CSS ในโครงการ SMACSS ย่อมาจาก Scalable และ Modular Architecture สำหรับ CSS เป็นแนวทางในการจัดโครงสร้าง CSS เพื่อให้บำรุงรักษาได้

โดยได้รับแรงบันดาลใจจากกฎเกณฑ์การตั้งชื่อของเรามีดังนี้:

• ใช้คำนำหน้าสำหรับองค์ประกอบแต่ละประเภท นำหน้าบล็อกของคุณ เช่น เลย์เอาต์ ( l- ) โมดูล ( m- ) และสถานะ ( is- )
• ใช้ขีดล่างสองอันสำหรับองค์ประกอบย่อยสำหรับทุกบล็อก:

 .m-tab__icon {}

• ใช้ขีดกลางสองอันสำหรับตัวปรับแต่งสำหรับทุกบล็อก:

 .m-tab--borderless {}

ตัวแปร

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

นอกจากนี้ ใช้ยัติภังค์เพื่อตั้งชื่อตัวแปรของคุณ:

 $red : #f44336; $secondary-red :#ebccd1;

แบบสอบถามสื่อ

ด้วย Sass คุณสามารถเขียนคิวรีสื่อของคุณเป็นคิวรีองค์ประกอบ นักพัฒนาส่วนใหญ่เขียนข้อความค้นหาสื่อในไฟล์แยกต่างหากหรือที่ด้านล่างของกฎของเรา แต่ไม่แนะนำ ด้วย Sass คุณสามารถเขียนสิ่งต่างๆ เช่น ตัวอย่างต่อไปนี้โดยซ้อนข้อความค้นหาสื่อ:

 // ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }

สิ่งนี้สร้าง CSS เช่นนี้:

 // Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }

กฎการสืบค้นสื่อที่ซ้อนกันนี้ช่วยให้คุณทราบอย่างชัดเจนว่าคุณกำลังเขียนทับกฎใด ดังที่คุณเห็นในข้อมูลโค้ด Sass ที่ใช้การสืบค้นสื่อที่มีชื่อ

ในการสร้างคิวรีสื่อที่มีชื่อ ให้สร้างมิกซ์อินของคุณดังนี้:

 @mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }

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

ข้อควรพิจารณาอื่น ๆ

ในท้ายที่สุด ต่อไปนี้คือข้อควรพิจารณาอื่นๆ ที่คุณควรจำไว้และปฏิบัติตาม:

• อย่าเขียนคำนำหน้าผู้ขาย ใช้คำนำหน้าอัตโนมัติแทน
• ใช้ความลึกสูงสุดสามระดับในกฎที่ซ้อนกัน ด้วยระดับที่ซ้อนกันมากกว่าสามระดับ โค้ดจะอ่านยาก และบางทีคุณกำลังเขียนตัวเลือกเส็งเคร็ง ในท้ายที่สุด คุณกำลังเขียนโค้ด CSS เพื่อจับคู่กับ HTML ของคุณ

 .class1 { .class2 { li { //last rules } } }

• อย่าเขียนโค้ดที่ซ้อนกันมากกว่า 50 บรรทัด: หรือดีกว่า อย่าเขียนโค้ดที่ซ้อนกันเกิน X บรรทัด ตั้งค่า X ของคุณเอง แต่ 50 ดูเหมือนเป็นขีดจำกัดที่ดี หากคุณผ่านขีดจำกัดนั้น บล็อกของโค้ดอาจไม่พอดีกับหน้าต่างตัวแก้ไขข้อความของคุณ
• เขียนไฟล์หลักที่คุณจะนำเข้าบล็อก บางส่วน และการกำหนดค่าทั้งหมดของคุณ
• นำเข้าผู้อ้างอิงและการพึ่งพาส่วนกลางก่อน จากนั้นจึงสร้างการพึ่งพา จากนั้นจึงจัดวาง รูปแบบ และสุดท้ายคือชิ้นส่วนและบล็อก นี่เป็นสิ่งสำคัญเพื่อหลีกเลี่ยงการนำเข้าแบบผสมและการเขียนทับกฎ เนื่องจากเราไม่สามารถจัดการผู้ขายและกฎสากลได้
• อย่าอายและทำลายรหัสของคุณในไฟล์ให้ได้มากที่สุด

บทสรุป

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