সিএসএস এবং এসভিজিতে বিপুল পরিমাণে যাদুসংখ্যক গ্রহণযোগ্য কেন?


63

প্রায়শই বার আমি হট নেটওয়ার্ক প্রশ্নাবলি তালিকায় প্রশ্ন দেখতে এই মূলত জিজ্ঞাসা "কিভাবে আমি সিএসএস এই অবাধ আকৃতি আঁকা না"। উত্তরটি হ'ল আপাতদৃষ্টিতে এলোমেলো হার্ড-কোডেড মানগুলির অনুরোধের আকারটি তৈরি করে যা সিএসএস বা এসভিজি ডেটার কয়েকটি ব্লক।

আমি এই তাকান যখন, আমি মনে করি 'ইয়াক! কোডের কী কুৎসিত ব্লক। আমি আশা করি আমি আমার প্রজেক্টে এই ধরণের জিনিস কখনও দেখি না '। তবে, আমি এই ধরণের প্রশ্নোত্তরটি প্রায়শই ঘন ঘন এবং উচ্চ সংখ্যক উপকারের সাথে দেখি, তাই স্পষ্টভাবে সম্প্রদায়টি তাদের খারাপ বলে মনে করে না।

তবে কেন এটি গ্রহণযোগ্য? আমার ব্যাক-এন্ডের অভিজ্ঞতাটি আমার কাছে বোধগম্য নয়। তবে কেন এটি সিএসএস / এসভিজির জন্য ঠিক আছে?


38
অঙ্কন কী, যদি যাদু সংখ্যার এলোমেলো গুচ্ছ না হয় (2 (x, y) পয়েন্টের মধ্যে স্ট্রোকের কথা চিন্তা করুন বা পিক্সেলের অ্যারে ইত্যাদি) যা দেখতে সুন্দর লাগছে?

68
সিএসএসের কি ভেরিয়েবল রয়েছে? এসভিজি করে?
ওডে

36
এ কারণেই অনেক বড় প্রকল্পের SASS বা LESS এর মতো সিএসএস প্রিপ্রোসেসর রয়েছে যা ভেরিয়েবলগুলিকে সমর্থন করে।
Ixrec

2
@ ওএসএসের জন্য ওডে, ভেরিয়েবলের জন্য প্রায় 40% গ্লোবাল সমর্থন রয়েছে (সুতরাং, আপনি যদি আপনার সমস্ত মাইক্রোসফ্ট ভিজিটরকে স্বাগত জানাতে না চান তবে তা প্রস্তাবিত নয়)। মাইক্রোসফ্ট সম্ভবত এজতে প্রবণতা অনুসরণ করবে এবং মোবাইল ডিভাইসগুলি শেষ পর্যন্ত ধরা পড়বে। অন্যদিকে, এসভিজির কিছু স্বতঃসিদ্ধ খসড়া স্থিতি নথিতে ভেরিয়েবলের ধারণা রয়েছে তবে সেগুলি সম্ভবত কখনও প্রয়োগ করা হবে না।
ফায়ারফক্স

12
কেন? কারণ এগুলি ম্যাজিক সংখ্যা নয়। সিএসএস তথ্য ধারণ করে, এমন একটি প্রোগ্রামের বিপরীতে যা নির্দেশাবলী রাখে। যদিও সিএসএস যুক্তিযুক্তভাবে সম্পূর্ণরূপে টিউর করছে, এটি কোনও প্রোগ্রামিং ভাষা নয়।
ডেরেক 朕 會 23

উত্তর:


118

প্রথমত, ভেরিয়েবল বা ধ্রুবক ব্যবহার করে প্রোগ্রামিংয়ে ম্যাজিক মানগুলি এড়ানো হয়। সিএসএস ভেরিয়েবলগুলিকে সমর্থন করে না, সুতরাং যাদু মানগুলি ভ্রান্ত করা থাকলেও, আপনার কোনও পছন্দ নেই (এসএএসএস হিসাবে প্রিপ্রসেসর ব্যবহার ছাড়া, তবে আপনি এটি কোনও একক স্নিপেটের জন্য করবেন না)।

দ্বিতীয়ত, সিএসএসের মতো কোনও ডোমেন নির্দিষ্ট ভাষায় মানগুলি ম্যাজিকের মতো নাও হতে পারে। প্রোগ্রামিংয়ে ম্যাজিক নম্বর এমন একটি সংখ্যা যেখানে অর্থ বা উদ্দেশ্যটি স্পষ্ট হয় না। যদি একটি লাইন বলে:

