css - সিএসএস বিস্ফোরণ ব্যবস্থাপনা




organization (10)

সিএসএস শিরোনাম লিখবেন না

শুধু ফাইল মধ্যে বিভাগ বিভক্ত। কোন সিএসএস মন্তব্য, মন্তব্য করা উচিত, মন্তব্য।

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

এক মধ্যে তাদের একত্রিত করার জন্য একটি স্ক্রিপ্ট ব্যবহার করুন; যদি প্রয়োজন হয় তাহলে. আপনি এমনকি একটি চমৎকার ডিরেক্টরি গঠন থাকতে পারে, এবং আপনার স্ক্রিপ্ট recursively। .css ফাইল জন্য স্ক্যান আছে।

আপনি শিরোনাম লিখতে হবে, ফাইল শুরুতে একটি TOC আছে

TOC এ শিরোনামগুলি আপনি পরবর্তীতে শিরোনামগুলির সাথে পুরোপুরি সমান হওয়া উচিত। এটি শিরোনাম অনুসন্ধান করার জন্য একটি ব্যথা। সমস্যাটি যোগ করার জন্য, আপনার প্রথম শিরোনামটির পরে অন্য শিরোনামটি কীভাবে জানা আছে তা ঠিক কতটা? গীত। TOC লেখার সময় প্রতিটি লাইনের শুরুতে ডক-মত * (তারকা) যুক্ত করবেন না, এটি পাঠ্যটি নির্বাচন করা আরও বিরক্তিকর করে তোলে।

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

ব্লক বাইরে না, নিয়ম বা সঙ্গে নিয়ম লিখুন

প্রথম বন্ধ, যখন আপনি স্ক্রিপ্টটি সম্পাদনা করেন তখন 50/50 সুযোগটি আপনি নিয়ম ব্লকের বাইরে যাবেন তা মনোযোগ দিতে পারবেন (বিশেষত এটি পাঠ্যের একটি বড় গ্লব;))। দ্বিতীয়তঃ (প্রায়) কোনও ক্ষেত্রে যেখানে আপনি বাইরে "মন্তব্য" করতে হবে। যদি এটি বাইরে থাকে, এটি একটি শিরোনাম 99% হয়, তাই এটি এমন রাখুন।

উপাদান মধ্যে পাতা বিভক্ত

উপাদান position:relative থাকা উচিত position:relative , কোন padding এবং কোন margin , অধিকাংশ সময়। এটি সহজ করে% এর অনেকগুলি নিয়ম, পাশাপাশি অনেক সহজ পরমের জন্য অনুমতি দেয় absolute:position উপাদানগুলির উপাদান, যেহেতু একটি পরম অবস্থানযুক্ত কন্টেইনার আছে, ততক্ষণে স্থির অবস্থানটি top , right , bottom , left বৈশিষ্ট্যগুলি কম্পিউটিংয়ের সময় ধারক ব্যবহার করবে।

একটি HTML5 নথির বেশিরভাগ DIV সাধারণত একটি উপাদান।

একটি উপাদান এমন কিছু যা পৃষ্ঠাতে একটি স্বাধীন ইউনিট হিসাবে বিবেচিত হতে পারে। লেকম্যানের পদগুলিতে যদি কোনও ব্ল্যাকবক্সের মতো কিছু আচরণ করা যায় তবে এটি একটি উপাদানের মতো আচরণ করে।

আবার প্রশ্নোত্তর পাতা দিয়ে যাচ্ছেন:

#navigation
#question
#answers
#answers .answer
etc.

পৃষ্ঠায় উপাদান বিভক্ত করে, আপনি আপনার কাজ পরিচালনাযোগ্য ইউনিট বিভক্ত।

একই লাইন একটি সংমিশ্রণ প্রভাব সঙ্গে নিয়ম রাখুন।

উদাহরণস্বরূপ border , margin এবং padding (কিন্তু outline নয়) সমস্ত আপনি যে স্টাইলের উপাদানটির মাত্রা এবং আকার যোগ করেন।

position: absolute; top: 10px; right: 10px;

যদি তারা কেবল এক লাইনে পাঠযোগ্য না হয় তবে কমপক্ষে তাদের নিকটবর্তী স্থানে রাখুন:

padding: 10px; margin: 20px;
border: 1px solid black;

সম্ভাব্য যখন shorthand ব্যবহার করুন:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

