Tutorial Cara Kelola CSS Z-Index – Bagi banyak pengembang, menyesuaikan nilai indeks-z adalah tugas yang sulit. Ini adalah kerangka kerja mikro yang mudah diimplementasikan berdasarkan konvensi yang ada, yang menghadirkan kejelasan dan keyakinan pada penggunaan indeks-z.

Tutorial Cara Kelola CSS Z-Index
Sumber Foto : awonapa.com

Beberapa artikel memperkenalkan z-index karena z-index terus menarik pengembang dari semua tingkat pengalaman. Menurut saya jumlah artikel tidak berarti tidak ada yang bisa menjelaskannya dengan baik, tetapi ada banyak pengembang di sana.Hanya karena satu pengembang membaca dan memahami artikel tersebut tidak berarti bahwa semua orang di tim sekarang Telah membaca dan memahaminya .

Meskipun meluangkan waktu untuk lebih memahami cara kerja indeks-z (atau teknologi apa pun) pasti akan membuat Anda menggunakannya dengan lebih baik, ada pendekatan lain yang dapat kami lakukan: mempermudah penggunaan indeks-z.

Kami menggunakan abstraksi dan konvensi untuk menyembunyikan bagian yang rumit dan rawan kesalahan, mempermudah semua orang yang perlu melakukan tugas yang sama. Saat mendesain ulang situs web perusahaan, saya memiliki kesempatan untuk mencoba membuat z-index lebih mudah untuk bekerja dengan tim.

Sistem yang saya rancang memungkinkan tim saya untuk mengimplementasikan seluruh UI tanpa harus mempertanyakan untuk apa nilai indeks-z tertentu digunakan, nomor mana yang digunakan saat menambahkan pernyataan indeks-z baru, atau cara mengatasi kesalahan penumpukan yang menyelinap ke dalamnya . sistem.

Solusi Umum

Sistem paling umum yang pernah saya lihat untuk mengelola nilai indeks-z-kecuali untuk tidak ada sistem-adalah menyetel beberapa nilai umum, setiap nilai dipisahkan oleh nomor sembarang. Solusi ini memang menyelesaikan masalah indeks-z, tetapi ketika saya bekerja dalam tim yang menggunakan sistem ini, saya sepertinya masih bingung tentang cara menggunakannya dengan benar. Ini adalah contoh dari javascriptoo tentang dokumentasi Bootstrap.

$zindex-dropdown:       1000;
$zindex-sticky:         1020;
$zindex-fixed:          1030;
$zindex-modal-backdrop: 1040;
$zindex-modal:          1050;
$zindex-popover:        1060;
$zindex-tooltip:        1070;

Bootstrap mendefinisikan nilai indeks-z dalam variabel Sass, seperti $zindex-dropdown, $zindex-sticky, dan $zindex-fixed. Nama-nama ini mungkin tampak sederhana, tetapi ketika pengembang memilih nilai untuk fitur yang mereka gunakan, mereka dapat bingung mengenai nilai mana yang terbaik untuk mereka gunakan. Mereka akhirnya bertanya: “Apakah itu” menu drop-down “atau” jendela pop-up “yang ingin saya terapkan? Ini sangat kontroversial, dan mungkin tidak ada jawaban yang jelas.

Masalah kedua yang saya lihat dalam solusi ini adalah bahwa nilai sebenarnya dari variabel tersebut tampaknya membingungkan atau tidak aman. Solusinya menyisakan ruang di antara setiap nilai untuk memberi pengembang ruang untuk menambahkan nilai mereka sendiri di antara mereka jika perlu. Bootstrap mendefinisikan tujuh nilai dengan kelipatan 10, mulai dari 1000 dan berakhir pada 1070.

Banyak pertanyaan yang mungkin muncul di benak Anda saat membaca artikel ini:

Baca Juga : 3 Kerangka Javascript Digunakan Pada 2021