x += 23;

আপনি জিজ্ঞাসা করবেন "কেন 23"? যুক্তি কী? একটি পরিবর্তনশীল উদ্দেশ্যটি স্পষ্ট করতে পারে:

x += defaultHttpTimeoutSeconds;

এটি কারণ একটি একক সংখ্যা সাধারণ উদ্দেশ্য কোডে একেবারে কিছু বোঝাতে পারে। তবে সিএসএস বিবেচনা করুন:

background-color: #ffffff;
font-size: 16px;

উচ্চতা এবং রঙটি যাদু নয়, কারণ প্রসঙ্গ থেকে অর্থটি পুরোপুরি পরিষ্কার। এবং স্পফিক মানটি বেছে নেওয়ার কারণটি সহজ কারণ ডিজাইনাররা ভেবেছিলেন এটি ভাল লাগবে। একটি ভেরিয়েবলের পরিচয় দেওয়া কোনও উপকারে আসবে না, যেহেতু আপনি কেবল " defaultBackgroundColor" এবং " defaultFontSize" এর মতো কিছু নাম রাখবেন ।


16
কিছু মানগুলি সত্যই কেবল চয়ন করা হয় কারণ "তারা দেখতে ভাল দেখাচ্ছে"। তবে ওপি সংযুক্ত উদাহরণটিতে বেশ কয়েকবার একই মান রয়েছে তবে এটি স্পষ্ট নয় যে তারা যদি একই জিনিসকে উপস্থাপন করে বা কেবল কাকতালীয়ভাবে একই মান রাখে। এছাড়াও এটি এমন একটি মান ব্যবহার করে 198pxযা অন্য কোনও কিছুর ( 200px) এবং আকারের 2pxসীমার পার্থক্য ।
কোডসইনচাউস

1
@ কোডসইনচাওস: হ্যাঁ, এমন কিছু ঘটনা রয়েছে যেখানে ভেরিয়েবলগুলি বা কোনওরকম নির্ভরতা প্রকাশগুলি দুর্দান্ত cool
জ্যাকবিবি

21
নোট করুন যে সিএসএস ভেরিয়েবলগুলি সমর্থন করে
ফিহাগ

