10 Prinsip Master CSS

Ketika datang ke CSS, ada banyak sumber daya dan seharusnya 'kiat ahli' di web. Ini berasal dari 'guru' yang tidak terbukti dan memproklamirkan diri, yang tidak memiliki kredibilitas di dunia desain. Meskipun mereka mungkin memiliki poin yang valid, bagaimana cara mengetahui apakah tip CSS adalah sumber yang valid atau hanya peretasan yang belum dicoba?

Alih-alih mengandalkan sumber yang tidak diketahui untuk meminta saran, mari kita lihat secara mendalam desainer yang memiliki latar belakang desain yang sangat baik dan telah berjalan. Tips CSS ini dikumpulkan dari beberapa desainer yang paling dihormati di planet ini. Mereka memiliki portofolio untuk mendukung saran mereka, sehingga anda akan tahu bahwa setiap saran baik adalah kualitas tertinggi.

Di bawah ini adalah 10 prinsip yang sangat baik yang dapat digunakan oleh developer atau desainer web mana pun, berguna, bermakna, atau menantang. Pertimbangkan nasihat bijak ini dari orang-orang yang bekerja harian (dan wanita) yang telah berjalan di jalan yang panjang dan keras dari keunggulan desain. Ini adalah master CSS yang sebenarnya. Minum dalam-dalam dari pengetahuan mereka dan ambil kebijaksanaan mereka pada petualangan design anda berikutnya.

1. Jaga CSS tetap sederhana - Peter-Paul Koch

Apa yang paling mengganggu saya tentang pola pikir para peretas CSS adalah bahwa mereka secara aktif mencari solusi yang rumit. Carilah dan kamu akan ditemukan, jika anda menginginkan kerumitan, itu akan membawa kamu ke tenggorokan. Itu tidak akan pernah melepaskan anda, dan itu juga tidak akan membantu anda.

Peter-Paul Koch adalah seorang godfather dari pengembangan web. Meskipun ia adalah pengembang jadul dan sebagian besar portofolio webnya antara tahun 1998-2002, ia bekerja dengan orang-orang seperti Apple dan kelas berat lainnya. Dia menulis sebuah buku tentang javascript, tetapi tidak terpikir sedetik pun, dia tidak memiliki sesuatu untuk dikatakan tentang CSS.

Bahaya hack CSS

Koch telah membahas sesuatu yang harus diikuti oleh setiap designer dan developer web: Buat CSS anda sederhana. Kesederhanaan adalah hal yang sulit dicapai, terutama dalam desain CSS. Ada banyak sekali peretasan CSS yang dapat ditemukan untuk membuat semua browser tampak sama, terlepas dari versi atau jenisnya. Namun ada kelemahan mendasar dengan menggunakan banyak peretasan CSS. Karena peramban web berevolusi, akan lebih sulit untuk mengikuti perubahan.

Koch membuat poin yang menarik tentang pengembangan untuk web. Internet secara keseluruhan adalah tempat yang sangat tidak terduga, dan mencoba menebak-nebak bagaimana cara kerjanya di masa depan adalah strategi yang sangat buruk.

Web adalah tempat yang tidak pasti. Anda tidak akan pernah yakin bahwa situs Web Anda akan berfungsi dengan cara yang anda inginkan, bahkan ketika anda menerapkan semua wawasan modern dari CSS, aksesibilitas, dan kegunaan. Alih-alih mencari kenyamanan palsu dalam peretasan yang tampaknya lebih nyaman karena kompleksitasnya, anda harus menerima ketidakpastian sebagai prinsip dasar.

Browser tidak memiliki dukungan CSS yang sempurna; terutama bagi orang-orang yang baru mulai belajar CSS, itu bisa menyebalkan. Namun demikian, peretasan CSS bukanlah solusinya. Penerimaan cara kerja Web saat ini adalah cara terbaik untuk pergi karena itu akan menjaga situs Anda tetap sederhana.

Peter-Paul telah menemukan sesuatu yang tidak hanya berlaku bagi CSS, tetapi juga untuk pengembangan web secara keseluruhan. Kesederhanaan adalah kunci untuk efisiensi dalam pengkodean.

2. Simpan deklarasi CSS dalam satu baris - Jonathan Snook

Jonathan Snook adalah desainer yang sangat populer dari Ottawa, Kanada yang membuat namanya dalam standar web dan desain. Dia berbicara di konferensi bergengsi seperti SXSW dan telah menerbitkan beberapa sumber daya teknis tentang desain melalui Sitepoint.

