আমি স্টাইলশীটে অব্যবহৃত / প্রয়োগহীন CSS বিধিগুলি কীভাবে খুঁজে পাব?


18

আমি একটি বিশাল সিএসএস ফাইল এবং একটি এইচটিএমএল ফাইল পেয়েছি। এইচটিএমএল ফাইল প্রদর্শনের সময় কোন বিধিগুলি ব্যবহার করা হয় না তা আমি জানতে চাই। এর জন্য কি সরঞ্জাম আছে?

সিএসএস ফাইলটি কয়েক বছর ধরে বিকশিত হয়েছে এবং যা আমি জানি যে কেউ এ থেকে কোনও কিছুই সরাতে পারেনি - লোকেরা বারবার নতুন ওভাররাইডিং নিয়ম লিখেছিল।

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

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

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

সম্পাদনা: এবং অকেজো নিয়মের আরেকটি ক্ষেত্রে: যখন এটি কোনও পরিবর্তন না করেই বিদ্যমানটিকে সদৃশ করে:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

আমি আনন্দের সাথে দ্বিতীয় থেকে মুক্তি পেলাম margin-left... আবার আমার কাছে মনে হয় যে সেই সরঞ্জামগুলি এ জাতীয় জিনিসগুলি খুঁজে পায় না।

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

ধন্যবাদ,


আপনি কোনও উপযুক্ত সরঞ্জামের অভাবকে সুযোগ হিসাবে নিতে পারেন: যেহেতু আপনার যা প্রয়োজন তা আপনি বোঝেন তাই আপনি এই জাতীয় সরঞ্জাম তৈরির পক্ষে সেরা ব্যক্তি হতে পারেন। আপনি ধারণাগুলি এবং কৌশলগুলির জন্য বিদ্যমান সরঞ্জামগুলির কোডটি পরিদর্শন করতে পারেন এবং তারপরে এমন কিছু তৈরি করতে পারেন যা নির্বাচকের পরিবর্তে নিয়মের স্তরে কাজ করে। খ্যাতি এবং ভাগ্যে আপনার সুযোগ! ... ভাল, সম্ভবত খ্যাতি;)
আইকনোক্লাস্ট

@ ব্র্যান্ডন: এই প্রশ্নটি কেবল "উল্লেখযোগ্য প্রশ্ন" চিহ্নটিকে আঘাত করেছে ... যাতে আপনি সঠিক হতে পারেন :-)
লিওরি

উত্তর:


8

ডাস্ট মি সেলেক্টার্স ফায়ারফক্স এক্সটেনশন

ক্রোমের বিকাশকারী সরঞ্জামগুলিতে আপনি অব্যবহৃত সিএসএস বিধিগুলি খুঁজে পেতে ওয়েব পৃষ্ঠা সম্পাদন সরঞ্জামটি ব্যবহার করতে পারেন।


দুর্দান্ত, আমি এখনই এটি পরীক্ষা করব!
লিওরি

এই সরঞ্জামগুলি কেবল অকেজো নির্বাচনকারীদের অপসারণ করতে পারে। আমি আমার প্রশ্নটি পরিষ্কার করে দিয়েছি।
লিওরি

2
@ লিওরি: আমি বিশ্বাস করি না এটি নির্ভরযোগ্যভাবে সম্ভব possible আপনার মার্জিন উদাহরণে, দ্বিতীয় মার্জিন বিধিটি অতিরিক্তহীন বলে মনে হতে পারে তবে এর উচ্চতর সুনির্দিষ্টতা রয়েছে এবং পরবর্তী নিয়মটিকে ওভাররাইড করতে পারে। উদাহরণস্বরূপ, যদি কোনও শ্রেণীর .abcআলাদা মার্জিন থাকে <a class="abc">তবে হোভারের পরিবর্তে তার মার্জিনটি পরিবর্তিত হবে I এখন এটি সম্ভবত আপনি যা চান তা নয়, তবে অবশ্যই এটি হতে পারে এবং আপনি অনুলিপিভাবে সেই সদৃশ নিয়মটি সরাতে পারবেন না।
অসন্তুষ্ট গোট

@ DisgruntledGoat: আমি একটি বন্ধ বিশ্বের একটি মামলার কথা ভাবছি: যদি এটি নির্দিষ্ট না করা হয় তবে এর অস্তিত্ব নেই। সুতরাং যদি a.abcHTML- এর কোথাও কোনও সংজ্ঞা না থাকে বা <a class="abc"/> না থাকে তবে এর অস্তিত্ব নেই ny যাইহোক, আমি ইতিমধ্যে এখানে কাজটি শেষ করেছিলাম যা আমাকে এই প্রশ্ন জিজ্ঞাসা করতে প্ররোচিত করেছিল এবং আমি শেষ করেছি অনেক হিউরিস্টিকস প্রয়োগ করে আপ। আমি ক্রোমের বিকাশকারী সরঞ্জাম চেষ্টা করেছিলাম, তবে তারা আমাকে খুব বেশি সহায়তা করেনি।
লিওরি

5