28
চশমা সালে @phihag, হ্যাঁ, কিন্তু বন্য মধ্যে ঠিক বলছে এ, না, তাই অনেক (আমি 40% বিশ্বব্যাপী সমর্থন এই মন্তব্যকারীকে সময়ে বিবেচনা করা হয় না হিসাবে "ব্যাপকভাবে সমর্থিত"। যাইহোক, আপনি হয়ে গেছে, এ ভবিষ্যতে , আমরা সিএসএস ভেরিয়েবল থাকবে এবং আমি নতুন আজ কিছু শিখতে করেনি, যাতে জন্য
phyrfox

2
@ জ্যারেডস্মিথ তুলনামূলকভাবে বড় স্কেলযুক্ত ওয়েবপ্যাপের জন্য এটি দুর্দান্ত, তবে বিশাল পলিফিল সহ সাধারণ (সম্ভবত স্থির) পৃষ্ঠাগুলির জন্য ওভারকিল।
ডেরেক 朕 會 19

81

এটি গ্রহণযোগ্য কারণ এই ফর্ম্যাটগুলি কোড নয় , তবে ডেটা । আপনি যদি সমস্ত "ম্যাজিক নম্বর" সরিয়ে ফেলেন তবে আপনি প্রতিটি লেবেলটি মূলত নকল করে ফেলবেন এবং হাস্যকর চেহারাযুক্ত ফাইলগুলি শেষ করবেন:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

প্রতিবার যখন আপনাকে কিছু ডেটা পরিবর্তন করা দরকার তখন আপনাকে দুটি জায়গায় সন্ধান করা উচিত। মঞ্জুরিপ্রাপ্ত, এমন পরিস্থিতি রয়েছে যেখানে সদৃশতা এড়ানো ভাল, যেমন আপনার যদি এমন রঙ থাকে যা ঘন ঘন পুনরাবৃত্তি হয় এবং থিমগুলি পরিবর্তন করতে আপনি পরিবর্তন করতে পারেন। এই পরিস্থিতিগুলির সমাধান করার জন্য প্রিপ্রোসেসর এবং প্রস্তাবিত এক্সটেনশন রয়েছে তবে সাধারণভাবে, ডেটা ফর্ম্যাটে কাঠামোর সাথে সংখ্যার একসাথে থাকা বাঞ্ছনীয়।


22
+1 কারণ: "এটি গ্রহণযোগ্য কারণ এই ফর্ম্যাটগুলি কোড নয়, তবে ডেটা।"
পিটার বি

1
"অনুমোদিত, এমন পরিস্থিতি রয়েছে যেখানে অনুলিপি এড়ানো ভাল, যেমন আপনার যদি এমন রঙ থাকে যা ঘন ঘন পুনরাবৃত্তি হয় এবং থিমগুলি পরিবর্তন করতে আপনি পরিবর্তন করতে পারেন want" - সম্ভবত ক্লাসগুলির সাথে আরও ভালভাবে সম্পন্ন করা: .main_color { color: .. }এবং সেই ক্লাসটি ব্যবহার করা হ'ল
প্রতিলিপি

কোড যা কোনও অ্যাপ্লিকেশনটির চেহারা এবং অনুভূতি নির্ধারণ করে তা এখনও কোড এবং ডেটা নয়।
ESR

26

যাদু সংখ্যার উপর নিষেধাজ্ঞাই এই নকশা নীতিটির আদি সংস্করণ:

এক জায়গায় সিদ্ধান্ত নিন

তবে এগুলি ম্যাজিক সংখ্যা নয় । কমপক্ষে, আমি যতটা কোডিং স্টাইল গাইড জানি সে সম্পর্কে অবধি নয়।

প্রস্থ: 200px;
উচ্চতা: 200px;

তারা পরিষ্কারভাবে লেবেল করা হয়। অবশ্যই, সংখ্যাগুলি একই হতে পারে। তবে প্রস্থটি প্রস্থ এবং উচ্চতাটি দৈর্ঘ্য। তারা স্বতন্ত্রভাবে ডিজাইন করা হয়েছে।

এখন আপনি 5 বস্তু যা সব আছে যদি ছিল একই প্রস্থ আছে এবং প্রতিটি নিজেই তাদের প্রস্থ হার্ডকোডেড আমি তোমাদের দিয়ে মারধর করতো অপ্রত্যক্ষ্যতার লাঠি।

যদি তারা লেবেলযুক্ত থাকে তবে আমি তাদের যাদুর নম্বর বলব না, তবে আমি আপনাকে ইন্ডিয়ারেশন স্টিক দিয়ে মারব।


4
আপনার যদি ভেরিয়েবলের পর্যাপ্ত পরিমাণের প্রয়োজন হয় তবে আপনার কাছে নতুন ক্লাস তৈরির পর্যাপ্ত অবজেক্ট রয়েছে।
জেকেরট00

1
এটি সর্বোত্তম উত্তর, যেমন এটি পয়েন্টটি দেখায়: সেগুলি যাদু সংখ্যা নয়।
দ্য ব্লাস্টঅন

2
"5 টি অবজেক্টের যেগুলির সকলের একই প্রস্থ থাকতে হবে এবং প্রত্যেকে স্বতন্ত্রভাবে তাদের প্রস্থকে হার্ডকড করেছে আমি আপনাকে একটি লাঠি দিয়ে মারব।" ওয়েব ডিজাইনের মজাদার বিশ্বে আপনাকে স্বাগতম।
হোসাইম করুন

2
ম্যাজিক নম্বরগুলি কেবল "এক জায়গায় সিদ্ধান্ত নেওয়ার" (ওরফে ডিআরওয়াই) কারণেই সমস্যাযুক্ত নয়, কারণ এটি বোঝা শক্ত।
স্লেসকে

লাঠি দিয়ে মারার বিকল্প নেই?
djechlin

11

সিএসএস কোনও প্রোগ্রামিং ভাষা নয় বলে পরিবর্তে এটি কনফিগারেশন ফাইল যা আপনার প্রোগ্রামের ভেরিয়েবল ডেটা ধারণ করে।

বর্তমানে সিএসএস এত শক্তিশালী যে আপনি এটিতে প্রোগ্রাম করতে পারবেন , তবে এটি বিন্দু ছাড়াও। মূলত এটি এখনও একটি স্টাইলশিট ভাষা

এক কদম পিছনে নেওয়া যাক। কল্পনা করুন আমাদের একটি প্রোগ্রামিং ভাষা রয়েছে যা কোনও স্ক্রিনে আঁকতে পারে। কল্পনা করুন আমরা কোনও ওয়েব পৃষ্ঠা আঁকার জন্য এটি প্রোগ্রাম করতে চাই।

প্রথমে আমরা আমাদের কোডটিতে অনেকগুলি ম্যাজিক নম্বর লিখব। মার্জিন প্রস্থ, পাঠ্যের উচ্চতা, প্রবর্তন ইত্যাদি

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

সুতরাং আমরা যাদু নম্বরগুলি বের করে এনে আমাদের ফাইলের উপরে রাখি।

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

এখন এটি কিছুটা কুরুচিপূর্ণ। আমরা বরং কনফিগারেশন ফাইল থেকে আমাদের পরিবর্তনশীল নম্বরগুলি পড়ি।

margin 100
table 500
text size 12

মিম, এটি কিছুটা অস্পষ্ট ... এই সংখ্যাগুলির অর্থ কী? এই নামগুলির অর্থ কী? এর কিছুটা আনুষ্ঠানিকতা দিন।

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

তবে আপনি জানেন, আমরা আমাদের প্রোগ্রামটি কিছুটা প্রসারিত করতে চাই। আমরা এটিও চাই যে এটি একাধিক সারণী, টেবিলবিহীন পৃষ্ঠা, অনুচ্ছেদ বা বোতামের পৃষ্ঠা সহ আরও কী কী আঁকতে পারে। আসুন আমরা আমাদের কনফিগারেশন ফাইলটিতে নির্বাচকদের যুক্ত করব যাতে কোন অনুচ্ছেদে কোন বৃহত ফন্ট বা আলাদা পাঠ্যের রঙ থাকতে হবে তা উল্লেখ করতে পারি, সম্ভবত আমরা নেস্টেড উপাদানগুলিকে সমর্থন করতে পারি, সম্ভবত আমরা আমাদের কনফিগারেশন ফাইলে একটি সাধারণ সম্পত্তি ব্যবহার করতে পারি, এবং তারপরে নির্দিষ্টটি দিয়ে ওভাররাইড করতে পারি কয়েকটি নেস্টেড উপাদানগুলির মধ্যে একটি।


আপনি অনুভব করছেন এটি কোথায় চলছে, অবশেষে আপনি সিএসএস হিসাবে উপস্থিত হন। (এবং এটি সরবরাহ করার জন্য একটি ব্রাউজার))