একটি নির্বাচক পুনরাবৃত্তি না

আপনার যদি একই নির্বাচকর আরো উদাহরণ থাকে, তবে একই নিয়মগুলির একাধিক দৃষ্টান্তের সাথে আপনি অনিবার্যভাবে শেষ হওয়ার সুযোগ পাবেন। উদাহরণ স্বরূপ:

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

আপনি আইডি / ক্লাস ব্যবহার করতে পারেন, যখন নির্বাচক হিসাবে TAG ব্যবহার করা এড়িয়ে চলুন

প্রথমে ডিভি এবং স্প্যান ট্যাগগুলি বন্ধ করুন: আপনি কখনই তাদের ব্যবহার করতে পারবেন না! ;) শুধুমাত্র একটি ক্লাস / আইডি সংযুক্ত করতে তাদের ব্যবহার করুন।

এই...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

এই মত লেখা উচিত:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

কারণ অতিরিক্ত ঝুঁকিপূর্ণ DIVs নির্বাচক নির্বাচন কিছুই নেই। তারা একটি অপ্রয়োজনীয় ট্যাগ-নিয়ম জোরদার। যদি আপনি পরিবর্তন করতে চান, উদাহরণস্বরূপ, .answer থেকে একটি article আপনার স্টাইলটি ভাঙ্গবে।

অথবা আপনি আরো স্বচ্ছতা পছন্দ করেন:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

border-collapse সম্পত্তির সম্পত্তি হ'ল একটি বিশেষ সম্পত্তি যা শুধুমাত্র একটি table প্রয়োগ করার অর্থ উপলব্ধি করে। যদি .statistics কোন table না থাকে তবে এটি প্রয়োগ করা উচিত নয়।

জেনেরিক নিয়ম মন্দ হয়!

  • আপনি করতে পারেন জেনেরিক / জাদু নিয়ম লেখা এড়াতে
  • এটি একটি CSS- রিসেট / অনিরাপদের জন্য না থাকলে, আপনার জেনেরিক যাদুটি কমপক্ষে এক মূল উপাদানতে প্রয়োগ করা উচিত

তারা আপনাকে সময় বাঁচায় না, তারা আপনার মাথা বিস্ফোরিত করা; পাশাপাশি রক্ষণাবেক্ষণ একটি দুঃস্বপ্ন করা। যখন আপনি নিয়মটি লেখেন, তখন আপনি জানতে পারেন যে তারা কোথায় আবেদন করে, তবে কোনও নিশ্চয়তা নেই যে আপনার নিয়ম পরে আপনার সাথে কোনও ঝামেলা হবে না।

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

এই মত স্টাফ ...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

... একটি প্রোগ্রামিং ভাষা গ্লোবাল ভেরিয়েবল ব্যবহার হিসাবে একই সমস্যা আছে। আপনি তাদের সুযোগ দিতে হবে!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

মূলত যে হিসাবে পড়তে:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

যখনই আমি জানি কোন উপাদানটি একটি পৃষ্ঠায় একটি সিঙ্গল্ট থাকে তখন আমি আইডি ব্যবহার করতে পছন্দ করি; আপনার প্রয়োজন ভিন্ন হতে পারে।

নোট: আদর্শভাবে, আপনি যথেষ্ট যথেষ্ট লিখতে হবে। নির্বাচক আরও উপাদান উল্লেখ যদিও কম উপাদান উল্লেখ তুলনায়, আরো ক্ষমা ভুল।

আসুন আপনি একটি pagination উপাদান আছে অনুমান করা যাক। আপনি আপনার সাইটে জুড়ে অনেক জায়গায় এটি ব্যবহার। আপনি একটি জেনেরিক নিয়ম লেখা হবে যখন এই একটি ভাল উদাহরণ হবে। চলুন আপনি display:block পৃথক পৃষ্ঠার লিঙ্কগুলি display:block করুন এবং তাদের গাঢ় ধূসর ব্যাকগ্রাউন্ড দিন। তাদের কাছে দৃশ্যমান হওয়ার জন্য আপনাকে এইরকম নিয়ম থাকতে হবে:

.pagination .pagelist a {
    color: #fff;
}

এখন বলুন উত্তরগুলির তালিকার জন্য আপনি আপনার প্যাগিনেশন ব্যবহার করেন, আপনি এইরকম কিছু সম্মুখীন হতে পারেন

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

