เมื่อคุณเขียนรหัส CSS จำนวนมากคุณอาจพบข้อผิดพลาดมากกว่าหนึ่งข้อ อาจจำเป็นต้องใช้เครื่องมือบางอย่างเพื่อป้องกันข้อผิดพลาดในการเขียน CSS ของคุณ
บางทีบางครั้งความผิดพลาดของคุณก็เป็นข้อผิดพลาดจริงๆ นอกจากนี้ยังเป็นไปได้ว่ารูปแบบความไม่สอดคล้องกันหรือรูปแบบรหัสที่ไม่ชัดเจนเกิดจากการรีบร้อน บางทีพวกเขาหลายคนดูเล็กน้อย (ขึ้นอยู่กับบุคลิกของคุณ) แต่เมื่อฐานรหัสเพิ่มขึ้นและเวลาสะสมผู้คนจำนวนมากจะทำสิ่งที่น่าเกลียดเมื่อใช้พวกเขา ผลที่ตามมาของสิ่งต่าง ๆ ไม่ใช่สิ่งที่คุณสามารถจินตนาการได้
คุณพยายามควบคุมตัวเอง เพื่อนร่วมงานของคุณยังช่วยคุณเมื่อคุณมีอิสระที่จะแก้ไขข้อผิดพลาดในเวลาที่เหมาะสม อย่างไรก็ตามคุณและเพื่อนร่วมงานของคุณเป็นทั้งผู้สร้างความผิดพลาดดังนั้นในที่สุดพวกเขาก็ล้มเหลวอย่างน้อยในระดับหนึ่ง ในภายหลังคุณหรือคนอื่น ๆ จะแก้ปัญหาที่เกิดจากข้อผิดพลาด CSS ในหน้าของคุณ
ทั้งคุณและเพื่อนร่วมงานของคุณไม่ชอบที่จะพูดคุยเกี่ยวกับความผิดพลาดที่คุณทำเพราะมันน่าอาย มันอาจเป็นเรื่องน่าหงุดหงิดหรือแตกทางอารมณ์ในบางครั้ง บางครั้งข้อกำหนดบางอย่างมีประโยชน์สำหรับการบำรุงรักษาฐานรหัสเช่นสไตล์การเขียนที่สอดคล้องกันซึ่งอาจดูค่อนข้างน่าเบื่อและน่าเบื่อเมื่อดำเนินการด้วยตนเอง มิฉะนั้นพวกเขาจะแสดงองค์ประกอบของความรักตามปกติของคุณที่จะแสดงออกและความดื้อรั้น
นอกจากนี้คุณอาจต้องการแก้ไขข้อผิดพลาดในเวลาที่เหมาะสมแทนที่จะรอการตรวจสอบรหัสและคนอื่น ๆ เพื่อชี้ให้เห็นข้อผิดพลาดและแก้ไขด้วยตัวคุณเองและประกาศว่าคุณจะไม่มีข้อผิดพลาดดังกล่าวอีกครั้ง เมื่อข้อผิดพลาด CSS ของคุณเกิดขึ้นข้อเสนอแนะในเวลาที่เหมาะสมจะช่วยให้คุณประหยัดเวลาได้มาก
สิ่งที่คุณต้องการคือเครื่องที่ป้องกันข้อผิดพลาด
คุณต้องมีเครื่องจักรที่ป้องกันไม่ให้เกิดข้อผิดพลาดสามารถเข้าใจ CSS และเข้าใจคุณได้: ความตั้งใจความชอบความคิดและจุดอ่อนของคุณ
เครื่องจักรดังกล่าวจะมีข้อ จำกัด ทุกอย่างไม่สมบูรณ์แบบ แต่ข้อ จำกัด นี้แตกต่างจากคุณและเพื่อนร่วมงานของคุณ ตราบใดที่มันสามารถป้องกันข้อผิดพลาดมันจะดำเนินต่อไปเพื่อป้องกันพวกเขาทำงานอย่างไม่รู้จักเหน็ดเหนื่อย ในเวลาเดียวกันคุณและเพื่อนร่วมงานของคุณสามารถปรับปรุงเครื่องจักรขยายการทำงานและลดข้อ จำกัด มันเป็นโอเพ่นซอร์สและผู้คนทั่วโลกสามารถเข้าร่วมและทำส่วนของพวกเขา-ผู้เขียนอื่น ๆ ที่ต้องการหยุดตัวเองจากการมีข้อผิดพลาดในการเขียน CSS
เช่นเดียวกับคนอื่น ๆ ผู้เขียน CSS ต้องการผ้าลินิน
เราเรียกโปรแกรมเหล่านี้ที่ป้องกันข้อผิดพลาด "linters" จาวาสคริปต์มีจาวาสคริปต์ที่ดีกว่าหลายแห่ง โดยเฉพาะอย่างยิ่ง Eslint มันทำงานได้อย่างน่าอัศจรรย์แสดงให้เราเห็นว่า linter ที่ดีมีประโยชน์มาก แต่ใน CSS เราไม่ได้โชคดีมากตัวเลือกของเรามี จำกัด มาก: SCSS-Lint ที่ใช้ทับทิมพร้อมตัวประมวลผลล่วงหน้าพิเศษและ CSS Lint ก่อนหน้านี้
แต่นี่คือทั้งหมดก่อนที่ postcss จะปรากฏขึ้น นอกจากนี้ POSTCSS ยังมีวิธีการบางอย่างในการสร้างเครื่องมือ CSS แบบโต้ตอบมากขึ้น มันสามารถแยกวิเคราะห์ไวยากรณ์คลาส CSS ใด ๆ ลงในปลั๊กอินไวยากรณ์นามธรรม (AST) ปลั๊กอินสำหรับการวิเคราะห์และการทำงาน และด้วยตัวแยกวิเคราะห์แบบกำหนดเอง postcss ยังสามารถจัดการกับรูปแบบที่ไม่ถูกต้องผิดปกติ (เช่น // ความคิดเห็น)
เงื่อนไขวุฒิภาวะสามารถสร้าง linter ที่มีคุณสมบัติที่มีประสิทธิภาพมากขึ้น-ขับเคลื่อนโดย postcss และได้รับแรงบันดาลใจจากคุณสมบัติที่ดีที่สุดของ SCSS-Lint และ Eslint
ฉันทำงานกับเพื่อนสองสามคนในโครงการนี้และตอนนี้ฉันจะเริ่มแนะนำเครื่องมือที่เราพัฒนาขึ้น: Stylelint
สิ่งที่คุณสามารถทำได้กับ Stylelint
ต่อไปนี้เป็นบทสรุปของฟังก์ชั่นที่พยายามใช้ใน Stylelint โดยมีกฎและความยืดหยุ่นมากกว่า 100 กฎ
ณ จุดนี้ถ้าคุณพบว่าตัวเองได้รับความอดทนเล็กน้อย ("โอเคโอเค: ฉันเชื่อว่า Stylelint จะมีเอฟเฟกต์การทำงานที่น่าอัศจรรย์ไม่จำเป็นต้องสรุปมากเกินไป") เพียงข้ามไปยังส่วนถัดไปที่นี่ฉันแค่อธิบายปัญหาบางอย่างและให้คำแนะนำ
การจับข้อผิดพลาด
กฎ stylelint บางอย่างได้รับการออกแบบมาเพื่อระบุข้อผิดพลาดที่ชัดเจนเช่นการสะกดคำผิดพลาดหรือการละเว้นที่สร้างขึ้นโดยดวงตาที่ไม่พอใจหรือตาของคุณ ตัวอย่างเช่นคุณสามารถปิดการใช้งานบล็อกที่ว่างเปล่าค่า hexadecimal ที่ไม่ถูกต้องตัวเลือกที่ซ้ำกันชื่อแอนิเมชั่นที่ไม่มีชื่อและไวยากรณ์การไล่ระดับสีเชิงเส้นผิด
กฎอื่น ๆ คือการพยายามอย่างเต็มที่เพื่อให้ได้ข้อผิดพลาดที่ลึกซึ้งยิ่งขึ้น นี่คือกฎ: เมื่อคุณใช้คุณสมบัติชวเลข (เช่น margin ) ที่สามารถแทนที่คุณสมบัติของพวกเขา (เช่น margin-top ) คำเตือนจะออกเพราะสิ่งนี้อาจเกิดจากความประมาทเลินเล่อของคุณ นอกจากนี้ยังมีกฎอื่นที่เตือนคุณ: เมื่อเกิดความวุ่นวายหากกฎ A ปรากฏขึ้นก่อนกฎ B แต่จริง ๆ แล้วครอบคลุมกฎ B เนื่องจากตัวเลือกกฎ A มีลำดับความสำคัญสูงกว่า (ตัวอย่างเช่นกฎ A คือ .foo.bar{・・・} และกฎ B คือ .foo{・・・} ) นี่เป็นสถานการณ์ที่ยากมาก
นอกจากนี้ยังมีกฎที่ใช้ปลั๊กอิน POSTCSS DOIUSE เพื่อตรวจสอบว่าเบราว์เซอร์ของคุณรองรับสไตล์นี้หรือไม่ อีกอันหนึ่งใช้ปลั๊กอิน CSS-Colorguard เพื่อแจ้งความคล้ายคลึงกันของสีเพื่อหลีกเลี่ยงการใช้ความสับสนของคุณ (โปรดทราบ: นี่เป็นหนึ่งในข้อได้เปรียบหลักของ Stylelint ตาม postcss: เปรียบเทียบกับปลั๊กอิน postcss อื่น ๆ Stylelint สามารถแจ้งด้วยความพยายามเพียงเล็กน้อย)
บังคับใช้แนวทางปฏิบัติที่ดีที่สุด
หากคุณใช้วิธีการระบบในสไตล์ชีทของคุณหรือมีคู่มือสไตล์สำหรับรหัสของคุณคุณควรห้ามรูปแบบเหล่านี้ Stylelint มีคุณสมบัติเหล่านี้แล้ว
ก่อนอื่นคุณต้องควบคุมตัวเลือกของคุณอย่างหนัก ด้วย Stylelint คุณสามารถปิดการใช้งานตัวเลือกที่เกินความเฉพาะเจาะจงหรือกำหนดขีด จำกัด ในความลึกของการทำรัง คุณสามารถปิดใช้งานตัวเลือกหมวดหมู่ (เช่นตัวเลือกที่ไม่มี ID) และใช้นิพจน์ปกติเพื่อการตั้งชื่อการประชุมสำหรับส่วนที่เหลือของพวกเขา
คุณสามารถห้ามการใช้งาน !important หรือแฮ็คเบราว์เซอร์ที่เบราว์เซอร์ของคุณไม่รองรับ หากคุณใช้ AutopRefixer (หรือคุณควร) คุณสามารถปิดใช้งานการใช้คำนำหน้าผู้ขายในรูปแบบชีทต้นฉบับ
หากคุณต้องการเข้มงวดมากขึ้น - คุณสามารถใช้เวลาในการกำหนดค่าเพื่อให้แน่ใจว่ามีความสอดคล้องอย่างแน่นอน - คุณสามารถบังคับใช้ลำดับของคุณสมบัติสไตล์ชีทและให้คุณสมบัติค่าค่าฟังก์ชั่นและหน่วยสำหรับบัญชีดำและผู้ขายสินค้า
ดำเนินการประชุมสไตล์รหัส
Stylelint มีการประชุมเพื่อดำเนินการตามรูปแบบรหัสโดยอัตโนมัติดังนั้นคุณและเพื่อนร่วมทีมของคุณไม่จำเป็นต้องตั้งค่าอย่างแข็งขัน เรามุ่งมั่นที่จะทำให้กฎเหล่านี้ครอบคลุมและยืดหยุ่นมากขึ้น
กฎเหล่านี้ส่วนใหญ่มุ่งเป้าไปที่ช่องว่าง แต่ยังสำหรับรายละเอียดอื่น ๆ เช่นเครื่องหมายใบเสนอราคาตัวอักษรตัวพิมพ์ใหญ่และตัวอักษรตัวพิมพ์ใหญ่การเขียนศูนย์ก่อนทศนิยมโดยใช้คำหลักการสะกดค่า ฯลฯ
ฝันว่าคุณและเพื่อนร่วมทีมของคุณสามารถสร้างการประชุมรูปแบบ (ตัวอย่างเช่นเรามักจะออกจากพื้นที่หลังจากประกาศลำไส้ใหญ่) และแก้ไขในการกำหนดค่า Stylelint ของคุณและคุณจะไม่พูดถึงอีกครั้งหลังจากนั้น ปล่อยให้มันถูกดำเนินการในอาณาจักรเครื่อง
พัฒนาและขยายทุกอย่าง
Nicholas Zakas ผู้สร้าง Eslint (และ CSS Lint) เขียนเกี่ยวกับความสำเร็จของ Eslint อยู่ในความสามารถในการปรับขนาด Stylelint พยายามติดตามผู้นำของ Eslint และให้ผู้เขียน CSS ด้วย linter ซึ่งสามารถขยายได้เช่นกัน
คุณสามารถเขียนและเผยแพร่ปลั๊กอินกฎของคุณเอง ตอนนี้เรามีหลายสิ่งหลายอย่างที่ต้องใช้ และเรากระตือรือร้นที่จะเห็นปลั๊กอินที่ยอดเยี่ยมของคนอื่น
การกำหนดค่าสามารถขยายได้และสามารถแบ่งปันได้ สำหรับปลั๊กอินเราได้เรียนรู้เกี่ยวกับมูลค่าของคุณลักษณะนี้จาก ESLINT ตรวจสอบที่มีการกำหนดค่า WordPress และ Suitcss และได้รับการเผยแพร่แล้ว
หากคุณไม่ชอบเคล็ดลับในตัวของ Stylelint คุณสามารถสร้างสไตล์ของคุณเองด้วยมือหรือแม้แต่สร้างให้กับองค์กรของคุณ นอกจากนี้คุณยังสามารถปรับแต่งกฎที่ใช้เพื่อให้ข้อความเตือน
การใช้ Stylelint API คุณสามารถสร้างปลั๊กอินสำหรับคอมไพเลอร์ข้อความและทำการทดสอบเพื่อให้ Stylelint รวมเข้ากับทุกแง่มุมของเวิร์กโฟลว์ของคุณ
หากคุณมีแนวคิดเกี่ยวกับส่วนขยาย Stylelint โปรดแจ้งให้เราทราบ!
คำตอบสำหรับคำถามที่คาดหวัง
อาจมีคำถามหลายข้อในใจของคุณ นี่คือคำอธิบายที่พบบ่อยที่สุด:
เป็นไปได้ไหมที่จะใช้ Stylelint ใน SCSS หรือน้อยกว่า?
คำตอบคือใช่คุณสามารถใช้ Stylelint ใน SCSS และรองรับได้น้อยลงเช่นกัน! เนื่องจาก POSTCSS อนุญาตให้ใช้ตัวแยกวิเคราะห์แบบกำหนดเอง Stylelint สามารถรองรับไวยากรณ์ที่ไม่ได้มาตรฐานได้อย่างง่ายดาย - คุณสามารถปรับแต่ง PostCSS Parser สำหรับการแยกวิเคราะห์
เนื่องจาก postcss parser-Stylelint รองรับ SCSS น้อยลงและน้ำตาลใหม่ หากคุณต้องการใช้การสนับสนุนทางไวยากรณ์ที่กำหนดเองอื่นคุณสามารถทำได้ด้วย postless!
แน่นอนว่ามีกฎบางอย่างที่ผูกพันกับไวยากรณ์ที่ไม่ได้มาตรฐานของคุณ (เช่น #{$interpolation} ในตัวเลือก SASS ID) เนื่องจาก Stylelint พยายามปกปิดสไตล์ของสไตล์ชีทของเรา - บางคนใช้ CSS มาตรฐานบางคนใช้ภาษาเพิ่มเติมเช่น SCSS บางคนใช้คุณสมบัติที่กำหนดเองแปลก ๆ ฯลฯ - สิ่งเหล่านี้จะสร้างช่องโหว่ที่ต้องเติมเต็ม อย่างไรก็ตามเราได้จัดการกับข้อผิดพลาดเหล่านี้ที่เราพบ กฎใด ๆ ในช่วงเวลานี้สามารถปิดหรือปิดการใช้งานได้อย่างสมบูรณ์ในสไตล์ชีทแบบแถวต่อแถวหรือในรูปแบบแถวต่อแถว
Stylelint สามารถใช้ไวยากรณ์ CSS ในอนาคตได้หรือไม่?
ใช่! คล้ายกับคำตอบที่กล่าวถึงข้างต้น: Stylelint สามารถเข้าใจสิ่งใดก็ตามที่เข้าใจได้ดีรวมถึงการเปิดใช้งานไวยากรณ์ CSS ในอนาคต (อาจผ่านปลั๊กอิน POSTCSS) ในความเป็นจริงกฎของ Stylelint บางอย่างจัดการกับไวยากรณ์ CSS ในอนาคตและคุณสมบัติที่กำหนดเองบางอย่าง
การกำหนดค่า Stylelint มีขนาดใหญ่ฉันควรเริ่มต้นที่ไหน?
เราขอแนะนำวิธีการกำหนดค่าสามวิธี:
ขยายการกำหนดค่าที่เผยแพร่ เรารักษามาตรฐานการกำหนดค่า Stylelint-Configuration เพื่ออำนวยความสะดวกให้ผู้ใช้สามารถให้เกณฑ์มาตรฐานโดยธรรมชาติ และมีการประกาศการกำหนดค่ามากมาย เริ่มต้นจากศูนย์และเพิ่มกฎทีละกฎ โดยค่าเริ่มต้นจะไม่มีการเปิดใช้กฎดังนั้นโดยการเพิ่มกฎด้วยตนเองคุณจะรู้ว่าจะมีการบังคับใช้ใดและคุณสามารถเข้าใจแต่ละกฎที่คุณเพิ่มได้ เริ่มต้นการกำหนดค่าการคัดลอก-ปาสต์ตัดสินใจว่าจะใช้ตัวเลือกใดและเลือกลบ
โชคดีที่คุณไม่จำเป็นต้องเขียนการกำหนดค่า Stylelint ขนาดใหญ่ซ้ำแล้วซ้ำอีก คุณสามารถเลือกสไตล์ที่คุณชอบและสามารถใช้งานได้ทุกที่
วิธีที่ง่ายที่สุดในการเรียกใช้ Stylelint?
สำหรับคนส่วนใหญ่วิธีที่ง่ายที่สุดคือผ่านบรรทัดคำสั่ง
หากคุณต้องการปลั๊กอิน Gulp คุณสามารถใช้ Gulp-Stylelint สำหรับ WebPack มีความเป็นไปได้มากมายสำหรับการเลือก เราหวังว่าปลั๊กอินเหล่านี้จะเป็นแรงบันดาลใจให้คุณสร้างปลั๊กอิน Stylelint อื่น ๆ เช่นปลั๊กอินสำหรับเสียงฮึดฮัด (คุณสามารถค้นหาในโครงการโอเพ่นซอร์ส!)
นอกจากนี้คุณยังสามารถเรียกใช้ Stylelint โดยใช้ปลั๊กอิน postcss รวมถึงสิ่งที่รวมอยู่ในปลั๊กอิน ซึ่งหมายความว่าคุณสามารถใช้ Stylelint ได้ทุกที่ที่คุณสามารถใช้ postcss (ซึ่งครอบคลุมเกือบทุกเครื่องมือรวบรวม)!
นอกจากนี้ยังมีปลั๊กอินการรวบรวมข้อความ Stylelint สำหรับอะตอมข้อความประเสริฐ VS รหัสเพื่อให้ข้อเสนอแนะที่เร็วที่สุด สำหรับข้อมูลเพิ่มเติมโปรดดูรายการเครื่องมือเสริมบนเว็บไซต์ Stylelint
ดังที่แสดงด้านล่างบนบรรทัดคำสั่งผลลัพธ์ที่คุณคาดหวังว่าจะเห็น:
แสดงดังนี้ในอะตอม;
Stylelint สามารถแก้ไขข้อผิดพลาดของฉันได้หรือไม่?
ไม่ แต่อีกอันที่เรียกว่า Stylefmt ได้รับการออกแบบมาเพื่อทำสิ่งนี้ มันต้องใช้การกำหนดค่า Stylelint - คล้ายกับสิ่งที่คุณใช้ในการตัดหญ้า - และสามารถแก้ไขข้อผิดพลาดใด ๆ ได้ เราหวังว่าในขณะที่เจ้าหน้าที่ชุมชนมีส่วนร่วม Stylelint สามารถพัฒนาเพื่อแก้ไขข้อผิดพลาดโดยอัตโนมัติที่ละเมิดกฎ Stylelint โปรดช่วยให้พวกเขาบรรลุเป้าหมายนี้!
นอกจากนี้คุณยังสามารถใช้เครื่องมืออื่น ๆ เช่น CSSCOMB หรือ PerfectList ที่ใช้ร่วมกับ Stylelint เพื่อแก้ไขโดยอัตโนมัติและบังคับให้พักผ่อนโดยอัตโนมัติ
ใช้ผ้าสำลีเพื่อเสริมข้อ จำกัด
มีข้อ จำกัด มากมายใน CS ที่ดี นั่นเป็นเหตุผลที่เราใช้เวลาพูดคุยกันหลายวิธีเช่น SMACSS, ACSS, BEM, Suitcss, ITCSS ฯลฯ เราทุกคนรู้ว่าการเขียน CSS ที่ไม่ดีนั้นง่ายมากดังนั้นหากเราไม่กลัวการเขียนสไตล์ CSS อีกต่อไป
เป้าหมายของ Stylelint คือการดำเนินการโดยอัตโนมัติ - จัดทำชุดกฎหลักและกรอบการทำงานที่สามารถทำได้ที่ผู้เขียน CSS สามารถใช้เพื่อดำเนินการตามกลยุทธ์ของตนเอง
ลองมาลองและแจ้งให้เราทราบวิธีการรับใช้คุณ หากคุณมีแนวคิดการปรับปรุงที่ดีขึ้นเช่นกฎการมีส่วนร่วมการปรับปรุงการทดสอบแก้ไขข้อบกพร่องไฟล์ความคิดใหม่หรือเพียงข้อเสนอแนะโปรดส่งข้อความถึงเรา! ด้วยวิธีนี้นักพัฒนาทั้งหมดของเราทุกระดับมีงานต้องทำ