এরপরে কি আমাদের কনফিগারেশন ফাইলটিতে দক্ষতা যুক্ত করা উচিত যাতে আমরা আবার যাদু সংখ্যাগুলি এড়াতে পারি? ভেরিয়েবল যুক্ত করবেন? আমাদের সিএসএস ফাইলের জন্য একটি কনফিগারেশন ফাইল যুক্ত করবেন? যদি আপনি মনে রাখবেন আমাদের সিএসএস ফাইল এটি একটি বিট অর্থহীন মনে হয় যে খুব একই কনফিগারেশন ফাইল আগে থেকেই।

তবে তা অবশ্যই সত্য নয়; আপনার সিএসএস ফাইলটি আরও বড় এবং বড় আকার ধারণ করে এবং শেষ পর্যন্ত আপনি একই যাতায়াত সংখ্যার সাথে একই সমস্যার মধ্যে দৌড়ান, একই সংখ্যার পুরো জায়গাতে পুনরাবৃত্তি হয়, কখনও কখনও একটি ছোট ট্রান্সফর্মেশন ইত্যাদি with

আধুনিক সিএসএস যদিও এই পুনরাবৃত্তি এড়াতে অনেক উপায়ে অনুমতি দেয়। আপনি অনেকগুলি উপাদানের জন্য প্রযোজ্য ক্লাসগুলি ব্যবহার করতে পারেন, আপনি সকলের জন্য স্টাইল নির্ধারণ করতে পারেন divতবে একটি নির্দিষ্টভাবে ওভাররাইড করতে পারেন এবং সিএসএস 3 এমনকি কিছু ধরণের পরিবর্তনশীল ব্যবহারের অনুমতি দেয়।