এটি আপনার সাদা লিঙ্কগুলি কালো করবে, যা আপনি চান না।

এটি ঠিক করার ভুল উপায় হল:

.pagination .pagelist a {
    color: #fff !important;
}

এটি ঠিক করার সঠিক উপায় হল:

#answers .header .pagination .pagelist a {
    color: #fff;
}

জটিল "যুক্তি" মন্তব্য কাজ করে না :)

আপনি যদি কিছু লিখতে চান: "এই মানটি ব্লা-ব্লাহের উপর নির্ভরশীল, ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে উল্টে যায়।"

আপনার মতামত সহজ রাখুন; যদি আপনার "লজিক্যাল অপারেশনস" দরকার হয় তবে সেগুলি CSS বা LESS মত CSS সিমপ্লেটিং ভাষাগুলির একটি বিবেচনা করুন।

কিভাবে আপনি একটি রঙ প্যালেট লিখুন না?

শেষ জন্য এই ছেড়ে। আপনার পুরো রঙের প্যালেট জন্য একটি ফাইল আছে। এই ফাইলটি দিয়ে আপনার স্টাইলটি এখনও নিয়মগুলিতে কিছু ব্যবহারযোগ্য রঙের প্যালেট থাকা উচিত। আপনার রঙ প্যালেট overwrite করা উচিত। আপনি একটি খুব উচ্চ স্তরের অভিভাবক উপাদান (উদাহরণস্বরূপ। #page ) ব্যবহার করে চেইন নির্বাচক এবং তারপরে আপনার শৈলীটি একটি #page হিসাবে লেখেন। এটা শুধু রঙ বা আরো কিছু হতে পারে।

যেমন।

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

ধারণাটি সহজ, আপনার রঙের প্যালেট স্টাইলশীটটি বেস স্টাইলের থেকে আলাদা , যা আপনি ক্যাসকেড করেন।

কম নাম, কোডটি সহজে পড়ার জন্য কম মেমরি প্রয়োজন

কম নাম ব্যবহার করে ভাল। আদর্শভাবে খুব সহজ (এবং সংক্ষিপ্ত!) শব্দগুলি ব্যবহার করুন: পাঠ, শরীর, হেডার।

সহজ শব্দগুলির সংমিশ্রণটি বোঝা সহজ, তারপর দীর্ঘ "যথাযথ" শব্দগুলির একটি স্যুপ থাকা: পোস্টবডি, পোস্টহেড, ব্যবহারকারীইনফো ইত্যাদি।

শব্দভান্ডারটি ছোট রাখুন, এমনভাবে যদি কিছু নবজাতক আপনার স্টাইল-স্যুপ পড়তে আসছে (কয়েক সপ্তাহ পরে নিজের মতোই)) শুধুমাত্র শব্দগুলি কোথায় ব্যবহার করা হয় তা বোঝার প্রয়োজন হয়, যেখানে প্রত্যেক নির্বাচক ব্যবহার করা হয়। উদাহরণস্বরূপ আমি ব্যবহার করি। যখনই একটি উপাদান অনুমিতভাবে "নির্বাচিত আইটেম" বা "বর্তমান আইটেম" ইত্যাদি হয়।

নিজেকে পরে পরিষ্কার করুন

লেখার সিএসএস খাওয়ার মতো, কখনও কখনও আপনি পিছনে একটি জগাখিচুড়ি ছেড়ে। আপনি যে জগাখিচুড়ি পরিষ্কার করুন নিশ্চিত করুন, বা আবর্জনা কোড শুধু আপ ধরিয়া হবে। আপনি ব্যবহার না ক্লাস / আইডস সরান। আপনি ব্যবহার না করেন সিএসএস নিয়ম মুছে ফেলুন। সবকিছু একটি আঁট চমৎকার নিশ্চিত করুন এবং আপনি দ্বন্দ্ব বা সদৃশ নিয়ম আছে না।

আপনি যদি আমার পরামর্শ অনুসারে, আপনার শৈলীতে কিছু বাক্সে কালো বাক্সগুলি (উপাদান) হিসাবে ব্যবহার করেন, আপনার নির্বাচকদের মধ্যে সেই উপাদানগুলি ব্যবহার করেন এবং সবকিছুকে একটি ডেডিকেটেড ফাইলে রেখেছেন (অথবা একটি টিওসি এবং হেডারগুলির সাথে একটি ফাইলটি ভালভাবে ভাগ করুন), তাহলে আপনার কাজ বেশ সহজ ...

