CSS โพสต์โปรเซสเซอร์สำหรับเคล็ดลับและทรัพยากรเริ่มต้น

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

เครื่องมือที่ค่อนข้างใหม่เหล่านี้มีความคล้ายคลึงกันในแง่ที่พวกเขา ส่งผลกระทบต่อเวิร์กโฟลว์การพัฒนาเว็บ, อย่างไรก็ตามพวกเขาทำงานบน อีกด้านหนึ่งของการพัฒนา CSS (“เสา” การพัฒนา).

ในโพสต์นี้ฉันอยากจะแนะนำ พื้นฐานของการประมวลผลภายหลัง, มันทำงานอย่างไรทำไมคุณถึงใช้งานและแบ่งปันไลบรารี / เครื่องมือสองสามอย่างที่คุณสามารถใช้เพื่อเพิ่มเกม CSS ของคุณด้วยการโพสต์.

โพสต์กับการประมวลผลล่วงหน้า

การปฏิวัติการประมวลผลล่วงหน้า เกิดขึ้นเมื่อ Sass / LESS เข้าฉาก. เครื่องมือเหล่านี้ช่วยให้นักพัฒนาสามารถใช้ตัวแปรลูปฟังก์ชั่นและมิกซ์อินภายใน CSS สิ่งนี้เกือบจะทำให้การพัฒนา CSS พื้นฐาน คล้ายกับภาษาโปรแกรม ด้วยฟังก์ชั่นเพิ่มเติม.

การโพสต์ เกิดขึ้นหลังจากที่คุณผลิต CSS ธรรมดาและต้องการ ขยายเพิ่มเติม ผ่านระบบอัตโนมัติ ซึ่งอาจรวมถึง การขยายตัวเลือกคลาส, หรือ คำนำหน้าต่อท้ายอัตโนมัติ สำหรับคุณสมบัติ CSS บางอย่าง.

โดยทั่วไปการประมวลผลล่วงหน้ามี ภาษาสไตล์ชีทของตัวเอง, เช่น Sass และ LESS นั่น แปลงเป็น CSS บริสุทธิ์. โพสต์การประมวลผลใช้ CSS พื้นฐานนั้นและ ใช้ระบบอัตโนมัติ / การทำซ้ำ.

นี่คือคำพูดจากโพสต์ซึ่งเป็นแหล่งที่มาของภาพด้านบน ฉันคิดว่าผู้เขียน Stefan Baumgartner ผลรวมที่แตกต่างขึ้นอย่างยอดเยี่ยม.

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

แต่สิ่งนี้สามารถทำได้ใน Sass ด้วยส่วนขยาย. ดังนั้นจึงมีความแตกต่างจริง ๆ? นี่เป็นอีกคำพูดที่ยอดเยี่ยมจากโพสต์เดียวกัน:

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

ติดตั้งระบบประมวลผลภายหลังลงในเวิร์กโฟลว์ของคุณ

เกือบทุกคนอ้างอิง PostCSS เป็นทรัพยากรที่ชัดเจนสำหรับการประมวลผลภายหลัง อย่างไรก็ตามทีม PostCSS ได้ยอมรับอย่างเปิดเผยใน Twitter ถึง เปลี่ยนชื่อของพวกเขา เพราะการใช้คำฟุ่มเฟือยไม่สมเหตุสมผลอีกต่อไป.

PostCSS ไม่ได้เป็นเพียงเครื่องมือ pre-CSS หรือ post-CSS อีกต่อไป มันสามารถจริง ทำงานทั้งสองด้าน! เพิ่มเติมนี้อธิบายคำพูดจากก่อนหน้านี้ระบุว่าเครื่องมือ CSS ทั้งหมดต้มลงไปสิ่งหนึ่ง - การประมวลผล.

PostCSS ใช้ปลั๊กอิน JavaScript เพื่อ ทำให้เวิร์กโฟลว์ CSS ของคุณเป็นแบบอัตโนมัติ, และคุณยังสามารถเขียนปลั๊กอิน JS ของคุณเองเพื่อขยายไลบรารี PostCSS หากคุณต้องการเริ่มต้นกับ PostCSS ลองดูบทแนะนำเบื้องต้นนี้ใน Smashing Magazine หากคุณใช้งานและเข้าใจ Sass แล้วคุณจะสามารถรับ Post CSS ได้อย่างรวดเร็ว.

หากต้องการสร้างเวิร์กโฟลว์การประมวลผล CSS ล่วงหน้า / ก่อนโพสต์ของคุณเองให้เริ่มโดย ทำรายการจุดปวดของคุณ, เช่น:

• การไล่ระดับสี CSS อัตโนมัติล่วงหน้า
• การจัดระเบียบอัตโนมัติสำหรับกฎ CSS
• ผนวก polyfills สำหรับคุณสมบัติบางอย่าง
• สร้างขนาดภาพสำหรับภาพพื้นหลัง