Salah satu Jonathan's tenants untuk pengkodean CSS adalah menyimpan deklarasi dalam satu baris.

Yang kedua mungkin terlihat lebih cantik tetapi tidak membantu saya menemukan apa pun. Ketika mencari sesuatu dalam style sheet, yang paling penting adalah ruleset (itu adalah bagian sebelum {and}). Saya mencari elemen, id atau kelas. Memiliki segalanya dalam satu baris membuat pemindaian dokumen menjadi lebih cepat karena anda hanya melihat lebih banyak pada suatu halaman. Setelah saya menemukan aturan yang saya cari, temukan properti yang saya inginkan biasanya cukup sederhana karena jarang ada yang banyak.

Jonathan melanjutkan dengan memberi contoh untuk deklarasi baris tunggal yang terlihat seperti ini:

Bagus

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Buruk

h2 {
font-size:18px;
border:1px solid blue;
color: #000;
background-color:#FFF;
}

Tidak hanya pendekatan ini membantu dengan cepat memindai CSS anda, ini juga membantu menjaga file CSS anda lebih kecil dengan membuang spasi dan karakter yang tidak diperlukan.

3. Gunakan singkatan CSS - Roger Johansson

Kebanyakan orang tahu tentang dan menggunakan beberapa istilah pendek, tetapi banyak yang tidak memanfaatkan properti penyimpanan ruang ini secara penuh.

Roger Johansson tahu satu atau dua hal tentang mendesain untuk web. Perancang web Swedia telah bekerja di Internet sejak tahun 1994, dan memiliki blog desain web yang populer. Ketika datang ke solusi yang sederhana dan elegan, Roger adalah salah satu yang paling berpengalaman di bidangnya.

Johansson memiliki artikel yang sangat mendalam tentang pentingnya singkatan CSS, dan memberikan beberapa contoh tentang cara menggunakannya saat mengkodekan CSS. Inilah contohnya:

Menggunakan singkatan untuk properti ini dapat menghemat banyak ruang. Misalnya, untuk menentukan margin yang berbeda untuk semua sisi kotak, anda dapat menggunakan ini:

margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;

Tapi ini jauh lebih efisien:

margin:1em 0 2em 0.5em;


Sintaks yang sama digunakan untuk properti padding.

Sementara CSS singkatan mengurangi ukuran stylesheet, itu juga membantu mengatur dan menjaga kode sederhana. CSS yang indah adalah CSS yang sederhana.

4. Biarkan elemen blok untuk mengisi ruang secara alami - Jonathan Snook

Tuan Snook memiliki saran penting lain yang harus dimiliki setiap pengembang web: memungkinkan elemen blok untuk mengisi ruang secara organik. Jika ada satu tema yang berulang dalam pengembangan CSS, itu tidak untuk memaksa kode melakukan hal-hal yang tidak dimaksudkan. Ini berarti menghindari pertasan CSS dan menemukan solusi paling sederhana yang mungkin.

Aturan saya adalah, jika saya mengatur lebar, saya tidak mengatur margin atau padding. Demikian juga, jika saya mengatur margin atau padding, saya tidak menetapkan lebar. Berurusan dengan model kotak bisa sangat menyebalkan, terutama jika anda berurusan dengan persentase. Oleh karena itu, saya mengatur lebar pada kontainer dan kemudian mengatur margin dan padding pada elemen-elemen di dalamnya. Semuanya biasanya berubah dengan sendirinya.

Aturan praktis Jonathan sangat bagus untuk memastikan bahwa layout anda tidak akan rusak dan pendekatan yang paling sederhana digunakan saat membuat layout dengan elemen pemblokiran.

5. Pasang pelampung untuk membersihkan pelampung - Trevor Davis

Floating mungkin adalah salah satu hal paling penting untuk dipahami dengan CSS, tetapi mengetahui cara menghapus pelampung juga diperlukan.

Trevor Davis mungkin tidak sebesar nama Zeldman atau Snook di dunia desain, dia pasti pantas disebut hanya berdasarkan portofolio layout webnya yang bagus. Blognya adalah sumber yang bagus untuk setiap pengembang web yang ingin memoles desain dagingnya.

Membersihkan float

Dalam artikel andalan Trevor The 6 Most Important CSS Techniques You Need To Know, ia menambahkan nugget yang dapat menghemat banyak sakit kepala saat menggunakan kolom dalam layout anda.