আপনি আপনার CSS nukes এবং carnies মধ্যে লুকানো জাঙ্ক কিছু খুঁজে পেতে সাহায্য করার জন্য ফায়ারফক্স এক্সটেনশন ডাস্ট-মি নির্বাচক (টিপ: এটি আপনার sitemap.xml এ নির্দেশ করুন) হিসাবে একটি সরঞ্জাম ব্যবহার করতে পারেন।

একটি unsorted.css ফাইল রাখুন

বলুন আপনি একটি QA সাইট স্টাইল করছেন এবং আপনার কাছে ইতিমধ্যে "উত্তর পৃষ্ঠা" এর জন্য একটি স্টাইলশীট রয়েছে, যা আমরা answers.css কল করব। এখন যদি আপনার অনেক নতুন CSS যুক্ত করতে হয় তবে এটি unsorted.css স্টাইলশীটতে যোগ করুন এবং তারপরে আপনার answers.css স্টাইলশীটটিতে পুনরায় প্রতিক্রিয়া জানান।

এর জন্য বিভিন্ন কারণ:

  • এটি সমাপ্ত হওয়ার পরে এটিতে দ্রুততর করার জন্য এটি দ্রুততর, তবে এটি নিয়মগুলি অনুসন্ধান করা (যা সম্ভবত বিদ্যমান নয়) এবং কোডকে ইনজেক্ট করতে
  • আপনি যে উপাদানটি সরিয়ে দেবেন সেগুলি লিখবেন, কোডটি ইনজেকশন করা কেবল সেই কোডটি সরানো কঠিন করে তোলে
  • মূল ফাইল যোগদান সহজে নিয়ম / নির্বাচক সদৃশ বাড়ে

আমি যে কাজটি করছি সেটির জন্য আমি CSS এর উপর ভরসা করছি। এই মুহূর্তে, সমস্ত সিএসএস শৈলী প্রতি ট্যাগ ভিত্তিতে প্রয়োগ করা হচ্ছে, এবং তাই এখন আমি ভবিষ্যতে পরিবর্তনগুলির জন্য সাহায্য করার জন্য এটি বাহ্যিক স্টাইলিংয়ের আরো স্থানান্তরিত করার চেষ্টা করছি।

কিন্তু এখন সমস্যা হল আমি লক্ষ্য করেছি যে আমি একটি "সিএসএস বিস্ফোরণ" পেয়ে যাচ্ছি। সিএসএস ফাইলের মধ্যে সর্বোত্তম সংগঠন এবং বিমূর্ত ডেটা কিভাবে নির্ধারণ করবেন তা আমার পক্ষে কঠিন হয়ে উঠছে।

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

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

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

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


আপনি ক্যাসকেড, এবং ওজন, এবং কিভাবে তারা কাজ করতে হবে বুঝতে হবে।

আমি লক্ষ্য করেছি আপনি শুধুমাত্র ক্লাস আইডেন্টিফায়ার ব্যবহার করছেন (div.title)। আপনি কি জানেন যে আপনি আইডি ব্যবহার করতে পারেন, এবং একটি আইডি একটি ক্লাসের চেয়ে বেশি ওজন বহন করে?

উদাহরণ স্বরূপ,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

সমস্ত উপাদানগুলি একটি ফন্ট সাইজ, বলতে, বা একটি রঙ, বা আপনার নিয়ম যাই হোক না কেন ভাগ করে নেবে। আপনি এমনকি # পৃষ্ঠা 1 এর বংশধরদের সমস্ত ডিআইভিও নির্দিষ্ট নিয়ম পেতে পারেন।

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

সংখ্যা মত এটি চিন্তা করুন। দশ কলামে একটি 9 টি দশকের কলামের চেয়ে কম। একটি আইডি স্পেসিফায়ার, একটি ক্লাস স্পেসিফায়ার, এবং দুটি উপাদান স্পেসিফিক্সের সাথে একটি নির্বাচক, কোন আইডি, 500 শ্রেণির স্পেসিফায়ার এবং 1000 উপাদান স্পেসিফায়ারের সাথে নির্বাচকর চেয়ে বেশি ওজন থাকবে। এটি অবশ্যই একটি অদ্ভুত উদাহরণ, তবে আপনি ধারণাটি পান। বিন্দুটি হল, এই ধারণাটি প্রয়োগ করা আপনাকে অনেকগুলি CSS সাফ করতে সহায়তা করে।