আপনি অব্যবহৃত- সিএসএস.কম এও একবার দেখতে পারেন এই সরঞ্জামটি আপনার পৃষ্ঠাগুলি অন্বেষণ করবে এবং অব্যবহৃত নির্বাচনকারীদের ছাড়াই একটি অনুকূলিত সিএসএস ফাইল তৈরি করবে


4

আমি সবসময় সিএসএস ব্যবহার পছন্দ করি । এটি ফায়ারবাগের জন্য একটি প্লাগইন এবং আসুন আপনি পৃষ্ঠাটি স্ক্যান করুন এবং দেখুন যে কোন সিএসএসের নিয়ম প্রয়োগ করা হয়নি। এমনকি এটি অটো-স্ক্যান করে এবং বেশ কয়েকটি পৃষ্ঠায় কাজ করবে।


2

অবিরাম পরীক্ষা করুন, এটি একটি নোড মডিউল।

"আনসিএসএস হ'ল একটি সরঞ্জাম যা আপনার স্টাইলশিট থেকে অব্যবহৃত সিএসএস সরিয়ে দেয় It এটি একাধিক ফাইল জুড়ে কাজ করে এবং জাভাস্ক্রিপ্ট-ইনজেকশন সিএসএস সমর্থন করে" "

https://www.npmjs.com/package/uncss

মন্তব্য করার পরে সম্পাদনা করুন:

আমার মনে হয় আপনি দুটি আলাদা জিনিস চাইছেন:

  1. অব্যবহৃত নিয়মগুলি স্বয়ংক্রিয়ভাবে সরান, এটি আপনার পক্ষে করণীয়। আমি এই সরঞ্জামটি, সিএসএস বিদায়ও করেছি, তবে আপনি যা বলছেন তা স্বয়ংক্রিয় নয়: https://www.npmjs.com/package/css-byebye

  2. স্টাইলশীটটি অনুকূলিত করুন যেখানে নিয়মগুলি মার্জ / সরলকরণ হতে পারে।

সেক্ষেত্রে আমি দুটি সরঞ্জামের পরামর্শ দেব যা এই ধরণের কাজ করে:

তারা কম বা কম একই অপটিমাইজেশন করে, কখনও কখনও অন্যটির তুলনায় একটির ভাল ফলাফল হয় এবং কখনও কখনও এটি বিপরীত হয়। এটি আপনার স্টাইলশিটের উপর নির্ভর করে। (আপনি একের পর এক দৌড়াতে পারেন: পি)

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

তারা সিএসএসও-র জন্য যা বলে তা এখানে (সম্পূর্ণ তথ্য এখানে: https://en.bem.info/tools/optimizer/csso/ )

কাঠামোগত অপ্টিমাইজেশন:

  • অভিন্ন নির্বাচকগুলির সাথে ব্লকগুলি মার্জ করা
  • অভিন্ন বৈশিষ্ট্যগুলির সাথে ব্লকগুলি মার্জ করা
  • ওভাররাইড করা সম্পত্তি অপসারণ
  • ওভাররাইড শর্টহ্যান্ড বৈশিষ্ট্য অপসারণ
  • পুনরাবৃত্তি নির্বাচকদের অপসারণ
  • ব্লকের আংশিক মার্জিং
  • ব্লকের আংশিক বিভাজন
  • খালি রুলসেট এবং এট-রুল অপসারণ
  • মার্জিন এবং প্যাডিং বৈশিষ্ট্যগুলিকে খাটো করা

মূল পৃষ্ঠাটি বিচার করে এটি নির্বাচক স্তরে কাজ করে। প্রশ্নটিতে আমি যে দুটি উদাহরণের ক্ষেত্রে উল্লেখ করেছি সেগুলি কি আসলে আইনটি সরিয়ে ফেলতে পারে?
লাইওরি

আমি আমার উত্তর সম্পাদনা করেছি। আমি CSSO ওয়েব ইন্টারফেসের মাধ্যমে আপনার প্রথম উদাহরণটি পরীক্ষা করেছি: ফলস্বরূপ: বডি {রঙ: # এফএফ; প্যাডিং: 10 মিমি} এইচ 1, পি, উল {রঙ: # 000}
কেভ

1

@ জন: দুর্দান্ত সরঞ্জাম, লিঙ্কটির জন্য ধন্যবাদ

@ লিওরি: আমি ফায়ারফক্স ওয়েব ডেভেলপার প্লাগইনটিও আপনাকে সুপারিশ করবো যা আপনাকে এলিমেন্টের নাম / বৈশিষ্ট্য প্রদর্শন করতে, রিয়েল টাইমে সিএসএস সম্পাদনা করতে (আপনার সিএসএস ফাইলে লিখবে না) যাতে ফলস ছাড়াই আপনি CSS পরিবর্তন সম্পাদনা করতে এবং পরীক্ষা করতে পারবেন আপনার সিএসএসকে 3 সেকেন্ডে কখনও সংরক্ষণ এবং আপলোড করতে হবে। + আরও বৈশিষ্ট্য লোড করে।

ফায়ারবগে প্লাগইন করা একটি খুব সুন্দর ডিওএম ইন্সপেক্টর রয়েছে যা জাভাস্ক্রিপ্ট বাছাইয়ের জন্য দুর্দান্ত।


0

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

https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015

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