เครื่องมือ CSS 5 อันดับแรกสำหรับนักพัฒนาเว็บและนักออกแบบ

CSS มาไกลแล้ว แต่การใช้เครื่องมือรอบตัวมันยังไม่มาจนถึงตอนนี้.


หากคุณรู้สึกว่าการเขียน CSS เป็นเหมือนการต่อสู้กับสัตว์ประหลาดในบ่อน้ำมันคุณไม่ได้โดดเดี่ยว ในขณะที่ CSS เป็นหนึ่งในเทคโนโลยีพื้นฐานที่สุดที่ให้พลังงานแก่เว็บ แต่ภาษาการเขียนโปรแกรมหรือกรอบการทำงานไม่เหมาะสม ผลก็คือทันทีที่โครงการของคุณเริ่มมีชื่อเสียงมากขึ้นระเบียบก็จะเกิดขึ้นกฎระเบียบของตัวเลือกดูเหมือนจะอยู่ทั่วทุกที่และมันก็ยากที่จะหาว่าอะไรอยู่ที่ไหน เมื่อคุณใส่ฟอนต์, CSS ภายนอก, JS, และเนื้อหาอื่น ๆ บนหน้าเว็บของคุณขนาดสุดท้ายของบันเดิลดูเหมือนจะขยายออกไปจากมือและคุณสงสัยว่าอุดมคติของ Front-End ที่ใช้งานง่ายและรวดเร็วนั้นหายไปไหน.

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

รถไฟ CSS กำลังจะมา! ไปกันเถอะ! ����

PostCSS

หากคุณรัก JavaScript คุณจะต้องชอบไอเดียที่เราสามารถเพิ่มและควบคุม CSS ผ่าน JavaScript ได้ และนั่นคือความสามารถที่แน่นอน PostCSS ให้.

อย่างไรก็ตามไม่ใช่เพียงแค่ซินแท็กซ์ไวยากรณ์ที่ใช้ JavaScript ผ่าน CSS PostCSS รวมแพ็คเกจ / ฟีเจอร์ที่ทรงพลังหลายอย่างเข้าด้วยกันส่งผลให้เวิร์กโฟลว์น่าพึงพอใจและง่ายขึ้นเมื่อจัดการกับ CSS ตัวอย่างเช่น

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

ฉันคิดว่าฉันจะไม่ทำเรื่องความยุติธรรมกับ PostCSS ถ้าฉันไม่ได้รวมตัวอย่างกริด ดังนั้นเราไปกันเลย บางอย่างเรียบง่ายอย่างนี้:

div {
คอลัมน์ที่หายไป: 1/3
}

รับการแปลงเป็นระบบ CSS เต็มรูปแบบที่มีกรณีขอบเกือบทั้งหมดได้รับการดูแล:

div {
ความกว้าง: Calc (99.9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-child (1n) {
ลอย: ซ้าย;
มาร์จิ้นขวา: 30px;
ชัดเจน: ไม่มี;
}
div: ลูกคนสุดท้าย {
ระยะขอบขวา: 0;
}
div: nth-child (3n) {
ระยะขอบขวา: 0;
ลอย: ขวา;
}
div: nth-child (3n + 1) {
ชัดเจน: ทั้งสอง;
}

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

PurgeCSS

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

สำหรับผู้ที่อาจไม่ทราบว่าเรื่องใหญ่คือ: นี่คือบทสรุปอย่างรวดเร็ว เมื่อคุณสร้างแอปพลิเคชันหน้าเดียวโดยใช้เฟรมเวิร์กส่วนหน้าเช่น React, Angular, Vue เป็นต้นคุณจะต้องผ่านสิ่งที่เรียกว่า “กระบวนการสร้าง” โดยพื้นฐานแล้วคุณเขียนโค้ด CSS, JS, SASS และอื่น ๆ ทั้งหมดของคุณเป็นไฟล์แยกต่างหาก (จัดระเบียบไฟล์ตามที่คุณพบว่าใช้งานง่ายที่สุด) แต่เมื่อคุณทำเสร็จแล้วคุณจะต้องบอกให้ผู้สร้าง “สร้าง” สิ่งนั้น สิ่งนี้ทำคืออ่านซอร์สโค้ดทั้งหมดที่คุณเขียนใช้ตัวกรองต่าง ๆ (minification, obfuscation / uglification, ฯลฯ ) และแยกเอาท์พุทออกเป็นไฟล์เดียวโดยปกติ“ app.js” สำหรับ JavaScript ทั้งหมดและ “ app.css” สำหรับ CSS ทั้งหมด ไฟล์เหล่านี้พร้อมด้วย“ index.html” ที่ผอมเป็นสิ่งที่คุณต้องใช้ในการเรียกใช้ส่วนหน้าของแอปพลิเคชัน ข้อเสียคือเนื่องจากทุกสิ่งรวมอยู่ในไฟล์สุดท้ายเหล่านี้ขนาดของไฟล์จึงมักขยายเกินกว่าที่อนุญาตให้ใช้เวลาตอบสนองที่รวดเร็ว ตัวอย่างเช่นไม่ใช่เรื่องแปลกที่จะเห็น“ app.js” ที่มีขนาดเกิน 500 KB!

PurgeCSS ได้รับการเพิ่มเป็นส่วนหนึ่งของเวิร์กโฟลว์การสร้างของคุณและป้องกันไม่ให้ CSS ที่ไม่ได้ใช้รวมอยู่ในผลลัพธ์สุดท้าย กรณีการใช้งานทั่วไปคือ Bootstrap: เป็นไลบรารีขนาดกลางที่มีคลาส UI หลายรายการสำหรับส่วนประกอบที่แตกต่างกัน หากแอปพลิเคชันของคุณใช้บอกว่า 10% ของคลาส Bootstrap ส่วนที่เหลือ 90% เป็นเพียงไฟล์เดียวในไฟล์ CSS สุดท้ายของคุณ แต่ด้วย PurgeCSS ไฟล์ CSS ที่ไม่ได้ใช้ดังกล่าวสามารถระบุและป้องกันจากกระบวนการบิลด์ทำให้ไฟล์ CSS สุดท้ายมีขนาดเล็กลงมาก (การลดขนาด 5-6 เท่าเป็นเรื่องปกติ).

ดังนั้นไปข้างหน้า “กำจัด” CSS ที่ไม่จำเป็นด้วย PurgeCSS! ��

องศาเซลเซียส

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

ชื่อผู้ใช้

รหัสผ่าน

กรุณาเลือกรหัสผ่าน.

เข้าสู่ระบบ


ลืมรหัสผ่าน?

© 2019 Acme Corp. สงวนลิขสิทธิ์.

“ นี่เป็นเรื่องตลกหรืออะไรนะ! สิ่งเล็ก ๆ ที่น่ารำคาญเหล่านั้นคืออะไร? เมื่อตรวจสอบอย่างใกล้ชิดทำไมฉันถึงกำหนดระยะขอบช่องว่างภายในและสีพร้อมกับ HTML โดยตรง นี่คือปี 2019 หรือเปล่า”

ความคิดเช่นนี้ถูกคาดหวัง ฉันรู้เพราะฉันรู้สึกเหมือนเดิมและปิดฝาใน Tailwind ทันที มันเป็นเพียงจนกระทั่งในภายหลังว่าฉันเจอพอดแคสต์ที่ผู้เข้าพักได้ตกแต่งเว็บไซต์ที่ทันสมัยและมีขนาดเหมาะสมใน Tailwind ที่ฉันเริ่มให้ความสนใจ.

ก่อนที่เราจะก้าวต่อไปให้พิจารณาคำถามต่อไปนี้:

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

หากคำตอบของสิ่งเหล่านี้คือ“ ใช่” คุณต้อง Tailwind ไม่ดี ทีนี้มาดูกันว่า Tailwind คืออะไรและทำอะไรบ้าง.

Tailwind เป็นสิ่งที่เรียกว่า CSS แรกของยูทิลิตี้ซึ่งแตกต่างจากสิ่งที่เราทำในเวิร์กโฟลว์ประจำวันของเรา: semantic CSS ความแตกต่างระหว่าง semantic CSS และยูทิลิตี้ CSS คือเดิมพยายามจัดกลุ่มองค์ประกอบสไตล์ด้วยชื่อของส่วนภาพที่ปรากฏบนหน้า ดังนั้นหากคุณมีเมนูนำทางการ์ดม้าหมุน ฯลฯ บนหน้าเว็บวิธีที่มีความหมายของการทำสิ่งต่าง ๆ คือการจัดกลุ่มกฎสไตล์ CSS ภายใต้คลาสเช่น. nav, .card, .carousel เป็นต้นซึ่ง ส่วนย่อยของพวกเขามีข้อความกำกับตาม (เช่น. card-body, .card-footer เป็นต้น) นี่เป็นวิธีที่ใช้กันทั่วไปมากที่สุดสำหรับ CSS และเราทุกคนคุ้นเคยกับมันผ่านเฟรมเวิร์กเช่น Bootstrap, Foundation, Bulma, UI Kit และอื่น ๆ.

ในทางกลับกันรูปแบบ “ยูทิลิตี้” ในการเขียนคลาส CSS ชื่ออย่างแม่นยำตามฟังก์ชั่นของพวกเขา: คลาสที่ควบคุมระยะขอบสำหรับด้านบนและด้านล่างจะถูกตั้งชื่อเป็น. Margin-y-Medium และสามารถใช้ได้ทุกที่ใน HTML มาร์กอัปที่ต้องการมาร์จิ้นนี้ ในขณะนี้จะแนะนำชื่อคลาสค่อนข้างคืบคลาน (แค่ดูรหัสที่ฉันแชร์ไว้ก่อนหน้านี้หรือที่สกรีน – คลาสจำนวนมาก!) เจตนาของ CSS นั้นชัดเจน: คุณไม่จำเป็นต้องกระโดด ไปมาระหว่างเอกสาร, CSS และ HTML ของคุณเพื่อหาชื่อที่ถูกต้องและผลที่ถูกต้อง.

มันเป็นวิธีการทำงานที่เปิดเสรีอย่างมาก แต่ก็มีสิ่งที่จับต้องได้เช่นกัน: คุณต้องมีพื้นฐาน CSS ของคุณอย่างถูกต้อง (รวมถึงแนวคิดที่ทันสมัยเช่น Flexbox) นั่นเป็นเพราะ Tailwind ไม่มีสไตล์ที่ไม่มีใครเหมือนในกล่องสำหรับส่วนประกอบใด ๆ ในหน้าของคุณและมันก็ขึ้นอยู่กับคุณที่จะสร้างสไตล์จากการสร้างบล็อค ปัญหาอีกประการหนึ่งคือการตั้งค่า: Tailwind ช่วยให้คุณสามารถจัดกลุ่มคลาส CSS หลาย ๆ คลาสเข้าด้วยกันในสิ่งที่เรียกว่าส่วนประกอบ แต่ทำได้ผ่าน JavaScript และต้องใช้ตัวโหลดโมดูลและตัวจัดการเช่น Webpack.

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

Saas

แม้ว่า Sass มีมานานแล้วฉันรวมไว้ที่นี่เพราะนักพัฒนายังไม่ทราบว่ามีประโยชน์อย่างไร Stylistically Awesome Style Sheets (หรือ SASS) เป็นชุดของ CSS ที่พัฒนาขึ้นเพื่อเชื่องความบ้าคลั่งของครีพในโครงการเมื่อ CSS เติบโตเกินกว่าสองสามบรรทัด.

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

เมื่อเราเขียน HTML เราซ้อนองค์ประกอบภายในองค์ประกอบอื่น ๆ แต่เมื่อเขียน CSS เราจะต้องเขียนลำดับขั้นของกฎแบบแบนซึ่งทำให้ยากที่จิตใจจะ“ พอดี” CSS ลงบน HTML ด้วย Sass คุณสามารถเลียนแบบโครงสร้างหน้าภายในไฟล์สไตล์ของคุณ:

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

CSS Linters

เนื่องจากนักออกแบบเว็บไซต์ (และนักพัฒนา UI – แม้ว่าฉันสงสัยว่าทั้งสองคำนี้แตกต่างกันอย่างไร use) ใช้เครื่องมือแก้ไขข้อความอย่างง่าย – หรือในกรณีนี้รหัสตรงจากเครื่องมือ dev ของ Chrome – พวกเขาไม่ค่อยได้ยินหรือได้รับประโยชน์จาก linter ในทางกลับกันโปรแกรมเมอร์ผู้ใช้โปรแกรมแก้ไขข้อความที่ดีเช่น VS Code, Sublime Text หรือ IDE อื่น ๆ รู้ว่าเครื่องมือนี้ดีมากเนื่องจากเป็นสิ่งที่สองสำหรับพวกเขา อย่างไรก็ตามประเด็นคือถ้าคุณเป็นหนึ่งในนักพัฒนา CSS ที่จมน้ำตายใน CSS ที่ยุ่งเหยิงคุณจะได้รับประโยชน์จาก linter.

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

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

ข้อสรุป

ตอนนี้ฉันแน่ใจแล้วว่าคุณเชื่อมั่นว่าการพัฒนา CSS ที่ทันสมัยนั้นเป็นหนทางไกลจากแนวทางของแมวในอดีต ��

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map