বিটিডব্লিউ, ক্লাসের (div.title) উপাদান সংযোজনকারী যুক্ত করার প্রয়োজন নেই, যদি না আপনি অন্য উপাদানগুলির সাথে দ্বন্দ্বের মধ্যে চলমান থাকেন তবে শ্রেণী = "শিরোনাম" থাকে। অপ্রয়োজনীয় ওজন যোগ করবেন না, কারণ আপনাকে পরে ওজন ব্যবহার করতে হবে।


আমি LESS সুপারিশ করতে পারেন

এটি আগে উল্লেখিত SASS অনুরূপ।

এটা পিতামাতা শ্রেণীর প্রতি সিএসএস বজায় রাখতে সাহায্য করে।

যেমন

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

এটি কী করে: প্রযোজ্য প্রস্থ: # শিশু 1 এবং # শিশু 2 উভয়তে 100%।

এছাড়াও, # শিশু 1 নির্দিষ্ট CSS # অভিভাবকের অন্তর্গত।

এই রেন্ডার হবে

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

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

আমি প্রায় আমার মত সিএসএস ফাইল সংগঠিত ঝোঁক:

  1. এরিস মেয়েরের উপর ভিত্তি করে CSS রিসেট। (অন্যথায় আমি এটি খুঁজে পাচ্ছি, বেশিরভাগ উপাদানের জন্য, আমার অন্তত একটি বা দুটি নিয়ম রয়েছে যা ডিফল্ট ব্রাউজারের শৈলীগুলি পুনরায় সেট করছে - উদাহরণস্বরূপ, আমার তালিকাগুলি তালিকাগুলির জন্য ডিফল্ট HTML শৈলী মত দেখাচ্ছে না।)

  2. গ্রিড সিস্টেম সিএসএস, যদি সাইটের জন্য এটি কল। (আমি 960.gs উপর খনি বেস)

  3. প্রতিটি পৃষ্ঠায় উপস্থিত শিরোনামের জন্য শৈলী (হেডার, পাদচরণ, ইত্যাদি)

  4. সাইটে জুড়ে বিভিন্ন জায়গায় ব্যবহৃত উপাদান জন্য শৈলী

  5. স্বতন্ত্র পৃষ্ঠাগুলিতে শুধুমাত্র প্রাসঙ্গিক শৈলী

আপনি দেখতে পারেন যে, অধিকাংশ সাইটের জন্য নকশা উপর নির্ভর করে। ডিজাইনের স্পষ্ট এবং সংগঠিত হলে, আপনার সিএসএস হতে পারে। যদি না হয়, আপনি screwed হয়।


এখানে মাত্র 4 টি উদাহরণ রয়েছে:

4 টিতে আমার উত্তরটি Natalie Downe এর PDF CSS সিস্টেমগুলি ডাউনলোড এবং পড়ার পরামর্শ অন্তর্ভুক্ত করেছে। (পিডিএফ স্লাইডে নোট টন নোট অন্তর্ভুক্ত করে, তাই পিডিএফ পড়ুন!)। প্রতিষ্ঠানের জন্য তার পরামর্শ নোট নিন।

EDIT (2014/02/05) চার বছর পরে, আমি বলতাম:

  • একটি CSS প্রাক-প্রসেসর ব্যবহার করুন এবং আংশিকভাবে আপনার ফাইলগুলি পরিচালনা করুন (আমি ব্যক্তিগতভাবে কম্পাস সহ সাস পছন্দ করি, কিন্তু কম ভাল হিসাবে ভাল এবং অন্যদের আছে)
  • getbem , SMACSS , এবং BEM বা getbem মত ধারণার উপর পড়ুন।
  • Bootstrap এবং জারবার ফাউন্ডেশনের মতো জনপ্রিয় CSS ফ্রেমওয়ার্কগুলি কীভাবে গঠন করা হয়েছে তা দেখুন। এবং কম জনপ্রিয় কাঠামো ডিসকাউন্ট না - Inuit একটি আকর্ষণীয় এক কিন্তু প্রচুর অন্যদের আছে।
  • একটি ক্রমাগত ইন্টিগ্রেশন সার্ভার এবং / অথবা গ্রান্ট বা গুলপের মতো টাস্ক রানারের সাথে একটি বিল্ড ধাপের সাথে আপনার ফাইলগুলিকে একত্রিত করুন।

