7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

CSS Berorientasi Objek: Apa, Bagaimana, dan Mengapa

Scroll to top
Read Time: 18 mins

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Kedengarannya seperti sebuah oxymoron, atau setidaknya ketidakmungkinan, bukan? Bagaimana bahasa statis yang lebih mirip markup daripada pemrograman berorientasi objek? Dalam tutorial ini, saya akan memperkenalkan ide CSS berorientasi objek, menunjukkan kepada Anda cara kerjanya, dan mencoba meyakinkan Anda bahwa Anda harus menggunakannya juga!


Apa itu CSS Berorientasi Objek?

CSS berorientasi objek, pada intinya, hanya menulis lebih bersih, DRY CSS. Ini bukan bahasa yang berbeda: CSS lama masih sama yang kita semua tahu dan cintai. Itu hanya perubahan paradigma. Sungguh, CSS berorientasi objek adalah beberapa pola sederhana dan praktik terbaik.

Jadi mengapa disebut berorientasi objek? Menurut Wikipedia,

Pemrograman berorientasi objek (OOP) adalah paradigma pemrograman yang menggunakan "objek" - struktur data yang terdiri dari bidang data dan metode - dan interaksinya untuk merancang aplikasi dan program komputer.

Jika kami menulis ulang definisi itu untuk CSS berorientasi objek, itu mungkin akan sesuatu seperti ini:

CSS berorientasi objek adalah paradigma pengkodean yang menata "objek" atau "modul" - potongan HTML yang dapat didefinisikan yang menentukan bagian dari halaman web - dengan gaya yang kuat dan dapat digunakan kembali.

Ini pada dasarnya berarti bahwa Anda memiliki "objek" standar (struktur HTML). Kemudian, Anda memiliki kelas CSS yang Anda terapkan ke objek, yang menentukan desain dan aliran objek.

Bingung? Mari kita lihat sedikit teori.


Apa Teori di balik ini?

Nicole Sullivan's PresentationNicole Sullivan's PresentationNicole Sullivan's Presentation

Ada dua prinsip utama [dalam CSS berorientasi objek]: yang pertama adalah memisahkan struktur dari kulit dan yang kedua adalah memisahkan wadah dari konten.

Saya mengutip Nicole Sullivan, yang gagasannya berorientasi objek CSS. Jadi, bagaimana kedua prinsip ini memainkan perannya sendiri?

Memisahkan struktur dari kulit berarti gaya tata letak Anda dan gaya desain Anda terpisah. Salah satu cara yang sangat praktis untuk melakukan ini adalah dengan menggunakan sistem grid; ada banyak opsi, atau Anda dapat membuatnya sendiri. Jika Anda tidak menggunakan sistem grid, Anda mungkin hanya akan menentukan struktur pada objek utama pada halaman Anda; itulah yang akan kita lakukan hari ini.

Memisahkan wadah dari konten berarti bahwa objek apa pun (wadah) harus dapat menyesuaikan diri untuk menerima konten apa pun; misalnya, seharusnya tidak perlu memiliki h3 di bagian atas, diikuti oleh daftar tidak berurutan agar dapat terlihat benar. Ini memungkinkan fleksibilitas dan dapat digunakan kembali, yang terpenting.


Mengapa Saya Harus membuat Kode Dengan Cara Ini?

Ada beberapa alasan bagus mengapa Anda ingin menulis CSS dengan cara yang berorientasi objek. Salah satu manfaat terbesar — ​​dan kami telah menyebutkannya — adalah bahwa CSS Anda akan lebih dapat digunakan kembali. Tetapi stylesheet Anda juga harus menjadi lebih kecil. CSS berorientasi objek harus memudahkan untuk mengubah desain situs.

Menulis gaya Anda dengan cara ini juga dapat memberi Anda ketenangan pikiran: akan jauh lebih mudah untuk mengubah bagian situs Anda tanpa merusak ha-hal lainnya. CSS berorientasi objek juga memungkinkan Anda untuk mengubah situs Anda secara konsisten.


Bagaimana cara mempraktikkan CSS yang berorientasi objek?

Nah, jika Anda sudah sejauh ini, Anda tertarik pada bagaimana tepatnya Anda menulis CSS dengan pola pikir berorientasi objek. Kita mulai!