Meskipun saya tidak pernah benar-benar membutuhkan pertanyaan “jika ini”, mereka dapat menambah rasa tidak aman dan kebingungan pada sistem yang tampaknya sudah ajaib dan disalahpahami. Bisakah kita menghilangkan semua masalah ini, sehingga pengembang dapat dengan mudah dan akurat memilih nilai indeks-z yang diinginkan?

Solusi Baru

Karena desain ulang memberi tim saya titik awal baru, ini adalah masalah umum yang ingin kami ketahui apakah kami dapat menghindarinya. Sesuai dengan standar pengkodean umum kami, tujuan saya dalam mengelola z-index adalah untuk menghindari angka ajaib dan memudahkan setiap anggota tim untuk berkontribusi dengan percaya diri. Tujuan kedua untuk membuat orang lain lebih mudah tidak jelas, jadi saya fokus untuk mencoba memecahkan masalah umum berikut:

  • Orang sering memilih nilai z-index yang terlalu besar;
  • Memperbaiki kesalahan indeks-z biasanya menghasilkan kesalahan indeks-z baru;
  • Hubungan antara nilai indeks z sulit dilacak.

Mari kita lihat solusi untuk setiap masalah yang dapat saya selesaikan. Solusi ini mengikuti konvensi dan menggunakan teknologi yang ada.

Berikan Semantik Dari Nilai Indeks-Z

Salah satu alasan orang sering memilih nilai indeks z yang besar secara sembarangan adalah karena mereka tidak mengetahui nilai indeks z dari produk yang mereka coba tempatkan untuk produk baru. Begitu mereka menemukan nilai tinggi yang sewenang-wenang yang dapat berhasil, mereka akan meninggalkannya alih-alih mencari nilai terbaik. Kemudian, ketika seseorang menemukan nilai ini, mereka tidak tahu mengapa itu terjadi, dan bahkan penulis aslinya mungkin telah melupakannya.

z-index: 9999;

Cara untuk memperbaiki “angka ajaib” adalah dengan menggunakan konstanta bernama. Meskipun nilai penamaan saja tidak memberi kita lebih banyak nilai daripada nama kelas, ketika kita menyatukan konstanta indeks-z, hubungan di antara keduanya mulai menjadi jelas.

Untuk menghapus angka ajaib, pertama-tama saya mulai mendefinisikan semua nilai indeks-z di file JavaScript. Karena aplikasi kami menggunakan solusi CSS-in-JS, saya menggunakan file JavaScript, meskipun ide dalam artikel ini dan dalam artikel ini dapat diterapkan melalui gaya preprosesor (seperti variabel Sass) dan CSS menggunakan atribut kustom Pikiran.

export const backdrop = 0;
export const openButton = 1;
export const dropdown = 2;

Dengan konstanta z-index, nilai CSS tidak memiliki banyak arti, dan nilai sebenarnya dikaburkan.

css`
z-index:
${backdrop};
`
;

Hal ini juga membuat nilai asli mudah ditemukan dan mengungkapkan konstanta yang relevan, tetapi dapat lebih ditingkatkan lagi. Kita tahu bahwa nilai-nilai ini terkait satu sama lain melalui cara kerja indeks-z, jadi kita dapat mengubah konstanta agar lebih jelas.

export const backdrop = 0;
export const openButton = backdrop + 1;
export const dropdown = openButton + 1;

Dengan menggunakan algoritma sederhana, kita dapat menggunakan konstanta sebelumnya untuk membuat konstanta berikutnya. Untuk menghilangkan ambiguitas lebih lanjut, saya mengambil langkah ini selangkah lebih maju dan saya menambahkan beberapa konstanta utilitas untuk membuat definisi ini lebih seperti kalimat.

const base = 0;
const above = 1;

export const backdrop = base;
export const openButton = above + backdrop;
export const dropdown = above + openButton;

Sekarang, ketika seseorang melihat baris seperti z-index: ${dropdown}; mereka dapat mencari definisi dari daftar drop-down, dan kemudian membaca: “Daftar drop-down ada di atas tombol buka.”