এটি একটি খুব ভাল প্রশ্ন। যেখানেই আমি দেখি, সিএসএস ফাইলগুলি কিছুক্ষন পরে নিয়ন্ত্রণ থেকে বেরিয়ে আসে - বিশেষত, কিন্তু শুধুমাত্র একটি দলটিতে কাজ করার সময় নয়।

নিম্নলিখিত নিয়মগুলি আমি নিজেই অনুসরণ করার চেষ্টা করছি (আমি সবসময় পরিচালনা করি না।)

  • রেফেক্টর প্রাথমিকভাবে, রিফ্যাক্টর প্রায়শই। প্রায়শই সিএসএস ফাইলগুলি সাফ করুন, একই ক্লাসের একাধিক সংজ্ঞা একত্রিত করুন। অবিলম্বে অপ্রচলিত সংজ্ঞা মুছে ফেলুন।

  • বাগ ফিক্সিংয়ের সময় সিএসএস যোগ করার সময়, পরিবর্তনটি কী করে তা মন্তব্য করুন ("এইটি নিশ্চিত করা হয়েছে যে বাক্সটি IE <7" এ সংলগ্ন করা হয়েছে কিনা)

  • অকার্যকরতা এড়িয়ে চলুন, উদাহরণস্বরূপ .classname এবং .classname:hover মধ্যে একই জিনিস সংজ্ঞায়িত .classname:hover

  • একটি পরিষ্কার গঠন নির্মাণ করতে /** Head **/ মন্তব্য /** Head **/ ব্যবহার করুন।

  • একটি ধ্রুবক শৈলী ব্যবহার করুন যা একটি ধ্রুবক শৈলী বজায় রাখতে সহায়তা করে। আমি Polystyle ব্যবহার Polystyle , যার সাথে আমি বেশ খুশি (খরচ $ 15 কিন্তু অর্থ ভালভাবে ব্যয় করা হয়)। আমি নিশ্চিত যে পাশাপাশি বিনামূল্যে কিছু আছে (আপডেট: উদাহরণস্বরূপ উদাহরণস্বরূপ কোড Beautifier সিএসএস টিডি উপর ভিত্তি করে, একটি ওপেন সোর্স টুল আমি এখনও নিজেকে ব্যবহার না করেছি কিন্তু খুব আকর্ষণীয় দেখায়।)

  • বুদ্ধিমান ক্লাস তৈরি করুন। এই উপর কয়েক নোট জন্য নিচে দেখুন।

  • শব্দার্থবিদ্যা ব্যবহার করুন, ডিভিভি স্যুপ এড়াতে - উদাহরণস্বরূপ, <ul> গুলিগুলির জন্য মেনু ব্যবহার করুন।

  • যত কম সম্ভব একটি স্তর (উদাহরণস্বরূপ একটি ডিফল্ট ফন্ট পরিবার, body আকার এবং আকার) এবং সমস্ত যেখানে সম্ভব সম্ভব inherit ব্যবহার করুন

  • আপনার যদি খুব জটিল সিএসএস থাকে তবে সম্ভবত একটি CSS প্রাক-কম্পাইলার সহায়তা করে। আমি শীঘ্রই একই কারণে xCSS মধ্যে xCSS পরিকল্পনা করছি। চারপাশে অনেক অন্যান্য আছে।

  • একটি দলের মধ্যে কাজ করে, পাশাপাশি সিএসএস ফাইলের জন্য মানের এবং মান প্রয়োজনীয়তা হাইলাইট। তাদের প্রোগ্রামিং ভাষা (গুলি) কোডিং মানক সবাই বড়, কিন্তু CSS এর জন্য এটিও প্রয়োজনীয়।

  • একটি দলের মধ্যে কাজ করে, সংস্করণ নিয়ন্ত্রণ ব্যবহার বিবেচনা করুন। এটি এমন কিছু করে তোলে যা ট্র্যাক করা অনেক সহজ এবং সমাধানগুলি যেগুলি সমাধান করা অনেক সহজ করে। এটি সত্যিই মূল্যবান, এমনকি যদি আপনি HTML এবং CSS এ "ঠিক" থাকেন।

  • !important সঙ্গে কাজ করবেন না !important শুধু তাই না IE = <7 এটি মোকাবেলা করতে পারে না। জটিল কাঠামোতে, গুরুত্বপূর্ণ ব্যবহার প্রায়ই এমন আচরণ পরিবর্তন করার প্রলুব্ধ হয় যার উৎস পাওয়া যায় না, তবে দীর্ঘমেয়াদী রক্ষণাবেক্ষণের জন্য এটি বিষ

