[CSS] เพิ่มความไวในการ Render หน้าเว็บด้วยการเขียน CSS ให้ถูกต้อง

สำหรับบทความนี้จะมาอธิบายการเขียน CSS ให้ถูกต้องเพื่อให้การเรนเดอร์หน้าเว็บนั่นไวขึ้น โดยปกติเราก็จะใช้การทำ minify css ลดขนาดกันอยู่แล้วซึ่งช่วยได้ในระดับนึง แต่ปัญหาจริงๆ อยู่ตรงไหน? ก็คือเราคนเขียนครับ บางคนรู้ว่าเขียน CSS ยังไงแต่ รู้ไหมว่ามันทำงานยังไง และ Selector ที่เขาพูดกันนั่นมันคืออะไรกันแน่

CSS เขียนให้ทำงานไวได้ด้วยหรอ?? คงเป็นคำถามของหลายๆ คน ปกติจากที่ผมผ่านจะมักเห็นคนเขียนหน้าเว็บแค่แสดงผลได้โดยไม่ได้สนใจว่าการเขียนนั่นถูกต้องแค่ไหน ไม่เคยวัดความไวหน้าเว็บกันละสิ?? ลองคิดง่ายๆ ทำไมเว็บใหญ่ๆ อย่าง Google,  Apple, Yahoo ทำไมเขาทำงานไวละ?? และสำหรับงานของ Front-end Developer หรือ Front-end Engineer ความไวจึงสำคัญมากถ้าระบบเราใหญ่ขึ้น ไม่เพียงเท่านั่นสมัยนี้ถ้าต้องการให้เว็บติดผลการค้นหาไม่แค่มีคอนเทนต์ดีๆ แต่ต้อง Responsive ได้ ต้องซัพพอร์ตการแสดงบน Device ขนาดเล็ก และอีกปัจจัยนึงที่ Google เจ้าแห่งการค้นหาต้องการคือความไว ลองเอาเว็บเราไปแปะในเว็บ PageSpeed ดูครับ Google เขาทำให้เราไว้ทดสอบ

 

Right is first, Left is last

CSS ทำงานแบบ Right to Left หมายความว่ายังไงมันจะอ่าน Rule selector ที่เราตั่งจากขวามาก่อนนั่นเองครับ เช่น

หลัการขวาไปซ้าย แสดงว่ามันจะไปอ่าน a[title=”home”] ก่อนแล้วไล่ไปจนถึง ul  ซึ่งทุกๆ คำสั่งที่เราเขียนจึงมีผลกับการเรนเดอร์มากๆ หลายๆ คำสั่งถ้าไม่จำเป็นอย่าใช้ได้ก็ดี อุ๊บไว้ก่อนเดียวมาต่อส่วนนี้ที่หลัง

 

CSS Rules in the front-end world

กฏการขียน CSS หรือการเขียน Selector นั่นมีอยู่ 4 แบบเท่านั่นบนงานของสาย Front-end คือ

  1. ID Rules
  2. Class Rules
  3. Tag Rules
  4. Universal Rules

 

Guidelines for efficient CSS

กฏข้อที่ 1

อย่าใช้ Universal rule ในการเขียน CSS ให้ใส่ style ไปตรงๆ ดีกว่า

 

กฏข้อที่ 2

อย่าใช้ ID Rule ร่วมกับ Tag rule หรือ Class rule สาเหตุก็เพราะว่า ID นั่นคือ unique ในตัวอยู่แล้ว การเอา Tag หรือ Class ใส่เข้าไปทำให้การอ่าน CSS ช้าลงไปครับ

BAD

Recommend 

 

กฏข้อที่ 3

อย่าใช้ Class rule ร่วมกับ Tag rule ตัว Class เองงนั่นจริงๆ ก็เป็น unique เหมือน ID นะครับ แต่มันดีกว่าที่ใช้ซ่ำในหน้าเว็บได้นั่นเอง

BAD

Recommend

การใช้ Class ร่วมกัน Tag นั่นในแง่การออกแบบระบบนั่นไม่ค่อยจะเหมาะสมเท่าไร เพราะมันทำให้ระบบไม่ยืดหยุ่น (flexibility) เช่น ถ้า ต้องการเพิ่ม span.title แบบว่าเราจะต้องเขียน CSS ขึ้นมาอีกชุด แทนที่เราจะจับ .title ลงใน <span class=”title” ></span> ได้เลย เพราะ .title มันผูกอยู่กับ <p></p> เป็นต้น

 

กฏข้อที่ 4

หลีกเลี่ยงการระบุ Category ลงไปในการ CSS

BAD

Recommend

 

กฏข้อที่ 5

อย่าใช้ descendant selector หรือ หลีกเลี่ยงพวก Child selector symbol การทำ descendant คือการเขียน Tag หรือ Class ไล่กันมาตั่งแต่ Parent จนมาถึง Tag หรือ Class  เป้าหมายของเรา ส่วน Child selector ก็พวก >, +, ~

BAD 

Recommend

โดยหลักการคราวๆ ก็เป็นประมาณนี้ครับ จริงๆ มีพวก Experiment ตามอินเทอร์เน็ตค่อนข้างเยอะยังไงก็ลองไปอ่านเพิ่มดูนะครับ แต่ถ้าอยากเขียน CSS ให้สวย ตั่งชื่อสวยๆ ลองอ่าน BEM แล้วเอาวิธีในบทความนี้ไปประยุกต์ใช้จะได้ทำให้ทั่งเว็บทำงานไว และการแก้ไขใช้งานง่ายไปอีกนะครับ หรือจะลอง SCSS, LESS ก็ลองไปทำกันดู และก็อย่าลืม minify code ด้วย เพื่อให้ได้ประสิทธิภาพสูงสุดครับ

Facebook Comments