วันอังคารที่ 23 มิถุนายน พ.ศ. 2558

Legacy CSS

เอาไงดีนะตอนนี้ซื้อ Theme  มาแล้ว แต่ก็อยากจะเปลี่ยนรูปร่างหน้าตาบางอย่างใน Theme เราในมันสวยงามตามที่เราหรือลูกค้าอยากได้จะทำไง

ส่วนใหญ่ที่เจอมาเรามันจะหยิบ Class ใน Css ของ Theme ออกมา Overide มันซะ ฮ่าๆ (หัวเราะดังมาก)
พอทำไปนานๆ มันก็จะบวมๆ บางทีอาจจะไม่เห็นภาพ ยกตัวอย่างเช่น

เรื่องสมมติ

บางคน(บางคนนะ บางคน) ใช้ Bootstrap เป็น Template  เวปไซท์แต่ลูกค้าบอกว่า อยากเปลี่ยน Design ของ popover เราก็จะ overide class popover ลงไปตรงๆ เลย WORK FINE!! มันก็โอเคนะไม่เห็นจะเป็นอะไรเลย พอทำไปนานๆ ลูกค้าบอกว่า ในหน้านี้ขอ popover อีกแบบนึง(เอาด่วน) คราวนี้ทำไงล่ะ ก็เอา id  มาผูกกับ popover นั้น 

#page2 .popover { }

มันก็ใช้นี่ WORK FINE !! (ฮ่าๆๆๆๆๆ) แล้วเราก็จะทำแบบนี้ไปเรื่อยๆ จนอ่าว popover เยอะไปหมดเลย ผูกกับอันนั้นอันนี้ไปหมดเลย บางครั้งลูกค้าก็ต้องปรับแก้ดีไซน์ เราก็ต้องกับไปแก้แต่ละอัน อีกนึงที่เสียไปคือ เราจะเสีย popover ของ template เก่าไปเลย เพราะเรา override ไปแล้ว

ทำไงดี?


อย่า Override ครับใช้การเพิ่ม feature หรือ Modified ของเราเข้าไป ถ้าคิดไม่ออกตั้งชื่อไงก็ไปอ่านเรื่อง BEM นะครับ ในโพสเก่าผมได้ครับ


ปล. พยายามอย่า !important  ใน CSS file ของเรานะครับ


วันเสาร์ที่ 6 มิถุนายน พ.ศ. 2558

ตั้งชื่อ Class อะไรดี

ตั้งชื่อ Class อะไรดี


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

มาใช้ BEM กัน


BEM คือ อะไร BEM วิธีการอย่างนึ่งในการตั้งชื่อ Class HTML และ CSS ถูกพัฒนาขึ้นโดยทีมที่ Yandex (ผมไม่รู้จักทีมนี้แหะ) จุดประสงค์ก็อยากให้คนอ่าน HTML และ CSS รู้เรื่อง เข้าใจว่า CSS นี้คืออะไรทำให้ใน HTML ได้

มาเริ่ม BEM กัน BEM ย่อมาจาก Block, Element, Modifier 

Block คือ Component นั่นแหละ ยกตัวอย่างเข่า .btn {}, .table{}, .nav{} เป็นต้น
Element คือ เป็น level ต่ำกว่า Block หรือ จักว่าเป็น ลูกก็ได้ เช่น .btn__price{}

<a class=“btn” href=“#”>
<span class=“btn__price”>1,000</span>
<span class=“btn__currency”>Bath</span>
</a>
Modifier คือ เป็น level ที่ไว้ปรับเปลี่ยน style ของ Block อีกที เช่นความสูง เปลี่ยนสี เปลี่ยนอนิเมชั่น เช่น .btn--red{}, .btn--big, .btn--bounce

เช่น 

<a class=“btn btn—-red” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>
</a>

<a class=“btn btn—-blue” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>
</a>

ถ้าเรามาอ่าน html เราจะเข้าใจได้ทันทีว่า class นี้ทำอะไร มีความสัมพันธุ์แบบไหน แล้วเราก็ใช้กระบวนการคิดน้อยลงอีก


เอาเป็นว่าการตั้งชื่อ Class ไม่มีถูกไม่มีผิด แต่เราต้องรู้ว่าไอ้ Class ที่เราตั้งนั่นน่ะเอาไปใช้ทำอะไร กลับมาอ่านเข้าใจไหม ถ้าใครสนใจวิธีการ BEM นี้ลองดูครับ