বুদ্ধিমান ক্লাস নির্মাণ

আমি কিভাবে বুদ্ধিমান ক্লাস নির্মাণ করতে চান।

আমি প্রথম গ্লোবাল সেটিংস আবেদন:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

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

তারপরে, আমি সিএসএস ক্লাসগুলি তৈরি করতে শুরু করি, যতটা সম্ভব সম্ভাব্য এবং বুদ্ধিমান হিসাবে অনেক পূর্বপুরুষকে নির্দিষ্ট করে এবং সম্পর্কিত ক্লাসগুলিকে ঘনিষ্ঠভাবে গোষ্ঠীভুক্ত করে।

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

ক্রমবর্ধমান নির্দিষ্ট সংজ্ঞাগুলির সাথে গাছের মতো সম্পূর্ণ সিএসএস কাঠামোর কথা চিন্তা করুন যা আপনার রুট থেকে আরও দূরে। আপনি যতটা সম্ভব কম সংখ্যক ক্লাস রাখতে চান এবং আপনি নিজেকে যতটা সম্ভব কমপক্ষে পুনরাবৃত্তি করতে চান।

উদাহরণস্বরূপ, ধরুন আপনার কাছে ন্যাভিগেশনাল মেনুর তিন স্তর রয়েছে। এই তিনটি মেনু ভিন্ন চেহারা, কিন্তু তারা নির্দিষ্ট বৈশিষ্ট্য শেয়ার করুন। উদাহরণস্বরূপ, তারা সব <ul> , তাদের সকলের একই ফন্টের আকার রয়েছে এবং আইটেমটি একে অপরের পাশে রয়েছে ( ul এর ডিফল্ট রেন্ডারিংয়ের বিরোধিতা করে)। এছাড়াও, কোনও মেনুতে কোনো বুলেট পয়েন্ট নেই ( list-style-type )।

প্রথমে, menu নামে একটি শ্রেণিতে সাধারণ বৈশিষ্ট্যগুলি সংজ্ঞায়িত করুন:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

তারপর, তিনটি মেনু প্রতিটি নির্দিষ্ট বৈশিষ্ট্য সংজ্ঞায়িত। লেভেল 1 40 পিক্সেল লম্বা; মাত্রা 2 এবং 3 20 পিক্সেল।

দ্রষ্টব্য: আপনি এটির জন্য একাধিক ক্লাস ব্যবহার করতে পারেন তবে ইন্টারনেট এক্সপ্লোরার 6 এ একাধিক ক্লাসের সমস্যা রয়েছে , তাই এই উদাহরণটি id ব্যবহার করে।

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

মেনুর জন্য মার্কআপ এটি দেখতে হবে:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

যদি আপনার পৃষ্ঠায় semantically একই উপাদানের আছে - এই তিনটি মেনুগুলির মত - প্রথমে সাধারণভাবে কাজ করার চেষ্টা করুন এবং তাদেরকে একটি শ্রেণিতে রাখুন; তারপরে, নির্দিষ্ট বৈশিষ্ট্যের সমাধান করুন এবং ক্লাসগুলিতে প্রয়োগ করুন অথবা যদি আপনাকে Internet Explorer 6, ID এর সমর্থন করতে হয়।

বিবিধ এইচটিএমএল টিপস