Ini membuatnya lebih mudah untuk mempertahankan konstanta di masa mendatang. Kapan pun Anda ingin menambahkan nilai baru, Anda dapat menambahkannya di tempat yang tepat.

export const backdrop = base;
export const openButton = above + backdrop;
export const dropdown = above + openButton;
export const closeButton = above + dropdown; // new

Juga mudah untuk menghapus nilai, tetapi Anda harus ingat untuk memperbarui nilai lain yang bergantung padanya. Lint menyoroti ini untuk saya menggunakan JavaScript.

Tiket bertumpuk biasanya menampilkan sesuatu seperti “Saat tombol harus berada di bawah, menu tarik-turun menimpa tombol”. Ketika masalah ini ditemui, perbaikannya semudah menukar penunjuk hubungan dalam definisi.

export const backdrop = base;
export const dropdown = above + backdrop;
export const openButton = above + dropdown;
export const closeButton = above + dropdown; // ???

Sekarang kami telah menukar urutan z-index, kami bahkan melihat potensi kesalahan lainnya sebelum memeriksa browser. Tombol tutup sekarang mungkin bertentangan dengan tombol buka. Sekarang, sebelum ada yang melihat masalah dalam produksi, Anda dapat memiliki dialog yang diperlukan untuk mengatasi kesalahan tersebut.

Hal lain yang menurut saya berguna dalam beberapa kasus adalah utilitas untuk menempatkan item below item lain. Untuk menghindari kebingungan antara above dan below, saya telah menetapkan aturan berikut, yang hanya boleh digunakan untuk nilai negatif.

const base = 0;
const above = 1;
const below = -1;

export const backdrop = below + dropdown;
export const dropdown = below + button;
export const button = base;

Anda juga dapat menghapus dan menambahkan nilai untuk menentukan bagaimana pengaruhnya terhadap elemen bertumpuk lainnya.

Setelah aplikasi kita berakhir dengan sekitar 12 konstanta indeks-z, meskipun daftarnya panjang, itu mulai menjadi sedikit berantakan.

Baca Juga : Cara Ubah Suara Menjadi Teks Dengan Javascript

Atur Dengan Menumpuk Konteks

Saat mempertimbangkan konteks tumpukan dan bagaimana nilai setiap konteks tumpukan tidak bergantung satu sama lain, ini terdengar seperti solusi front-end lain untuk cakupan yang efektif. Saya menggambar kesamaan dengan modul JavaScript, komponen, desain atom, dan BEM lainnya. Mereka semua mencoba memecahkan masalah yang serupa, yaitu bagaimana kita secara mandiri fokus pada masalah agar tidak mempengaruhi bidang lain.

Terinspirasi oleh BEM, saya mendefinisikan konvensi penamaan untuk konstanta untuk mengatur nilai dengan lebih baik dan menambahkan lebih banyak urutan ke daftar konstan. Format yang akhirnya saya gunakan memiliki template berikut: z<Context><Element>.

Mengingat kita telah mendefinisikan konstanta lain (seperti variabel warna) dalam file JavaScript, bagian z adalah awalan yang menunjukkan bahwa nilai tersebut harus digunakan dalam deklarasi z-index.

Bagian <Context> diganti dengan konteks tumpukan nama yang memiliki konstanta. Ini mirip dengan “blok” di BEM, pada kenyataannya, hampir selalu menggunakan nama yang sama dengan komponen yang akan diberi gaya. Pengecualian utama adalah konteks penumpukan HTML root yang digunakan untuk penumpukan area halaman.

Bagian terakhir dari format <Element> digunakan untuk nama item tertentu yang akan ditempatkan dalam konteks penumpukan, dan paling mirip dengan “elemen” di BEM.

Ini adalah contoh lengkap dari apa yang terlihat ketika konvensi penamaan ini :

HTML

<!--

Note: The relevant parts are in the JS tab.

–>
<div id=“root”></div>

CSS

/*

Note: The relevant parts are in the JS tab.

*/
:root {
/* https://systemfontstack.com/ */
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
font-size: 125%;
}