এর অর্থ এই নয় যে আপনার প্রতিটি সম্ভাব্য স্থানে সিএসএস ভেরিয়েবল ব্যবহার শুরু করা দরকার। যেখানে এটি বোধগম্য হয় সেখানে এটি ব্যবহার করুন এবং যেখানে আপনি সদৃশতা এড়ান বা যেখানে অন্যান্য কৌশলগুলি উপলব্ধ রয়েছে সেখানেও এটি ব্যবহার করুন।

শেষ পর্যন্ত, আপনি আপনার কনফিগারেশন ফাইলে খুব বেশি যাদু নম্বর চান না :-)


অপ্রয়োজনীয়তা কেন এটি বিবেচনা করে? এটি যেখানেই থাকুক না কেন রক্ষণাবেক্ষণ কোনও সমস্যা হয়ে দাঁড়াবে না?
পিটার মর্টেনসেন

@ পিটারমোরটেনসেন এটি কম বিকাশের সময় বা উচ্চ রক্ষণাবেক্ষণের মধ্যে সর্বদা বিবেচ্য। হাই রিডানডেনসি বিকাশ করা সহজ কারণ আপনি এখানে এবং সেখানে জিনিস দ্রুত পরিবর্তন করতে পারেন, রক্ষণাবেক্ষণে কম রিডান্ডেন্স সহজ হয় কারণ আপনি বিশ্বব্যাপী স্টাইলে দ্রুত পরিবর্তন করতে পারবেন। অনুশীলনে আপনি দুজনের মধ্যে কোথাও থাকতে চান, কারণ এটির মুখোমুখি হওয়া, বৈশ্বিক স্টাইল থাকা নতুন পৃষ্ঠা যুক্ত করা আরও সহজ করে তোলে তবে সর্বশেষ অস্পষ্ট বৈশিষ্ট্যটি থাকা কোনও সম্ভাব্য বিশ্বব্যাপী শৈলীর পরিবর্তন বজায় রাখতে চিরকালই লাগে।
ডোরাস

এটি ভাল সিএসএসের উভয় দিকেই বৈশিষ্ট্য রয়েছে। এবং অতিরিক্ত কর্মহীনতা হ্রাস করতে এবং রক্ষণাবেক্ষণযোগ্যতা বাড়াতে বা নতুন পৃষ্ঠা / বৈশিষ্ট্যগুলি কাটাতে ব্যয় করার জন্য কতটা সময় ব্যয় করতে হবে তা নির্ধারণ করা ওয়েব বিকাশকারীর উপর নির্ভর করে। যথেষ্ট আকর্ষণীয়, অন্য যে কোনও প্রোগ্রামিং ল্যাঙ্গুয়েজের ক্ষেত্রেও এটি একই বিষয় সত্য যেখানে আপনি কয়েক মাস ধরে আপনার নিখুঁত নকশা তৈরি করতে, বা আপনার প্রোগ্রামটি নষ্ট করার জন্য কয়েক মাস এবং অসম্ভব সমস্যাগুলি খুঁজে পাওয়ার জন্য কয়েক মাস ব্যয় করতে পারেন।
ডরাস

যথেষ্ট আকর্ষণীয় আমি কেবল এই প্রশ্নটির মধ্যে দৌড়েছি যে বিমূর্ততা খুব দূরে নিয়ে যাওয়া এবং রক্ষণাবেক্ষণ এবং বিকাশের উভয় সময়ই হারাতে হবে।
ডোরাস

5

কেন এটি [আপাতদৃষ্টিতে এলোমেলো হার্ড-কোডড মানগুলির একগুচ্ছ] সিএসএস / এসভিজির জন্য ঠিক আছে?

এটা ঠিক নেই। এটা সম্ভব লিখতে এবং প্লেইন "সিএসএস" ফাইল বজায় রাখার জন্য, কিন্তু শেষ পর্যন্ত র্যান্ডম হার্ড কোডেড মান একটি প্রচলিত বোঝা হয়ে যাবে।

অত্যন্ত সাধারণ ওয়েবপৃষ্ঠাগুলি ব্যতীত অন্য যে কোনও কিছুর জন্য আপনাকে হয় একটি শৃঙ্খলাবদ্ধ "সন্ধান এবং প্রতিস্থাপন" কৌশল বিকাশ করতে হবে, অথবা ভেরিয়েবলগুলির সাথে সিএসএস প্রিপ্রসেসর ব্যবহার করতে হবে, বা জাভাস্ক্রিপ্টের মাধ্যমে শৈলীর সংজ্ঞা দিতে হবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.