আপনি যদি আপনার এইচটিএমএল আউটপুট এ এই সেমেন্টিকগুলি যুক্ত করেন তবে ডিজাইনাররা বিশুদ্ধ CSS ব্যবহার করে ওয়েব সাইট এবং / অথবা অ্যাপ্লিকেশানগুলির চেহারা কাস্টমাইজ করতে পারেন, যা একটি দুর্দান্ত সুবিধা এবং সময়-সঞ্চয়কারী।

  • সম্ভব হলে, প্রতিটি পৃষ্ঠার শরীরকে একটি অনন্য শ্রেণী দিন: <body class='contactpage'> এটি স্টাইল শীটের পৃষ্ঠা-নির্দিষ্ট পরিবর্তনগুলিকে যুক্ত করা খুব সহজ করে তোলে:

    body.contactpage div.container ul.mainmenu li { color: green }
  • স্বয়ংক্রিয়ভাবে মেনু তৈরি করার সময়, যতটা সম্ভব CSS স্ট্যাটাসটি ব্যাপক স্টাইলিংকে অনুমোদন করার জন্য যোগ করুন। উদাহরণ স্বরূপ:

    <ul class="mainmenu">
     <li class="item_first item_active item_1"> First item </li> 
     <li class="item_2"> Second item </li> 
     <li class="item_3"> Third item </li> 
     <li class="item_last item_4"> Fourth item </li> 
    </ul>

    এইভাবে, প্রতিটি মেনু আইটেমটি স্টিমিংয়ের জন্য এটির শব্দার্থিক প্রসঙ্গ অনুসারে অ্যাক্সেস করা যেতে পারে: তালিকাতে এটি প্রথম বা শেষ আইটেম কিনা; এটি বর্তমানে সক্রিয় আইটেম কিনা; এবং সংখ্যা দ্বারা।

উল্লেখ্য যে উপরের উদাহরণে উল্লিখিত একাধিক ক্লাসের বরাদ্দকরণ IE6 এ সঠিকভাবে কাজ করে না । IE6 একাধিক ক্লাস মোকাবেলা করতে সক্ষম হবার একটি workaround আছে; আমি এখনো এটি চেষ্টা করে দেখিনি কিন্তু খুব প্রতিশ্রুতিশীল, ডিন এডওয়ার্ডস থেকে আসছে। তারপরে, আপনাকে এমন শ্রেণীটি সেট করতে হবে যা আপনার জন্য সবচেয়ে গুরুত্বপূর্ণ (আইটেম নম্বর, সক্রিয় বা প্রথম / শেষ) অথবা আইডি ব্যবহার করার জন্য অবলম্বন করুন। (Booo IE6!)


অনেক বার আমি বিভাগগুলির মধ্যে একটি শিরোনাম মন্তব্য সঙ্গে, বিভাগে ফাইল বিরতি দেখতে পাবেন।

কিছুটা এইরকম

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

এটি বেশ ভাল কাজ করে এবং পরে ফিরে যেতে এবং আপনি কি কাজ করছেন তা খুঁজে পেতে সহজ করে তুলতে পারে।


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

এইভাবে আপনি উভয় বিশ্বের সেরা, কর্মক্ষমতা বৃদ্ধি করে (ব্রাউজার থেকে অনুরোধ করা কম HTTP অনুরোধ) এবং উন্নয়নশীল যখন কোড উদ্বেগ পৃথকীকরণ।


আমার আগে বলেন: OOCSS মধ্যে পেতে। সাস / কম / কম্পাস ব্যবহার করার জন্য প্রলুব্ধকর, কিন্তু যতক্ষণ না ভ্যানিলা সিএসএসটি সঠিক ভাবে ব্যবহার করা হয় সাস / কম / কমাসাস কেবল জিনিসগুলিকে আরও খারাপ করে তুলবে।

সব প্রথমে, দক্ষ CSS সম্পর্কে পড়া। গুগল পেজ গতির চেষ্টা করুন এবং দক্ষ সিএসএস সম্পর্কে সউডাররা কী লিখেছেন তা পড়ে নিন।

তারপর, OOCSS লিখুন।

  • ক্যাসকেড সঙ্গে কাজ শিখতে। (সব পরে, আমরা ক্যাসকেডিং স্টাইলশীট কল )।
  • কীভাবে গ্র্যানুলারিটি অধিকার পেতে হয় তা শিখুন (উপরে-নীচে পরিবর্তে নীচে)
  • কাঠামো এবং ত্বকে আলাদা করা শিখুন (কী অনন্য, এবং এই বস্তুর বৈচিত্র কি?)
  • ধারক এবং কন্টেন্ট আলাদা কিভাবে শিখুন।
  • গ্রিড ভালবাসা শিখুন।

এটা CSS লেখার প্রতি একক বিট বিপ্লব করা হবে। আমি পুরোপুরি নবায়ন এবং এটি প্রেম।

আপডেট: SMACSS OOCSS এর অনুরূপ, তবে সাধারণভাবে কথোপকথন করা সহজ।


আমি আপনাকে Compass দেখতে সুপারিশ করবে ।







organization