Skip to content

CodingThailand's Blog

by โค้ชเอก

Menu
  • About Me
Menu

12 ข้อแนะนำการเขียน CSS ที่ดีสำหรับมือใหม่

Posted on 14/05/2016 by โค้ชเอก

1. ไม่เขียนคำสั่งให้ซ้ำซ้อน ควรแยกคำสั่งให้อ่านง่ายในแต่ละบรรทัด

2. เขียนและตั้งชื่อให้สื่อความหมาย เช่น การตั้งชื่อคลาสต่างๆให้ดูแล้วรู้เลยว่าเอาไว้ทำอะไร

3. ใช้การ Reset CSS เพราะ reset css จะช่วยลดความไม่เข้ากันของแต่ละ Browsers ได้

4. ในไฟล์ css ควรออกแบบจากบนลงล่างให้สอดคล้องกับโครงสร้างหน้าเว็บที่เป็น HTML

5. ควรรวม หรือจัดกลุ่ม elements html ที่มีค่าเหมือนๆกันไว้ด้วยกัน เช่น

h1,h2,h3 {
font-size: 20px;
color: red;
}

6. ควรออกแบบและเขียนโครงสร้าง HTML ก่อน ค่อยสร้างไฟล์ CSS ทีหลัง

7. ใช้ DOCTYPE ของเอกสาร HTML ให้ถูกต้อง เช่น HTML5 จะเป็น

<!DOCTYPE html>

8. ควรใช้การเขียนแบบ Shorthand เพื่อให้โค้ดสั้นลง
เช่น

margin: 8px 7px 0px 5px;

9. ใส่ comment หรือหมายเหตุด้วย เพื่อตัวเราเองหรือคนอื่นมาพัฒนาต่อจะได้เข้าใจได้ง่าย

10. ใช้ CSS compressors เพื่อช่วยลดขนาดไฟล์ให้น้อยลง ทำให้โหลดได้เร็วขึ้น

11. ถ้าอยากจัดกึ่งกลางให้ layouts ควรใช้

"margin: 0 auto;"

12. ลองใช้ CSS Framework เพื่อลดระยะเวลาพัฒนา จะได้เอาเวลาไปคิดไอเดียอื่น

Category: CSS

ใส่ความเห็น ยกเลิกการตอบ

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • .NET
  • Android
  • Angular
  • Angular 2
  • Coding
  • CSS
  • Database
  • Editor
  • Flutter
  • Git
  • HTML5
  • Ionic 2
  • Ionic 4
  • Ionic Framwork
  • JavaScript
  • Laravel
  • Laravel 5
  • Node.js
  • PHP
  • PHP 7
  • Plugins
  • React
  • React Native
  • Template
  • Tools
  • TypeScript
  • UI
  • Uncategorized
  • Vue.js
  • XAMPP
  • Yii
  • คอร์สเรียน
  • แรงบันดาลใจ
  • กุมภาพันธ์ 2026
  • มกราคม 2026
  • ธันวาคม 2025
  • กรกฎาคม 2025
  • เมษายน 2025
  • พฤศจิกายน 2024
  • ตุลาคม 2024
  • เมษายน 2020
  • กุมภาพันธ์ 2020
  • สิงหาคม 2019
  • กันยายน 2018
  • สิงหาคม 2018
  • กุมภาพันธ์ 2018
  • พฤศจิกายน 2017
  • ตุลาคม 2017
  • สิงหาคม 2017
  • กรกฎาคม 2017
  • เมษายน 2017
  • ตุลาคม 2016
  • สิงหาคม 2016
  • พฤษภาคม 2016

.NET android Angular Angular 2 Atom Coding Coding Standard CSS CSS 3 Datepicker extensions Git HTML HTML5 Ionic2 JavaScript Laravel5 laravel 5.5 MariaDB Material Design MySQL Node.js npm PHP PHP7 plugins PouchDB recaptcha Restful sail.js template typescript typscript XAMPP Yii2

© 2026 CodingThailand's Blog | Powered by Minimalist Blog WordPress Theme