body {
margin: 0;
color: #131E30;
display: flex;
flex-direction: column;
}

p {
max-width: 70ch;
}

main {
padding: 0 2em;
}

Babel

/*
Hi! This was written as a live code example for an article written for Smashing Magazine. Please read the article when it is published! The link is coming soon.

*******************
*** POP QUIZ!!! ***
*******************

There is something in this demo that could be considered a UI bug relating to the z-index. When you open the “Open Stuff” menu, the gray backdrop doesn’t cover the yellow footer. Can you fix it by editing only the z-index constants?

Contents
1) Z-index values
2) Styles
3) Components and Render
4) Pop quiz Answer
5) Credits
*/

import React from “https://cdn.skypack.dev/react@17.0.1”;
import ReactDOM from “https://cdn.skypack.dev/react-dom@17.0.1”;
import styled, { css } from “https://cdn.skypack.dev/styled-components@5.2.1”;

/*
1) Z-index values

The definitions of all of the necessary z-index values.
*/

// Z-index values
const base = 0;
const above = 1; // use this for all values above the base
const below = -1; // and this for all values below the base

// Page Layout
const zLayoutNavigation = above + base;
const zLayoutFooter = above + base;
const zLayoutModal = above + zLayoutNavigation;
const zLayoutPopUpAd = above + zLayoutModal;

// NavMenu
const zNavMenuBackdrop = below + base;
const zNavMenuPopover = above + base;
const zNavMenuToggle = above + zNavMenuPopover;

/*
2) Styles

Most of this is unnecessary, but you can see in the template literals where the z-index values are used. */

// Color Constants
const colorDarkGray = ‘#131E30’;
const colorYellow = ‘#FDED00’;

const CSSCenterChild = css`
display: flex;
align-items: center;
justify-content: center;
position: fixed;
height: 100vh;
left: 0;
top: 0;
width: 100vw;
`;

const CSSBackdrop = css`
background-color: rgba(0, 0, 0, 0.75);

@supports (backdrop-filter: blur(5px)) {
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(3px);
}
`;

const Header = styled.header`
background-color: ${colorDarkGray};
display: flex;
color: #fff;
padding: 2rem;

& svg {
margin-right: 1rem;
}
`;

const Nav = styled.nav`
background-color: ${colorDarkGray};
color: #fff;
padding: 1rem 1.5rem;
position: sticky;
top: 0;
z-index: ${zLayoutNavigation};
`;

const Footer = styled.footer`
background-color: ${colorYellow};
bottom: 0;
padding: 1rem 2rem;
position: sticky;
z-index: ${zLayoutFooter};
`;

const ModalRoot = styled.div`
${CSSCenterChild}
${CSSBackdrop}
z-index: ${zLayoutModal};
`;

const PopUpRoot = styled.div`
${CSSCenterChild}
${CSSBackdrop}
z-index: ${zLayoutPopUpAd};
`;

const NavMenuToggle = styled.button`
border: 2px solid transparent;
border-bottom: none;
border-radius: 3px;
background: transparent;
color: #fff;
font-size: inherit;
padding: .25em .5em;
position: relative;
transition: background 100ms ease-out;
vertical-align: middle;
z-index: ${zNavMenuToggle};

&:hover {
background: ${colorYellow};
color: ${colorDarkGray};
}

&:hover > svg {
fill: ${colorDarkGray};
}

&[aria-expanded=”true”] {
border-color: #fff;
border-radius: 3px 3px 0 0;
}
`;

const NavMenuToggleCaret = styled.svg`
fill: ${colorYellow};
height: 1em;
margin-left: 0.25ch;
transform: translateY(-0.1em);
vertical-align: middle;
width: 1em;
`;

const NavMenuDropdown = styled.div`
background-color: #fff;
border: 2px solid ${colorDarkGray} 4px solid ${colorYellow};
border-radius: 0 3px 3px 3px;
color: ${colorDarkGray};
padding: 0.5rem 0;
position: absolute;
width: 300px;
z-index: ${zNavMenuPopover};
`;