Langkah pertama adalah persiapan untuk CSS: Anda harus menentukan objek HTML Anda. Secara umum, objek Anda akan memiliki header, body, dan footer, meskipun header dan footer adalah opsional. Ini objek yang sangat mendasar.

Sebelum Anda berteriak "DIVITIS!" sadari bahwa ini tidak seburuk kelihatannya; pertimbangkan ini:

Menggunakan HTML5, kami sekarang telah mendapatkan objek dengan makna semantik dan tanpa karakteristik seperti sup. Sebenarnya, ini adalah objek yang akan kita gunakan hari ini.

Jika kita akan menulis beberapa CSS, kita perlu sesuatu untuk ditata, jadi mari kita buat templat yang sangat mendasar: halaman utama blog, dan satu halaman posting. Kami akan menggunakan beberapa elemen HTML5 dan beberapa styling CSS3 hari ini!

index.htm

Saya tahu ini agak panjang, jadi inilah diagram struktur dasar kami:

layoutlayoutlayout

Terlihat familiar? Itulah objek kami, dengan tambahan yang ditambahkan untuk bilah sisi kami. Kami akan melihat halaman postingan ini sedikit kemudian, tapi mari kita masuk ke beberapa CSS sekarang!

Anda akan melihat bahwa kami menautkan ke tiga stylesheet: reset.css, text.css, dan styles.css. Reset.css adalah pengaturan ulang Eric Meyer. Text.css itu penting: langkah kedua CSS berorientasi objek adalah menata beberapa kunci elemen dasar; biasanya, ini adalah elemen teks, seperti header dan daftar. Mendesain objek-objek ini penting karena menentukan tampilan dan nuansa situs yang konsisten; elemen-elemen ini, sebagian besar, tidak akan menerima styling langsung tambahan apa pun.

Inilah yang kami dapatkan di text.css kami:

(Angkat ke Sistem Grid 960, yang file text.css-nya dipisah.)

Sekarang kita akan mulai membangun styles.css; disinilah keajaiban berorientasi objek dimulai. Namun, pertama-tama saya hanya akan melemparkan beberapa gaya tingkat atas, hanya untuk mengatur latar belakang body dan beberapa gaya tautan dan list.

Urutan bisnis pertama kami adalah menentukan struktur laman:

Perhatikan bahwa kami menata objek kontainer kami dengan memulai semua selector kami dengan #container. Namun, itu kasus khusus: biasanya, Anda akan ingin menggunakan kelas, karena mereka dapat digunakan kembali secara bebas.

Kita dapat menggunakan selector kelas untuk gaya postingan kita:

Mari kita lihat apa yang membuat ini berorientasi objek CSS. Pertama, kami belum membatasi kelas untuk elemen tertentu; kita bisa menambahkannya ke apa saja. Ini memberi kita fleksibilitas sebanyak mungkin. Kemudian, perhatikan bahwa kami belum menetapkan tinggi atau lebar; itu adalah bagian dari pemisahan struktur dari kulit; kami sudah menulis styling struktir, jadi objek ini akan mengisi ruang apa pun yang diberikan struktur.

Selain itu, kami telah menata semua elemen yang terlibat secara independen: elemen induk tidak mengharuskan anak-anak tertentu untuk terlihat bagus; Meskipun kami menata gaya anak, tidak ada yang akan pecah jika mereka tidak ada. Dan elemen anak, untuk sebagian besar, tidak bergantung pada orang tua mereka; Saya belum menata h2 dalam objek posting, karena harus konsisten di seluruh situs; kami sudah menangani itu di text.css.

Ada bagian penting lainnya, bagian yang paling disukai pemrograman berorientasi objek: kelas yang bisa diperluas. Anda mungkin melihat bahwa kami memiliki gaya untuk .post img dan .post.ext img. Saya yakin Anda tahu apa yang akan mereka lakukan, tetapi inilah buktinya:

postextpostextpostext

Cukup dengan menambahkan kelas lain ke objek Anda, Anda dapat mengubah bagian kecil dari tampilan dan nuansa; Saya harus menyebutkan bahwa Nicole Sullivan akan menciptakan kelas yang disebut .postExt, dan kemudian menerapkan keduanya pada objek; Saya lebih suka melakukannya dengan cara ini, karena memungkinkan saya untuk menggunakan nama kelas yang sama ("ext") untuk semua ekstensi saya, dan saya pikir itu membuat HTML terlihat lebih bersih. Anda hanya harus ingat untuk tidak memberi tempat pada selctor; ".post .ext" akan mencari elemen di kelas ext di dalam elemen di posting kelas. Tanpa ruang, itu akan mencari elemen di kedua kelas.


