diff --git a/translations/ben-IN/README.md b/translations/ben-IN/README.md new file mode 100644 index 0000000..b21901d --- /dev/null +++ b/translations/ben-IN/README.md @@ -0,0 +1,364 @@ +# ধারাবাহিক আইডিয়োমেটিক সি.এস.এস. লেখার নীতি, + +নিম্নলিখিত নথিতে সি.এস.এস লেখার জন্য একটি যুক্তিসঙ্গত স্টাইল গাইডের রূপরেখা দেওয়া হয়েছে। +এই নির্দেশিকাগুলি বিদ্যমান, সাধারণ, বুদ্ধিমান প্যাটার্ন এর ব্যবহারকে দৃঢরুপে উত্সাহ দেয়. +এগুলি আপনার নিজস্ব স্টাইল গাইড তৈরি করার জন্য প্রয়োজনীয় হিসাবে খাপ খাইয়ে নেওয়া উচিত। + +এটি একটি জীবন্ত নথি এবং নতুন ধারণা সর্বদা স্বাগত। +অনুগ্রহ করে অবদান করুন| + +## সুচিপত্র + +1. [সাধারণ নীতি](#general-principles) +2. [হোয়াইটস্পেস](#whitespace) +3. [মন্তব্য](#comments) +4. [ফর্ম্যাট](#format) +5. [প্রাকটিক্যাল উদাহরণ](#example) + +[স্বীকৃতি](#acknowledgements) + +[লাইসেন্স](#license) + + + +## 1. সাধারণ নীতি + +> " একটি সফল প্রকল্পের ভাল চালক হওয়ার একটি অংশ জানা যে নিজে কোডটি লেখা একটি খারাপ ধারণা | +> যদি হাজার লোকেরা আপনার কোড লেখে তাহলে আপনার উচিত কোডটি খুব পরিষ্কার করে লেখা | +> শুধু আপনার নিজের বোঝার জন্য নোই সবার বোঝার জন্য " - ইদন গাজিত + +* অজ্ঞত থেকে আপনার কোডটি অপ্টিমাইজ করার চেষ্টা করবেন না; এটি কে পাঠযোগ্য এবং বোধগম্য রাখুন +* যে কোনও কোড-বেসের সমস্ত কোডকে একটি একটি ব্যাক্তির দ্বারা লেখা দেখায় + যদিও এতে বহু লোক এতে অবদান করে থাকে | +* দৃঢরুপে সম্মতিযুক্ত শৈলীর প্রয়োগ করুন। +* সন্দেহ থাকলে শৈলীর সিদ্ধান্ত নেওয়ার সময় বিদ্যমান, সাধারণ নিদর্শনগুলি ব্যবহার করুন। + + + +## 2. হোয়াইটস্পেস + +আপনার পুরো কোড-বেস জুড়ে কেবল একটি স্টাইল থাকা উচিত। +সর্বদা হোয়াইটস্পেসএর ব্যবহারে সামঞ্জস্য বজায় রাখুন | +হোয়াইটস্পেস ব্যবহার করে পঠনযোগ্যতা উন্নত করুন। + + +* ইন্ডেন্টেশনের জন্য কখনও কখনও স্পেস আর ট্যাব মিশ্রিত করবেন না | +* সফ্ট ইনডেন্ট (স্পেসস ) বা ট্যাব এর মধ্যে যে কোনো একটা ব্যবহার করুন | (প্রেফারেন্স : স্পেস ) +* যদি স্পেস ব্যবহার করে থাকে তবে প্রতিটি ইনডেন্টেশন স্তরের ব্যবহৃত অক্ষরের সংখ্যা চয়ন করুন। (প্রেফারেন্স : চারটি স্পেস) + +টিপ: আপনার সম্পাদককে "অদৃশ্যগুলি দেখানোর জন্য" বা স্বয়ংক্রিয়ভাবে লিনের শেষের হোয়াইটস্পেস সরানোর জন্য + কনফিগার করুন | + +টিপ: [এডিটর কনফিগ ](http://editorconfig.org/) ফাইল (বা অন্যনো ) ব্যবহার করুন + আপনার কোড-বেসের জন্য সম্মত হয়েছে এমন বেসিক হোয়াইটস্পেস কনভেনশনগুলি বজায় রাখতে সহায়তা করতে। + + +## 3. [মন্তব্য + +ভাল মন্তব্য কোড অত্যন্ত গুরুত্বপূর্ণ। +উপাদানগুলি কীভাবে কাজ করে, তাদের সীমাবদ্ধতা এবং সেগুলি কীভাবে নির্মিত হয় তা বর্ণনা করতে সময় নিন। +অস্বাভাবিক বা অস্পষ্ট কোডের উদ্দেশ্য হিসাবে অনুমান করে দলে অন্যকে ছেড়ে যাবেন না। + +মন্তব্য শৈলী একটি কোড বেসের মধ্যে সহজ এবং সামঞ্জস্যপূর্ণ হওয়া উচিত। + +* প্রতি বিষয়ের উপরে একটি নতুন লাইনে মন্তব্যগুলি রাখুন। +* একটি বোধগম্য সর্বাধিক, যেমন 80 কলামে লাইন দৈর্ঘ্য রাখুন। +* সিএসএস কোডকে পৃথক বিভাগে বিভক্ত করতে মন্তব্যগুলির উদার ব্যবহার করুন। +* "সেন্টেন্স ক্যাস" মন্তব্য এবং ধারাবাহিক পাঠ্য ইন্ডেন্টেশন ব্যবহার করুন। + +টিপ: আপনাকে সম্মতিযুক্ত মন্তব্য নিদর্শনগুলিতে শর্টকাট সরবরাহ করতে আপনার সম্পাদককে কনফিগার করুন। + +উদাহরণ: + +```css +/* ========================================================================== + সেকশন কমেন্ট ব্লক + ========================================================================== */ + +/* সাব-সেকশন কমেন্ট ব্লক + ========================================================================== */ + +/** + * ডক্সিজেন-স্টাইলের মন্তব্য গঠন ব্যবহার করে সংক্ষিপ্ত বিবরণ + * + * দীর্ঘ বর্ণনার প্রথম বাক্যটি এখানে শুরু হয় এবং অবশেষে এই অনুচ্ছেদের শেষে + * এখানে সমাপ্ত হওয়ার জন্য কিছুক্ষণ এই লাইনে অবিরত থাকে। + * + * দীর্ঘ বিবরণটি আরও বিস্তারিত ব্যাখ্যা এবং ডকুমেন্টেশনের জন্য আদর্শ। + * এটিতে এইচটিএমএল, ইউআরএল বা অন্য যে কোনও তথ্য যা প্রয়োজনীয় বা দরকারী + * বলে বিবেচিত তা অন্তর্ভুক্ত করতে পারে। + * + * @tag এটি একটি ট্যাগ নাম 'tag' + * + * টুডু : এটি একটি টুডো স্টেটমেন্ট যা পরের তারিখে সম্পূর্ণ হওয়া একটি + * পারমাণবিক টাস্কের বর্ণনা দেয়। এটি 80 টি অক্ষরের পরে মোড়ানো + * হয় এবং নীচের লাইনগুলি 2 স্পেস দ্বারা ইন্টেন্ট করা হয়। + */ + +/* বেসিক কমেন্ট */ +``` + + + +## 4. ফর্ম্যাট + +নির্বাচিত কোড ফর্ম্যাটটিতে অবশ্যই কোডটি নিশ্চিত হওয়া উচিত: পড়া সহজ; + স্পষ্টভাবে মন্তব্য করা সহজ; দুর্ঘটনাক্রমে ত্রুটিগুলি প্রবর্তনের সম্ভাবনা হ্রাস করে; +এবং ফলস্বরূপ এবং পৃথক দোষের ফলস্বরূপ। + +* মাল্টি-সিলেক্টর রুলসেটগুলিতে প্রতি লাইনে একটি পৃথক নির্বাচিত ব্যবহার করুন। +* কোনও রুলসেটের প্রারম্ভিক বন্ধনীগুলির আগে একটি একক স্থান অন্তর্ভুক্ত করুন। +* ডিক্লারেশন ব্লকে প্রতি লাইন প্রতি একটি ঘোষণা অন্তর্ভুক্ত করুন। +* প্রতিটি ঘোষণার জন্য এক স্তরের ইন্ডেন্টেশন ব্যবহার করুন। +* একটি ঘোষণার কোলনের পরে একটি একক স্থান অন্তর্ভুক্ত করুন। +* লোয়ারকেস এবং শর্টহ্যান্ড হেক্স মানগুলি ব্যবহার করুন, উদাহরণ, `#aaa`. +* ধারাবাহিকভাবে একক বা ডাবল উদ্ধৃতি ব্যবহার করুন। প্রেফারেন্স ডাবল উদ্ধৃতি জন্য, +* নির্বাচকগুলিতে উদ্ধৃতি বিশিষ্ট মান, উদাহরণ, `input[type="checkbox"]`. +* যেখানে অনুমতি দেওয়া হয়েছে, শূন্য-মানগুলির জন্য ইউনিট নির্দিষ্টকরণ এড়িয়ে চলুন, উদাহরণ, `margin: 0`. +* কমা-বিচ্ছিন্ন সম্পত্তি বা ফাংশন মানগুলিতে প্রতিটি কমা পরে একটি স্থান অন্তর্ভুক্ত করুন। +* একটি ঘোষণা ব্লকে সর্বশেষ ঘোষণার শেষে একটি আধা-কোলন অন্তর্ভুক্ত করুন। +* রোলসেটের প্রথম অক্ষর হিসাবে একই কলামে একটি রোলসেটের সমাপ্তি বন্ধনী রাখুন। +* প্রতিটি রুলসেটটি ফাঁকা রেখার দ্বারা পৃথক করুন। + +```css +.selector-1, +.selector-2, +.selector-3[type="text"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: block; + font-family: helvetica, arial, sans-serif; + color: #333; + background: #fff; + background: linear-gradient(#fff, rgba(0, 0, 0, 0.8)); +} + +.selector-a, +.selector-b { + padding: 10px; +} +``` + +#### ডিক্লারেশন অর্ডার + +যদি ঘোষণাগুলি ধারাবাহিকভাবে অর্ডার করতে হয় তবে এটি একটি একক, সাধারণ নীতি অনুসারে হওয়া উচিত। + +ছোট দলগুলি এক সাথে ক্লাস্টার সম্পর্কিত সম্পত্তি (উদাহরণ, পজিশনিং এন্ড বাক্স-মডেল) পছন্দ করতে পারে। + +```css +.selector { + /* Positioning */ + position: absolute; + z-index: 10; + top: 0; + right: 0; + bottom: 0; + left: 0; + + /* Display & Box Model */ + display: inline-block; + overflow: hidden; + box-sizing: border-box; + width: 100px; + height: 100px; + padding: 10px; + border: 10px solid #333; + margin: 10px; + + /* Other */ + background: #000; + color: #fff; + font-family: sans-serif; + font-size: 16px; + text-align: right; +} +``` + +বড় দলগুলি বর্ণানুক্রমিক ক্রম দিয়ে আসা সরলতা এবং রক্ষণাবেক্ষণের স্বাচ্ছন্দ্যকে পছন্দ করতে পারে। + +#### এক্সসেপশন্স এন্ড স্লাইট ডেভিয়েশন্স + +একক ঘোষণার বড় ব্লক কিছুটা আলাদা, একক-লাইন ফর্ম্যাট ব্যবহার করতে পারে। +এই ক্ষেত্রে, প্রারম্ভিক বন্ধনী পরে এবং বন্ধনী বন্ধনী আগে একটি স্থান অন্তর্ভুক্ত করা উচিত। + +```css +.selector-1 { width: 10%; } +.selector-2 { width: 20%; } +.selector-3 { width: 30%; } +``` + +দীর্ঘ, কমা দ্বারা বিচ্ছিন্ন সম্পত্তি মানগুলি - যেমন গ্রেডিয়েন্ট বা ছায়া গো সংগ্রহের - পাঠযোগ্যতা উন্নত করার জন্য +এবং আরও দরকারী ডিফারেস উত্পাদন করার জন্য একাধিক লাইনে সাজানো যেতে পারে। + বিভিন্ন ফর্ম্যাট রয়েছে যা ব্যবহার করা যেতে পারে; একটি উদাহরণ নীচে প্রদর্শিত হয়। + +```css +.selector { + background-image: + linear-gradient(#fff, #ccc), + linear-gradient(#f3c, #4ec); + box-shadow: + 1px 1px 1px #000, + 2px 2px 1px 1px #ccc inset; +} +``` + +### প্রিপ্রসেসসর্স: অতিরিক্ত বিন্যাস বিবেচনা + +বিভিন্ন সিএসএস প্রিপ্রোসেসরগুলির বিভিন্ন বৈশিষ্ট্য, কার্যকারিতা এবং বাক্য গঠন রয়েছে। +আপনার কনভেনশনগুলিতে ব্যবহারের ক্ষেত্রে কোনও প্রিপ্রসেসরের বৈশিষ্ট্যগুলি +বাড়ানোর জন্য বাড়ানো উচিত। নিম্নলিখিত নির্দেশাবলী SASS প্রসঙ্গে। + +* বাসা বাঁধতে সীমাবদ্ধ করুন 1 স্তর গভীর। 2 স্তরেরও গভীর থেকে যে কোনও নেস্টিংয়ের পুনরায় মূল্যায়ন করুন। + এটি অতিরিক্ত-নির্দিষ্ট সিএসএস নির্বাচনকারীদের বাধা দেয়। +* বিপুল সংখ্যক নেস্টেড বিধি এড়ান। পাঠযোগ্যতা প্রভাবিত হতে শুরু করলে এগুলি ভেঙে দিন। + 20 টিরও বেশি লাইনে ছড়িয়ে পড়া বাসা বাঁধতে পছন্দ করুন।. +* ডিক্লেয়ারেশন ব্লকের প্রথম লাইনে সর্বদা `@extend` স্টেটমেন্ট রাখুন। +* যেখানে সম্ভব, গ্রুপ @ include করুন `@ extend বিবৃতি পরে কোনও ঘোষণার ব্লকের শীর্ষে স্টেটমেন্ট। +* x-`বা অন্য কোনও নেমস্পেসের সাথে কাস্টম ফাংশনগুলির উপসর্গ বিবেচনা করুন। + এটি কোনও স্থানীয় সিএসএস ফাংশন দিয়ে আপনার ফাংশনকে বিভ্রান্ত করার বা লাইব্রেরি থেকে + ফাংশনগুলির সাথে সংঘাতের সম্ভাবনা এড়াতে সহায়তা করে। + + +```scss +.selector-1 { + @extend .other-rule; + @include clearfix(); + @include box-sizing(border-box); + width: x-grid-unit(1); + // other declarations +} +``` + + + +## 5. প্রাকটিক্যাল উদাহরণ + +বিভিন্ন সম্মেলনের একটি উদাহরণ। + +```css +/* ========================================================================== + গ্রিড লেআউট + ========================================================================== */ + +/** + * কলাম লেআউট এর সঙ্গে হরাইজন্টাল স্ক্রল. + * + * এটি পূর্ণ উচ্চতার একক সারি তৈরি করে, নন-মোড়ানো কলামগুলি যে তাদের + * পিতামাতার মধ্যে অনুভূমিকভাবে ব্রাউজ করা যেতে পারে। + * + * উদাহরণ HTML: + * + *
+ *
+ *
+ *
+ *
+ */ + +/** + * + * গ্রিড ধারক + * + * কেবলমাত্র `.cell` শিশু থাকতে হবে। + * + * 1. আন্তঃকোষের হোয়াইটস্পেস সরিয়ে ফেলুন + * 2. ইনলাইন-ব্লক কক্ষ মোড়ানো প্রতিরোধ করুন + */ + +.grid { + height: 100%; + font-size: 0; /* 1 */ + white-space: nowrap; /* 2 */ +} + +/** + * গ্রিড কোষ + * + * ডিফল্টরূপে সুস্পষ্ট প্রস্থ নেই। `.cell-n` ক্লাস সহ প্রসারিত করুন। + * + * 1. আন্তঃকক্ষের ব্যবধান সেট করুন + * 2. `.grid` থেকে উত্তরাধিকারসূত্রে সাদা স্থান পুনরায় সেট করুন | + * 3. `.grid` থেকে উত্তরাধিকার সূত্রে ফন্ট-আকার পুনরায় সেট করুন`| + */ + +.cell { + position: relative; + display: inline-block; + overflow: hidden; + box-sizing: border-box; + height: 100%; + padding: 0 10px; /* 1 */ + border: 2px solid #333; + vertical-align: top; + white-space: normal; /* 2 */ + font-size: 16px; /* 3 */ +} + +/* Cell states */ + +.cell.is-animating { + background-color: #fffdec; +} + +/* Cell dimensions + ========================================================================== */ + +.cell-1 { width: 10%; } +.cell-2 { width: 20%; } +.cell-3 { width: 30%; } +.cell-4 { width: 40%; } +.cell-5 { width: 50%; } + +/* Cell modifiers + ========================================================================== */ + +.cell--detail, +.cell--important { + border-width: 4px; +} +``` + + +## Translations + +* [Bahasa Indonesia](https://github.com/necolas/idiomatic-css/tree/master/translations/id-ID) +* [Bulgarian](https://github.com/vestimir/idiomatic-css) +* [Česky](https://github.com/necolas/idiomatic-css/tree/master/translations/cs-CZ) +* [Dansk](https://github.com/necolas/idiomatic-css/tree/master/translations/da-DK) +* [Deutsch](https://github.com/necolas/idiomatic-css/tree/master/translations/de-DE) +* [Español](https://github.com/necolas/idiomatic-css/tree/master/translations/es-ES) +* [Français](https://github.com/necolas/idiomatic-css/tree/master/translations/fr-FR) +* [Italiano](https://github.com/necolas/idiomatic-css/tree/master/translations/it-IT) +* [日本語](https://github.com/necolas/idiomatic-css/tree/master/translations/ja-JP) +* [한국어](https://github.com/necolas/idiomatic-css/tree/master/translations/ko-KR) +* [Nederlands](https://github.com/necolas/idiomatic-css/tree/master/translations/nl-NL) +* [Polski](https://github.com/necolas/idiomatic-css/tree/master/translations/pl-PL) +* [Português (Brasil)](https://github.com/necolas/idiomatic-css/tree/master/translations/pt-BR) +* [Русский](https://github.com/necolas/idiomatic-css/tree/master/translations/ru-RU) +* [Srpski](https://github.com/necolas/idiomatic-css/tree/master/translations/sr-SR) +* [Türkçe](https://github.com/necolas/idiomatic-css/tree/master/translations/tr-TR) +* [正體中文](https://github.com/necolas/idiomatic-css/tree/master/translations/zh-TW) +* [简体中文](https://github.com/necolas/idiomatic-css/tree/master/translations/zh-CN) +* [বাংলা](https://github.com/necolas/idiomatic-css/tree/master/translations/ben-IN) + + + +## স্বীকৃতি + +যারা অনুবাদ সরবরাহ করেছেন এবং যারা [idiomatic.js] (https://github.com/rwldrn/idiomatic.js) +এ অবদান রেখেছেন তাদের সকলকে ধন্যবাদ | +এটি অনুপ্রেরণা, উদ্ধৃতি এবং নির্দেশিকাগুলির উত্স ছিল। + + + + +## লাইসেন্স + +_Principles of writing consistent, idiomatic CSS_ by Nicolas Gallagher +এর অধীনে লাইসেন্স প্রাপ্ত [Creative Commons Attribution 3.0 Unported +License](http://creativecommons.org/licenses/by/3.0/). +এটি এই সংগ্রহস্থলের সমস্ত নথি এবং অনুবাদগুলিতে প্রযোজ্য। + +এ নিচের উলিখিত কাজের উপর ভিত্তি করে +[github.com/necolas/idiomatic-css](https://github.com/necolas/idiomatic-css).