const NavMenuItem = styled.button`
background: none;
border: none;
font-size: inherit;
padding: 0.5em 1rem;
text-align: left;
transition: background-color 100ms ease-out;
width: 100%;

&:hover {
background-color: ${colorYellow};
}
`;

const NavMenuBackdrop = styled.div`
${CSSBackdrop}
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: ${zNavMenuBackdrop};
`;

const Dialog = styled.div`
background-color: #fff;
border-radius: 3px;
/* Leave space for 15px of the close button */
max-width: calc(100vw – 40px);
padding: 1rem;
position: relative;
`;

const CornerCloseButtonBtn = styled.button`
background: none;
border: none;
outline: none;
padding: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
`;

/*
3) Components

This is mainly here to show something on the page and for you to be able to mess around.
*/

const NavMenu = ({ onOpenModalClick, onOpenPopUpClick, onOpenBothClick }) => {
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(prevIsOpen => !prevIsOpen);

const handleOpenModalClick = () => {
setIsOpen(false);
onOpenModalClick();
};
const handleOpenPopUpClick = () => {
setIsOpen(false);
onOpenPopUpClick();
};
const handleOpenBothClick = () => {
setIsOpen(false);
onOpenBothClick();
};

return (
<>
Open Stuff
{isOpen && (

Open Modal
Open Pop-up Ad
Open Both

)}
</>
);
};

const CornerCloseButton = ({ onClick }) => (

);

const Modal = ({ onDismiss }) => (

 

 

 

 

 

 

 

 

 

Here is the modal!!!

);

const PopUpAd = ({ onDismiss }) => (

 

 

 

 

 

 

 

 

 

Here is the pop up!!!

);

const Layout = () => {
const [isModalOpen, setIsModalOpen] = React.useState(false);
const [isPopUpOpen, setIsPopUpOpen] = React.useState(false);

const openModal = () => {
setIsModalOpen(true);
};
const openPopUp = () => {
setIsPopUpOpen(true);
};
const openBoth = () => {
openModal();
openPopUp();
};

return (
<>
{isPopUpOpen && setIsPopUpOpen(false)} />}
{isModalOpen && setIsModalOpen(false)} />}

Managing CSS Z-Index in Large Projects Demo

Filler text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit in orci quis consequat. Suspendisse facilisis faucibus aliquam. In rhoncus risus at tellus auctor, id faucibus erat pharetra. Nunc gravida in ligula non molestie. Donec scelerisque tellus vitae velit condimentum, nec volutpat libero fringilla. In ac nibh felis. Proin sit amet massa urna. Maecenas a nibh vitae nisi commodo gravida at sed ex. Ut mollis nisl vel eros suscipit fringilla. Vestibulum enim sem, eleifend ut est in, tincidunt dignissim nunc. Ut iaculis leo malesuada enim luctus aliquet. Pellentesque ex dui, rutrum vel lectus et, posuere consequat erat. Mauris non posuere ligula.

Sed eget lacinia tortor. Etiam id cursus sem. Aliquam sit amet nibh egestas, feugiat mauris nec, accumsan nulla. Nunc at orci sit amet leo imperdiet convallis. Integer vitae risus ex. Suspendisse potenti. Nullam dictum mi at ipsum efficitur bibendum. Praesent nisi sem, euismod at velit non, gravida vestibulum ligula.

Baca Juga : 6 Contoh Praktis Membangun Paralaks Websites