Pada Sidebar

Sekarang kita memiliki area konten utama yang ditetapkan, mari kita lihat sidebar. Kami punya dua objek di sidebar: list arsip dan list komentar terbaru. Untuk memulai, kami akan membuat kelas .side-box untuk mereka:

Sekali lagi, Anda harus perhatikan bahwa kami berhati-hati untuk mengikuti dua aturan: kami telah memisahkan struktur dari kulit dengan tidak mengatur tinggi atau lebar; objek mengalir untuk mengisi ruang apa pun yang perlu diambil. Dan kami telah memisahkan wadah dari konten dengan tidak membuat elemen anak diperlukan untuk gaya yang tepat. Ya, saya telah menyesuaikan gaya h3, yang membuat h3 tertentu terlihat tergantung pada kelas side-box; dalam banyak kasus, itu tidak diinginkan, tetapi dalam kasus ini, saya belum melakukan terlalu banyak.

sidebarsidebarsidebar

Tapi mari kita buat ekstensi untuk ini; namun, karena kami ingin melakukan penyesuaian visual yang besar, kami tidak akan memperluas kelas side-box secara langsung; kami akan membuat kelas baru.

Jadi apa fungsinya? Perhatikan selector: kami menargetkan setiap elemen langsung di dalam tubuh objek kami; saat menata objek, Anda selalu menerapkan kelas ke objek itu sendiri. CSS ini akan "pop" konten ke kanan.

"HEY, kamu tetapkan lebar! Bagaimana dengan memisahkan struture dari kulit?" Saya menetapkan lebar karena kami menargetkan elemen di dalam tubuh objek kami; karena objek memiliki padding, elemen dalam itu agak sempit dengan sendirinya. Itu terdengar seperti alasan untuk melanggar aturan, tapi saya tidak berpikir saya benar-benar melanggar aturan: Saya menetapkan lebar sebagai persentase, yang masih tergantung pada penataan struktur lebih lanjut ke kaskade.

Seperti apa hasilnya.

popoutpopoutpopout

Saya hanya mengatakan kepada Anda bahwa Anda harus selalu menerapkan kelas ke objek tingkat atas, dan menggunakan selector anak untuk membentuk elemen dalam. Tetapi bagian dari CSS berorientasi objek mampu mencampur dan mencocokkan gaya dengan mudah. Sangat mungkin Anda ingin menggunakan header yang sama pada dua objek yang tidak benar-benar terkait. Sangat ideal untuk memiliki koleksi kelas header dan footer yang Anda terapkan langsung ke header atau footer suatu objek. Dengan cara ini, Anda tidak menambahkan kode yang mirip ke beberapa kelas yang tidak terkait, tapi abstraksikan itu dan terapkan di tempat yang relevan. Mari kita buat header yang abstrak.

Anda akan melihat bahwa kami memberikan tajuk objek komentar terbaru kami dengan kelas yang disebut 'post-it.' Mari kita buat kelas itu sekarang.

postitpostitpostit

Kemiripan yang buruk dari sebuah catatan post-it!

Sangat penting untuk menekankan bahwa meskipun kami berencana untuk menggunakan ini untuk header, kami belum menentukannya di selector. Jika ini menyerupai aspek desain umum dari situs kami, kami mungkin akhirnya menginginkan gaya ini untuk sesuatu yang lain; misalnya, kita dapat memperluasnya dengan kelas yang mengatur warna dan rotasi, dan menggunakannya di dinding atau papan bulliten atau sesuatu yang serupa.

Jangan kunci selctor Anda; Anda tidak pernah tahu kapan Anda menginginkan gaya-gaya itu!

Seringkali Anda ingin mengambilnya lebih dari sekadar kelas header dan footer; perpustakaan komponen adalah bagian besar dari CSS berorientasi objek; aturan dasarnya mungkin seperti ini: kapan pun Anda ingin menerapkan gaya yang sama di banyak tempat yang tidak terkait, abstrak. Tentu saja, Anda mungkin menemukan setelah mengkodekan sesuatu menjadi objek yang akan lebih berguna jika Anda bisa menggunakannya di tempat lain; jangan takut untuk refactor. Itu selalu menguntungkan Anda.