Saya telah membuat halaman sederhana dengan dua kolom mengambang di sebelah satu sama lain. Anda akan melihat pada contoh bahwa latar belakang abu-abu tidak mengandung kolom floating. Jadi, hal termudah untuk dilakukan adalah mengatur yang mengandung elemen ke float. Tetapi sekarang, anda akan melihat bahwa latar belakang penampung tidak berisi area konten.

Karena container memiliki margin: 0 otomatis, kita tidak ingin memfloatkanya karena akan memindahkannya ke sisi mana pun kita memfloatkanya. Jadi cara lain untuk membersihkan float, adalah memasukkan elemen clearing. Dalam hal ini, saya hanya menggunakan div set kosong untuk membersihkan: keduanya. Sekarang, ada cara lain untuk menghapus float tanpa markup, tetapi saya telah memperhatikan beberapa ketidakkonsistenan dengan teknik itu, jadi saya hanya mengorbankan div yang kosong.

6. Gunakan margin negatif - Dan Cederholm

Terkadang lebih mudah untuk menangani pengecualian terhadap aturan, daripada menambahkan deklarasi untuk semua elemen lain di sekitarnya.

Perusahaan Dan Cederholm, SimpleBits, adalah pusat perusahaan desain. Dan bekerja dengan orang-orang seperti:

• Google
• Blogger
• MTV
• Fast Company
• Inc.com

... dan banyak perusahaan web profil tinggi lainnya. Untungnya, Dan menyampaikan beberapa pengetahuan yang dia pelajari dengan bekerja dengan nama-nama besar di blognya di SimpleBits. Berikut aturan praktis bagi anda para designer dan developer web: Jika Dan Cederholm mengatakan apa pun, anda mendengarkan. Bayangkan dia sebagai sherpa digital, membimbing anda ke puncak gunung desain anda.

Margin negatif

Meskipun mungkin tampak berlawanan untuk menempatkan negatif di depan deklarasi apa pun (seperti margin-left: -5px), itu sebenarnya ide yang cukup bagus. Mr. Cedarholm menjelaskan bahwa menggunakan margin negatif pada elemen terkadang lebih mudah daripada harus mengubah setiap aspek lain dari desain untuk membuatnya sesuai dengan yang anda inginkan.

Ada situasi ketika menggunakan margin negatif pada elemen dapat menjadi cara termudah untuk 'menyenggol' keluar dari yang lain, memperlakukan pengecualian pada aturan untuk menyederhanakan kode.

Anda dapat melihat contoh penggunaan margin negatif yang tepat di sini.

7. Gunakan CSS untuk memusatkan layout - Dan Cederholm

'Bagaimana saya memusatkan layout lebar tetap menggunakan CSS?' Bagi mereka yang tahu, itu sederhana. Bagi mereka yang tidak, menemukan dua aturan yang diperlukan untuk menyelesaikan pekerjaan bisa membuat frustasi.

Tidak mengherankan bahwa Dan akan membuat daftar ini dua kali. Layout centered di permukaan ide yang sangat sederhana, tetapi untuk beberapa alasan mereka tidak selalu bekerja semudah diiklankan. Layout centering dengan CSS dapat menjadi usaha frustasi bagi pemula jika mereka belum pernah mencobanya sebelumnya.

Dan punya metode mencoba-dan-benar yang sering dia gunakan untuk mencapai surga centered-layout.

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Banyak desain modern yang mengandalkan centered layout, jadi menggunakan metode ini akan berguna bagi para developer web dan designer.

8. Gunakan DOCTYPE yang tepat - Jeffrey Zeldman

Anda telah menulis XHTML dan CSS yang valid. Anda telah menggunakan Model Objek Dokumen Standar W3C (DOM) untuk memanipulasi elemen halaman dinamis. Namun, di browser yang dirancang untuk mendukung standar ini, situs anda gagal. DOCTYPE yang salah mungkin akan disalahkan.

Jeffrey Zeldman adalah salah satu pendiri situs sumber yang luar biasa A List Apart, ikut mendirikan dan menjalankan The Web Standards Project, menjalankan studio desain Happy Cog, dan bahkan menulis buku tentang merancang untuk standar web. Singkatnya, Zeldman berada di eselon atas designer web.

Kesalahpahaman DOCTYPE

Halaman web DOCTYPE adalah salah satu aspek desain yang paling diabaikan. Menggunakan DOCTYPE yang tepat sangat penting, dan Zeldman menjelaskan alasannya.