Ut dolor dui, interdum et urna ac, pretium suscipit eros. Ut mattis dui et lorem pretium, in interdum est fringilla. Morbi mollis consectetur est ut porttitor. Mauris a porttitor neque. Curabitur sagittis et ex ac rhoncus. Aliquam erat volutpat. Proin faucibus augue eros, at interdum metus tincidunt non. Curabitur ut nulla interdum urna pellentesque volutpat. Quisque aliquet lobortis nunc. Cras blandit ac felis sed blandit. Fusce pharetra diam sit amet lorem dictum interdum. Mauris ullamcorper neque eget ante elementum, sed mollis neque tempor. Fusce tincidunt, nibh ac bibendum aliquet, urna turpis vehicula lacus, in condimentum orci mauris id enim. Suspendisse et tortor tempus, condimentum ex sit amet, suscipit mauris. Nullam nulla neque, consectetur quis lacus sit amet, maximus accumsan est. Fusce ultrices libero id augue iaculis, sed feugiat odio condimentum.

Nam ac varius mauris. Mauris et pulvinar tellus. Mauris condimentum quis nunc ac semper. Cras nibh lacus, iaculis pulvinar rutrum id, bibendum a ipsum. Quisque ut viverra risus. Suspendisse efficitur sit amet massa sit amet efficitur. Aenean justo odio, ornare quis efficitur vitae, dictum at nisl. Suspendisse laoreet purus quis lacus cursus tincidunt. Duis eu auctor nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec vel dictum est.

This is the footer content.

</>
);
}

ReactDOM.render(
,
document.getElementById(‘root’)
);

/*
4) Quiz answer

The fix for the footer stacking issue can be made in the first couple of lines of the Z-index values section. They originally looked like this:

const zLayoutNavigation = above + base;
const zLayoutFooter = above + base;

The header and the footer both have the same value, and since the footer comes second in the document order, it is placed above all of the contents on the navigation. Since the “Open Stuff” menu is in the stacking context created by the of the navigation, it will never be able to be above the footer.

To fix this, you can set up the navigation to be above the footer like this:

const zLayoutFooter = above + base;
const zLayoutNavigation = above + zLayoutFooter;
*/