โปรดทราบว่าสิ่งเหล่านี้สามารถทำได้ ทั้งก่อนและหลังการประมวลผล. สิ่งสำคัญที่ต้องตระหนักคือการประมวลผลก่อน / หลัง CSS นั้นผสานเข้าด้วยกันอย่างรวดเร็ว หนึ่งในสิ่งเดียวกัน.

แทนที่จะทำลายเป้าหมายของคุณในขั้นตอนต่าง ๆ ของการประมวลผลมันจะดีกว่า ทำรายการให้เป็นวัตถุประสงค์, จากนั้นไป ค้นหาเครื่องมือที่เหมาะสม.

สุดยอดเครื่องมือประมวลผล

ฉันพยายามหลีกเลี่ยงการกล่าวถึงส่วนขยายในส่วนนี้เนื่องจาก Sass & PostCSS มีหลายสิ่งให้เลือก สุจริตคุณสามารถ ได้รับเพียงห้องสมุดเหล่านั้น, แต่ฉันต้องการที่จะให้บางอย่าง ทางเลือกสำหรับการแก้ปัญหาที่เฉพาะเจาะจงมากขึ้น.

Pleeease

หากคุณทำงานกับ Node.js อยู่แล้ว Pleeease จะเป็นตัวเลือกที่ชัดเจน มันมีมากมาย คุณสมบัติการประมวลผล CSS ทั่วไป, เช่นการนำเข้าไฟล์ตัวแปร / ฟังก์ชั่นการย่อขนาดอัตโนมัติและการสนับสนุนทางเลือกสำหรับองค์ประกอบใหม่เช่น SVG.

เว็บไซต์นี้ยังมี สนามเด็กเล่นแบบโต้ตอบ สำหรับผู้ที่ต้องการลองใช้ห้องสมุดออนไลน์โดยไม่ต้องดาวน์โหลดสำเนาในเครื่อง.

ให้ศีลให้พร

ฉันจำได้เมื่อ Internet Explorer 6 ยังคงเป็นเรื่องน่ารำคาญและเป็นเรื่องดีที่รู้ว่าการพัฒนา IE ได้รับการปรับปรุง - แต่ไม่มาก ในขณะที่ฉันชอบที่จะบอกคุณว่าการใช้งาน IE นั้นหายไป แต่ก็ดูเหมือนจะไม่จริง.

โชคดีที่ Bless CSS เป็นโซลูชันที่ ตรวจจับปัญหาที่อาจเกี่ยวข้องกับ IE ใน CSS ของคุณและสร้างโซลูชันด้วยการประมวลผลภายหลัง มันทำงานบน Node.js ดังนั้นจึงเหมาะสมกับเวิร์กโฟลว์ NPM / Gulp ทั่วไป.

CSSNext

นี่คือห้องสมุดสุดเจ๋งที่ให้คุณได้ สร้าง CSS พร้อมฟังก์ชันการทำงานขั้นสูงเพิ่มเติม ไม่รองรับในปัจจุบัน ไลบรารี CSSNext ประกอบด้วย รองรับฟังก์ชั่น CSS4 คี่, เช่น สีเทา (), ที่มีอยู่ใน W3C ฉบับร่างในปัจจุบันเท่านั้น.

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

Stylecow

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

คุณสามารถดาวน์โหลด Stylecow จาก GitHub และมาพร้อมกับเอกสารรายละเอียดบางอย่างที่ไม่น่าเชื่อ.

-คำนำหน้าฟรี

สุดท้ายฉันต้องการแบ่งปัน -คำนำหน้าฟรี ไลบรารี่ที่เป็นเครื่องมืออันเป็นที่รักสำหรับการพัฒนา CSS ตามที่อนุญาตให้คุณ ใช้คุณสมบัติ CSS ที่ไม่มีการแก้ไข. ทุกคนต้องการใช้คุณสมบัติ CSS ที่ทันสมัยเช่นภาพเคลื่อนไหวและการไล่ระดับสี แต่ไม่มีใครต้องการคัดลอก / วางรหัส verbose ด้วยตนเอง.

ด้วยปลั๊กอินนี้คุณไม่จำเป็นต้องเรียกใช้ CSS ของคุณผ่าน postprocessor บนคอมพิวเตอร์ของคุณ นอกจากนี้ยังสามารถทำงานเป็นเบราว์เซอร์ที่รวมอยู่ในคอมพิวเตอร์ของผู้ใช้ อัปเดตไฟล์ CSS โดยอัตโนมัติ.

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

ห่อ

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

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

• สิ่งที่จะช่วยเราได้จากด้านมืดของตัวประมวลผลล่วงหน้า CSS?
• ดูการเขียน CSS ในอนาคตด้วย PostCSS และ cssnext
• การประมวลผลล่วงหน้าของ CSS (SASS หรือ LESS) กับ CSS หลังการประมวลผล