css shorthand

วิธีเขียน CSS แบบประหยัดเวลาด้วย Shorthand, One line เพื่อสะดวกและโหลดเร็วขึ้น

โดยปรกติการเขียน css เรามักจะเขียนเป็นลำดับขั้น เป็นชั้นๆลงไปเรื่อยๆ เพื่อให้สะดวก ง่าย ต่อการอ่านและเขียน วันนี้เรามาลองดูวิธีการเขียนแบบลดเวลาแต่ก็ยังสามารถทำความเข้าใจได้ไม่ยากกันดูบ้าง อย่างการเขียนแบบ Shorthand และแบบ One line property

css shorthand

css shorthand

ทำไมเราถึงควรที่จะประหยัดเวลาในการเขียน css เพราะว่านอกจากจะเป็นเรื่องของการ load file เวลามีการเรียกใช้งานแล้วเวลาที่เรา develop เองก็จะสะดวกและทำงานได้รวดเร็วขึ้นอีกด้วย มาลองดตัวอย่างกันครับ

เริ่มต้นด้วยการเขียน CSS แบบปรกติก่อนนะครับ เรามักจะเขียนในลักษณะแบบนี้

#footer {
clear: both;
height:  204px;
margin: 0 auto;
padding-top:  26px;
padding-right:  20px;
padding-bottom: 10px;
padding-left: 15px;
}

ทีนี้คุณจะเห็นได้ว่า ในส่วนของ padding มีการเรียกซ้ำอยู่ถึง 4 ครั้ง เพื่อให้สามารถวนรอบได้ทั้ง 4 ทิศ ทั้งที่เราสามารถลดเวลาลงไปได้ด้วยการเขียน shorthand ลงไปแบบนี้

#footer {
clear: both;
height:  204px;
margin: 0 auto;
padding-top: 26px 20px 10px 15px;
}

ซึ่งจะได้ค่าตรงกันกับที่เราเขียนในแบบแรก ส่วนใหญ่การเขียนแบบนี้จะมักใช้งานได้กับ padding และ margin เพราะว่ามีการระบุตำแหน่งรอบทิศทางพอดี ส่วนวิธีการเขียนนั้นให้เราสังเกตุือเวลาเขียนจะต้องทำการ วน ตามเข็มนาฬิกา คือค่าที่จะทำการวนต้องมาจาก บน, ขวา, ล่าง, ซ้าย ทุกครั้งเสมอ

ทีนี้เราอาจจะยังรู้สึกว่าอยากจะลดเวลาลงไปอีกหน่อย เราก็สามารถทำได้เพิ่มเติมด้วยการ วางทุกอย่างไว้ในบรรทัดเดียว แบบที่เรียกว่า One line Property

#footer {clear:both;height:204px;margin:0 auto;padding-top:26px 20px 10px 15px;}

ตามตัวอย่างนี้ จะเห็นว่าแม้เราจะจับทุกอย่างมาไว้ในบรรทัดเดียวหมด แต่มันก็ยังสามารถเข้าใจได้ ไม่ยากจนเกินไป

มาดูค่าพื้นฐานของการเรียงลำดับ property เพื่อการเขียนที่ถูกต้องกันนะครับ

สำหรับ Background

background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit

สำหรับ Border

border-top: [ border-width || border-style || border-color ] | inherit
border-right: [ border-width || border-style || border-color ] | inherit
border-bottom: [ border-width || border-style || border-color ] | inherit
border-left: [ border-width || border-style || border-color ] | inherit

หรือแบบกำหนดให้ 4 ด้าน

border: [ border-width || border-style || border-color ] | inherit

สำหรับ Font

font: [ font-style || font-variant || font-weight ] font-size [ / line-height ] font-family> ]

สำหรับ List

list-style: [ list-style-type || list-style-position || list-style-image ] | inherit

สำหรับใครที่อยากได้การเร่งความเร็วเรื่องที่เกี่ยวกับ css อีกนิด ผมมี Trick เล็กๆมาให้อีกหน่อยคือเรื่องของการโหลดไฟล์เข้ามาที่หน้าเพจ จากปรกติเราจะโหลดเข้ามาเป็น

<link rel="stylesheet" type="text/css" href="resource/animate.css">
<link rel="stylesheet" type="text/css" href="resource/bootstrap.css">
<link rel="stylesheet" type="text/css" href="resource/bootstrap-theme..css">
<link rel="stylesheet" type="text/css" href="resource/font-awesome..css">
<link rel="stylesheet" type="text/css" href="resource/fonts..css">
<link rel="stylesheet" type="text/css" href="resource/style.css">
<link rel="stylesheet" type="text/css" href="resource/theme.css">

วิธีการเขียนแบบนี้ทำใช้เวลาในการโหลดไปตามภาพครับ ใช้เวลาไป 437 ms  สำหรับหน้าเปล่าไม่มีอะไร

 

Load CSS

Load CSS

แต่พอผมเอาชื่อของไฟล์ทั้งหมดมาเรียงใหม่เป็นแบบนี้นะครับ

<link rel="stylesheet" type="text/css" href="resource/animate.css,bootstrap.css,bootstrap-theme.css,font-awesome.min.css,fonts.css,style.css,theme.css" />
Load CSS

Load CSS

เวลาที่ได้แม้จะเร็วกว่ากันไม่มากนัก แต่นึกถึงเวลาที่พัฒนาระบบใหญ่ๆหรือระบบที่มีคนเข้าใช้งานเยอะดูนะครับ

สุดท้ายผมแนบเอาไฟล์ Code Sheet Shorthand มาไว้ให้เป็นคู่มือด้วยนะครับ

Download :: css-cheat-sheet

 

 

 

 

Code Master Slider

Code Master Slider