/*
5) Credits

All SVG icons were supplied by Font Awesome under CC BY 4.0 with color and fill alterations.
https://creativecommons.org/licenses/by/4.0/

Untuk versi bahasa lain, silakan periksa repositori.

// Utils
const base = 0;
const above = 1; // use this for all values above the base
const below = -1; // and this for all values below the base

// Page Layout
export const zLayoutNavigation = above + base;
export const zLayoutFooter = above + base;
export const zLayoutModal = above + zLayoutNavigation;
export const zLayoutPopUpAd = above + zLayoutModal;

// NavMenu
export const zNavMenuBackdrop = below + base;
export const zNavMenuPopover = above + base;
export const zNavMenuToggle = above + zNavMenuPopover;

Sekarang setelah konstanta kita diatur oleh konteks tumpukannya, kita dapat dengan cepat melihat nilai mana yang relevan dan di mana nilai baru atau revisi seharusnya.

Pengembangan Lebih Lanjut

Intinya, ini adalah norma cara kerjanya. Mengingat bahwa solusi tersebut dirancang dengan hanya satu aplikasi dalam pikiran, beberapa langkah lebih lanjut dapat diambil untuk membuatnya lebih matang dan mendukung lebih banyak kasus penggunaan. Beberapa dari ide-ide ini lebih spesifik tentang bagaimana bahasa tersebut diimplementasikan, tetapi kebanyakan ide akan berlanjut.

Konten yang disertakan dengan browser mungkin perlu ditingkatkan. Ketika saya mengimplementasikan fitur ini, kerangka kerja yang kami gunakan tidak memberi kami banyak kendali atas alat pembangunan, jadi semua file JavaScript yang ditentukan digabungkan dengan aplikasi. Ini tidak memiliki dampak kinerja yang dapat diukur pada aplikasi kita, tetapi Anda mungkin telah memperhatikan bahwa semua nilai dapat dihitung pada waktu kompilasi.

Implementasi menggunakan Sass pada akhirnya tidak akan mengirimkan variabel Sass ke klien, tetapi akan memasukkan nilai indeks-z turunan ke dalam CSS. Untuk solusi JS dan CSS, menggunakan alat build seperti Webpack dan PostCSS masing-masing dapat membantu menyelesaikan tugas ini.

Solusinya berkembang seiring dengan kemajuan pekerjaan saya, dan konstanta indeks-z pada akhirnya terkonsentrasi dalam satu file. Ini pada akhirnya adalah cara yang bagus untuk melihat semua nilai indeks-z di seluruh aplikasi sekaligus, yang membuatnya lebih mudah untuk menelusuri semua kemungkinan konflik penumpukan dengan cepat. Mereka juga dihilangkan bersama dengan konstanta gaya lainnya seperti warna dan tipografi, jadi masuk akal untuk mendefinisikan semuanya secara bersamaan pada awalnya.

Namun, seiring pertumbuhan file, file mulai diatur secara internal melalui konteks penumpukan, seperti dijelaskan di atas. Karena konteks tumpukan biasanya dipetakan ke komponen, ia mulai merasa bahwa setiap set konstanta dapat di-collocated dengan komponennya. Ini akan membawa semua manfaat konvensional dari penjajaran, mendekatkan mereka ke file yang menggunakannya, sehingga mengurangi gesekan saat Anda perlu menambahkan, mengedit, dan menghapus konstanta. Kami tidak pernah merefaktornya, tetapi ini tampaknya menjadi opsi yang layak.

Baca Juga : 11 Tools Ios Development Gratis

Yang lainnya terkait dengan ergonomi dan pengalaman pengembang. Saat ini, konstanta ini semuanya diekspor sebagai daftar datar. Konvensi penamaan terinspirasi oleh BEM, tetapi Sass dan JavaScript memungkinkan kita menggunakan cara lain untuk mengatur data. Peta Sass atau JavaScript Objects atau Maps dapat digunakan untuk mengatur nilai secara hierarki.

Jika kita memiliki semua nilai di objek z, itu mungkin menghasilkan pernyataan impor yang lebih pendek. Kita bisa melangkah lebih jauh dan memiliki sebuah objek di setiap konteks tumpukan dan mengarah ke gaya penggunaan yang lebih mirip z.layout.navigation. Alat yang berbeda seperti TypeScript dapat mencegah kesalahan ejaan di sini, meskipun ini mungkin lebih dari sekadar usaha.

Our Results

Sistem yang dijelaskan telah berhasil diterapkan dan diterapkan ke aplikasi produksi kami. Periksa target lagi, kita harus menyingkirkan angka ajaib. Sejauh menyangkut kemudahan dan kepercayaan pengembang, tim saya dapat dengan mudah menambahkan nilai indeks-z baru dan memperbaiki kesalahan pra-rilis dan pasca-rilis tanpa mengkhawatirkan perubahan yang menimbulkan kesalahan baru. Dalam banyak kasus, kami memperbaiki kesalahan sebelum mengirimkannya.

Kita juga dapat menghindari masalah<code>z-index: 9999;</code>. Meskipun aplikasi memiliki judul yang lengket, tombol tindakan mengambang, menu drop-down, mode, iklan pop-up, dan lainnya, nilai tertinggi yang kami dapatkan dalam konteks tumpukan adalah 5. Meski begitu, karena nilai-nilai ini disarikan, jadi Tidak ada yang tahu variabel dari kami.

Hal lain yang kami perhatikan adalah terkadang kami menetapkan z-index saat kami tidak membutuhkannya. Karena beberapa atribut berbeda dapat digunakan untuk membuat konteks tumpukan, diperlukan pernyataan seperti position: sticky; Ini dapat bekerja dengan cara yang mirip dengan pengaturan z-index: 1 ;. Dalam hal ini, kami akan terus menambahkan konstanta dan deklarasi.

Menjaga mereka memungkinkan konsistensi sistem yang lebih baik, daripada membiarkan situasi khusus terjadi, yang mengurangi kepercayaan orang apakah semuanya bekerja dengan baik. Menjaga daftar konstanta tetap utuh membantu untuk memahami sistem dan mengatur kami dengan lebih baik untuk mengatur ulang nilai bila perlu.