when naming bootstrap and bem have rscss

เมื่อการตั้งชื่อแบบ BOOTSTRAP และ BEM มีปัญหาก็ให้ RSCSS มาช่วยแก้

26 กรกฏาคม 2559 10:54 น.

เราจะไม่พูดย้อนไปถึงการตั้งชื่อของทั้งสองแบบ BOOTSTRAP และ BEM ว่ามันคืออะไร เพราะได้เคยอธิบายไว้แล้วในบทความก่อนหน้านี้สามารถตามหาอ่านกันได้ในหน้าบทความของเว็บเลย สำหรับงานนี้เราได้นำไอเดียของ Rico มาใช้ผู้ซึ่งเป็นเจ้าของแนวคิด RSCSS สำหรับการแก้ปัญหาการตั้งชื่อทั้งสองแบบที่กล่าวมานี้ มาดูภาพตัวอย่างของ RSCSS เป็นแบบภาพด้านล่างนี้เป็นมุมของ Component และ Element 

 

ปกติแล้วหลักของ RSCSS อันแรกจะต้องเป็น Component เป็นธรรมดานะ ซึ่งจะมองในส่วนของเว็บไซต์ว่ามี Component อะไรบ้าง ประกอบไปด้วยอะไร อย่าง Code ด้านล่างนี้ชื่อก็คือ .new-form

.news-form { /* Designil.com RSCSS */ }

         มาแยกย่อยกันต่ออย่าพึ่งมึน งง เพราะยังมีอะไรให้งงอีกเพียบเลยกับเรื่องของ CSS สังเกตว่าภายใน Component นั้นจะมีการแบ่ง Element เป็นหัวข้อต่าง ๆ ชัดเจนอย่างเช่น (title),ช่องกรอก (input),ปุ่ม (button) เป็นต้น ดูภาพด้านล่างประกอบตามไปด้วยนะ 

 

           เห็นกันแล้วใช่ไหมว่าการตั้งชื่อ RSCSS นั้นมันจะมีการแบ่ง Component ออกมาเป็น Element นั่นเองและแน่นอนว่าการตั้งชื่อ Class Element นั้นจะต้องเป็นคำเดียวเพียงเท่านั้น อะไรก็ได้เช่น .title, .input, .button, .heading. .field, .action etc. เป็นต้น และที่สำคัญคืออย่าให้ TAG HTML แบบที่ไม่มีการตั้งชื่อ Class เป็น Element เด็ดขาดแม้จะทำได้ก็ไม่ควร  เวลาที่จะเขียน CSS Selector ของ Element ถ้าจะให้ดีจะต้องเขียนแบบนี้ .component > .element แบบนี้มันจะทำให้ CSS ไม่ไปทำอะไรกับ Element ที่ชื่อเหมือนกันบน Class เดียวกันทางด้านใน ดูภาพด้านล่างประกอบ

.news-form > .title { /* Designil.com Code */ }
.news-form > .input { /* Designil.com Code */ }
.news-form > .button { /* Designil.com Code */ }

 

           แต่ถ้าหากว่าอยากจะให้มันมีความสวยงามมากกว่าเดิมจะใช้ SASS หรือจะเป็น LESS CSS เข้ามาเป็นตัวช่วยก็ได้นะ แต่ว่าในความเป็นจริงแล้วตัวของ RSCSS เองมันก็มีอะไรที่เป็นฟีเจอร์ซ้อนของ Selector(Nesting) อยู่แล้ว อยากจะใช้ก็ได้ความซับซ้อนนี้มันอาจจะทำให้ Code ไม่สวย SASS/LESS มันอาจจะช่วยให้อะไร ๆ น่ามองมากขึ้น ลองดูจากโค้ดด้านล่างนี้เป็นตัวอย่างได้เลย

.news-form {
> .title { /* Designil.com Code */ }
> .input { /* Designil.com Code */ }
> .button { /* Designil.com Code */ }
}

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

02-138-3515-6