Menggunakan DOCTYPE yang tidak lengkap atau usang - atau tidak ada DOCTYPE sama sekali - membuat browser yang sama ke mode 'Quirks', di mana browser menganggap anda telah menulis markup dan kode yang tidak valid dan usang sesuai dengan norma industri yang menyedihkan pada akhir 1990-an.

Zeldman menekankan pentingnya a) benar-benar menggunakan DOCTYPE, dan menunjukkan bahwa anda harus menambahkan url dalam deklarasi seperti:

Jika anda menemukan masalah yang tak terjelaskan dengan layout anda, kemungkinan besar DOCTYPE bisa menjadi masalah.

9. Item Pusat dengan CSS - Wolfgang Bartelme

Item pemusatan adalah tugas yang sering dilakukan saat merancang situs web. Tetapi bagi orang-orang yang baru mengenal CSS, sebagian besar jenis teka-teki adalah bagaimana memusatkan seluruh situs web di browser selain IE.

Wolfgang Bartelme adalah perancang web dengan Bartelme design, sebuah perusahaan desain web. Bartelme memiliki salah satu blog yang dirancang paling elegan, dan terus-menerus menciptakan ikon dan desain yang sangat baik. Dia melakukan pekerjaan desain untuk platform blog Squarespace, serta acara perangkat lunak populer MacHeist.

Wolfgang telah membuat tutorial yang membantu tugas yang rumit dari elemen yang berpusat dengan CSS. Elemen terpusat sangat bermanfaat, tetapi kadang-kadang sulit untuk mendapatkan desain. Tutorial Bartelme memastikan keterpaduan terpusat dengan memilih DOCTYPE yang tepat dan menambahkan CSS voodoo-nya. Kode tidak mewah dan menyelesaikan pekerjaan, dan langsung jatuh sejalan dengan upaya untuk kesederhanaan dalam CSS.

10. Memanfaatkan perintah text-transform - Trenton Moss

Trenton Moss tahu kegunaan web. Dia memiliki perusahaan web usability sendiri yang melatih orang dalam pelatihan usability dan menulis web. Dia juga menulis untuk situs seperti Sitepoint. Trenton memberikan tips yang sangat baik berdasarkan pengalamannya sebagai pakar web usability.

Ini adalah fakta sederhana bahwa desain berubah seiring waktu, terutama dalam cara teks ditampilkan di situs web. Hal terbaik yang dapat dilakukan oleh designer web adalah merencanakan masa depan untuk memastikan bahwa alih-alih harus secara manual mengubah cara teks ditampilkan, sebaiknya menggunakan CSS untuk mengubah tampilan teks. Trenton Moss menunjukkan kepada kita bagaimana mencapai hal ini melalui penggunaan perintah CSS sederhana yang kurang dimanfaatkan yang disebut text-transfom.

Salah satu perintah CSS yang kurang dikenal, tetapi sangat berguna adalah perintah text-transform. Tiga dari nilai yang lebih umum untuk aturan ini adalah: text-transform: huruf besar, teks-transformasi: huruf kecil dan teks-transformasi: huruf besar. Aturan pertama mengubah semua karakter menjadi huruf kapital, huruf kedua mengubah semuanya menjadi huruf kecil, dan huruf ketiga membuat huruf pertama dari setiap kata menjadi huruf kapital.

Dengan menggunakan CSS untuk menampilkan tampilan teks di situs, itu memungkinkan untuk perubahan di masa depan dan menjaga hal-hal yang konsisten dari waktu ke waktu.

Perintah ini sangat berguna untuk membantu memastikan konsistensi dalam gaya di seluruh Situs Web, terutama jika memiliki sejumlah editor konten. Katakanlah misalnya panduan gaya anda menentukan kata-kata dalam judul harus selalu dimulai dengan huruf besar. Untuk memastikan bahwa ini selalu terjadi, gunakan text-transform: capitalize. Bahkan jika editor situs melupakan kapitalisasi, kesalahan mereka tidak akan muncul di Situs Web.

Sementara text-transform adalah hal kecil untuk ditambahkan ke layout css, itu dapat membuat perbedaan dunia di masa depan ketika perubahan perlu dilakukan.

• Subscribe NETTUTS RSS Feed untuk lebih banyak tutorial dan artikel pengembangan web harian.

Glen Stansberry adalah pengembang web dan blogger yang telah berjuang lebih sering daripada ia ingin mengakui dengan CSS. Anda dapat membaca lebih tips tentang pengembangan web di blog-nya Web Jackalope.