Anda akan melihat komponen-komponen ini di header halaman dan kotak komentar terbaru.

Yah, kita sudah selesai dengan halaman index kami; mari kita lihat sedikit lebih berorientasi objek pada satu halaman posting. Cukup salin halaman index itu, ganti namanya menjadi 'post.htm' dan tukar header halaman dan bagian untuk kode ini.

Sekarang kita bisa melihat di mana beberapa usabilitas datang; kita dapat menggunakan kelas posting untuk posting blog di sini; itu adalah kelas postingan yang sama yang kami gunakan untuk beranda; karena kami tidak menentukan strukturnya, tetapi membiarkan objek meluas untuk menerima apa pun yang kami berikan, ia dapat menangani seluruh pos.


Komentar

Sekarang mari kita mengalihkan perhatian kita ke komentar di halaman ini; komentar adalah tempat yang bagus untuk menggunakan CSS berorientasi objek. Kami akan mulai dengan menambahkan ini:

Ini saja memberi kita beberapa komentar menarik psuedo; tetapi kita bisa berbuat lebih banyak. HTML kami memiliki kelas untuk balasan dan komentar penulis.

Pastikan Anda tidak memiliki spasi di antara kedua nama kelas. Ini sedikit berbeda dari apa yang kami lakukan sebelumnya: alih-alih mengubah gaya dari kelas komentar, kami sebenarnya memperluasnya (Jadi, mungkin ini adalah kelas yang diperluas yang nyata).

Dan komentar selesai. . .

commentscommentscomments

Dan sementara kita di sini, mari kita tambahkan formulir komentar ke pustaka komponen kami.

Ini memberi kita bentuk sudut bundar yang bagus dengan efek hover yang lembut.

commentsformcommentsformcommentsform

Aku agak terkoyak di sini; konsep dasar CSS berorientasi objek adalah kemampuan untuk menambahkan kelas ke elemen yang berbeda; tapi bagaimana dengan kasus ini? Kelas ini pada dasarnya tidak ada gunanya selain form; haruskah kita mengubah sekectir menjadi form.comments-form sebagai semacam keamanan? Apa yang kamu pikirkan?

Ya, itu benar-benar mencakup ide-ide CSS berorientasi objek.


Tinjau Langkah Utama

  1. Tentukan objek Anda.
  2. Setel ulang, elemen dasar, dan gaya objek dasar Anda.
  3. Terapkan kelas ke objek dan komponen untuk tampilan dan rasa yang diinginkan.

Saya tidak menggunakan contoh pesan standar, tapi itu benar-benar cara yang bagus untuk masuk ke CSS berorientasi objek. Coba buat kelas pesan yang dapat Anda terapkan ke berbagai elemen, seperti paragraf, item list, atau objek lengkap. Kemudian, perluas dengan kelas kesalahan, peringatan, dan info. Lihat bagaimana fleksibel dan dapat digunakan kembali yang Anda dapat membuatnya.


Apakah CSS Berorientasi Objek Selalu Bermanfaat?

Saya tidak berpikir jawaban untuk pertanyaan ini sederhana "ya" atau "tidak"; itu mungkin karena CSS berorientasi objek bukan bahasa, tetapi kumpulan pola dan praktik terbaik. Anda mungkin tidak selalu ingin menerapkan gagasan objek HTML standar, tetapi sebagian besar prinsip CSS selalu valid. Jika dipikir-pikir, Anda akan melihatnya benar-benar tentang di mana Anda ingin mengoptimalkan: Anda bisa mengkode HTML Anda secara minimalis, dengan beberapa id untuk pegangan, dan dapat memberi gaya dengan mudah; tetapi CSS tidak akan dapat digunakan kembali, dan situs mungkin akan rusak saat Anda mengubah sesuatu. Atau Anda bisa menulis sedikit lebih banyak HTML dan mengoptimalkan CSS dengan prinsip-prinsip yang telah kita lihat dalam tutorial ini.

Saya bersedia sedikit memperluas HTML saya sehingga saya dapat menulis CSS yang dapat digunakan kembali, fleksibel, dan DRY. Apa pendapatmu?


Sumber Daya Lainnya

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.