كيفية تبسيط رمز CSS
https://stackoverflow.com/questions/3610649
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أعمل مع جزء موجود من رمز CSS يبدو مثل هذا (مقتطف من مجموعة أكبر بكثير من التعليمات البرمجية):
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */
}
/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
float:left;
position:relative;
overflow:hidden;
text-align:center;
width:102px;
height:150px;
margin:0 1px 0 0;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
height:auto;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
height:auto;
width:90px;
}
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
width:102px;
}
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0;
color:#555;
font-weight:normal;
text-transform:uppercase;
font-size:100%;
line-height:1.0em;
z-index:1;
}
/* offset for mini labels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
margin-top:20px;
font-size:85%;
}
/* label cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
margin-top:0;
font-size:100%;
}
/* the value displayed in the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_value,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
position:absolute;
top:45px;
left:0;
width:100%;
margin:0;
color:#fff;
font-weight:bold;
font-size:28px;
line-height:1.0em;
z-index:1;
}
/* offset for mini value */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
margin-top:15px;
font-size:24px;
}
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
margin-top:3px;
font-size:20px;
font-weight:normal;
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
filter: alpha(opacity=0);
}
/* value cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
margin-top:0;
font-size:28px;
}
/* range values smaller */
.apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
margin-top:7px;
font-size:15px;
}
.apl_widget_fourLevel .apl_widget_value a {
color:#fff;
}
/* supplemental value beneath the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
position:absolute;
bottom:0px;
left:0;
width:100%;
color:#0072ad;
font-weight:bold;
font-size:28px;
z-index:1;
}
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
color:#0072ad;
}
/* low values will be lighter color */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
color:#30a2dd;
}
/* the image container element */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
overflow:hidden;
width:100%;
height:135px;
position:relative;
}
/* the panel image itself */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
position:absolute;
top:0;
left:-5px;
margin-top:-150px;
}
/* Individual Level image offsets */
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
left:-5px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
left:-105px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
left:-205px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
left:-305px;
}
/* mini panel offsets */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
margin-top:-300px;
margin-left:-6px;
}
/* reset image offset via margin for highlighted/selected style */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
margin:0;
}
مشكلتي الرئيسية في هذا هي التعقيد: كل قاعدة لديها 3-5 محددات على ذلك ، مما يجعل من الصعب حقًا معرفة القاعدة التي تنطبق. هناك 25 قاعدة هنا لتصميم أربعة أزرار مع النص. لا يمكن أن يكون بهذه الصعوبة!
بعض الخلفية: هذه CSS تقوم بتصميم عنصر واجهة مستخدم يعرض أربع صور نقطية ، يتم تحديد أحدها ، من صورة نقطية واحدة باستخدام العفاريت CSS. تأتي الصور غير المحددة من صف واحد من صورة نقطية كبيرة والصورة في الحالة المحددة تأتي من صف آخر. يتم وضع الصورة المحددة في صندوق أوسع وأطول من صناديق الصور غير المنتجة.
فهل هناك برنامج من شأنه أن يبسط هذا على شيء يمكن إدراجه فيه؟ هل هناك أداة يمكنها تحديد القيم غير الضرورية لأنها يتم استبدالها بمختارين أكثر تحديدًا؟ هل هناك أفضل ممارسات للتعامل مع CSS بحيث لا تحصل على مسارات انتقائية غير ضرورية؟
تحديث: 2010-08-31 12:25
لذلك نظرت إلى أقل كوسيلة لتصور رمز CSS. ولأن الكود الخاص بي ليس أقل ، نظرت إلى أعلى CSS2less. فيما يلي مقتطف لما ينتجه CSS2Less على الكود المعني:
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
.apl_widget_level.apl_widget_level1 {
.apl_widget_panel {
img {
left:-5px;
}
}
}
.apl_widget_level.apl_widget_level2 {
.apl_widget_panel {
img {
left:-105px;
}
}
}
.apl_widget_level.apl_widget_level3 {
.apl_widget_panel {
img {
left:-205px;
}
}
}
.apl_widget_level.apl_widget_level4 {
.apl_widget_panel {
img {
left:-305px;
}
}
}
....
}
إذن هذا هو الشيء: APL_WIDGET_LEVELX فريدة من نوعها بالفعل. أعتقد أن أداة جيدة يمكن أن تولد هذا:
img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
....
}
تعليقات مماثلة للعناصر المحددة/غير المحددة.
يعجبني أين تسير الإجابات ولكني أبحث عن أدوات لجعل حياتي أسهل. رمز CSS الكامل في هذا الملف هو 2500 سطر والجناح بأكمله هو 11000 سطر.
تحديث: 2010-09-01 09:50
هذا ما حولته باليد:
ul.apl_widget_content {
width: 492px;
height: 140px;
position: relative;
}
ul.apl_widget_content li {
background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
list-style: none;
display: inline;
position: absolute;
text-align:center;
text-transform:uppercase;
}
#apl_widget_level1 {
left:5px; top: 0px;
background-position: -13px -300px;
width: 86px; height: 133px;
}
#apl_widget_level2 {
left:105px; top: 0px;
background-position: -113px -300px;
width: 86px; height: 133px;
}
#apl_widget_level3 {
left:205px; top: 0px;
background-position: -213px -300px;
width: 86px; height: 133px;
}
#apl_widget_level4 {
left:305px; top: 0px;
background-position: -313px -300px;
width: 86px; height: 133px;
}
#apl_widget_level1s {
left:5px; top: 0px;
background-position: -5px 0px;
width:102px; height: 133px;
}
#apl_widget_level2s {
left:105px; top: 0px;
background-position: -105px 0px;
width:102px; height: 133px;
}
#apl_widget_level3s {
left:205px; top: 0px;
background-position: -205px 0px;
width:102px; height: 133px;
}
#apl_widget_level4s {
left:305px; top: 0px;
background-position: -305px 0px;
width:102px; height: 133px;
}
div.apl_widget_label {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.selected .apl_widget_label {
padding-top: 15px;
}
div.apl_widget_value {
font-size:24px;
margin-top:10px;
}
.selected div.apl_widget_value {
margin-top:15px;
}
.apl_widget_value a {
text-decoration:none;
color:#FFF;
}
سابقا 175 سطر. الآن 75 سطر. معظم التعليمات البرمجية (40 سطر) يفعل CSS Spriting.
تحديث 2010-09-01 11:30
يشبه HTML الآن:
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div class="apl_widget_label">Level </div>
<div class="apl_widget_value"><a href="#">1</a></div>
</li>
<li id="apl_widget_level2">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">2</a></div>
</li>
<li id="apl_widget_level3s" class="selected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">3</a></div>
</li>
<li id="apl_widget_level4">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">4</a></div>
</li>
</ul>
بدا HTML سابقًا مثل:
<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
<div class="apl_widget_content">
<div class="apl_widget_level apl_widget_level1 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">1</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level2 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">2</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">3</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level4 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">4</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
</div>
</div>
المحلول
بناءً على HTML المنشور ، أقترح اتباع التغييرات:
الطبقات الداخلية apl_widget_label و apl_widget_value غير ضرورية ويمكن استبدالها ببساطة بعناصر فريدة (فريدة من نوعها داخل li). هذا قد يجعل المختارين أطول قليلاً ، ولكن منظم بشكل أفضل وأكثر قابلية للقراءة. أيضا div حول الرابط غير ضروري حيث يمكن تصميم الرابط مباشرة.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div><a href="#">1</a>
</li>
...
مع
.apl_widget_content li div {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.apl_widget_content li.selected div {
padding-top: 15px;
}
.apl_widget_content li a {
font-size:24px;
margin-top:10px;
text-decoration:none;
color:#FFF;
display: block;
}
.apl_widget_content li.selected a {
margin-top:15px;
}
يمكنك أيضا نقل top, width و height الخصائص في قواعد المستوى إلى ul.apl_widget_content li(.selected) قواعد:
ul.apl_widget_content li {
...
top: 0px;
width: 86px;
height: 133px;
}
ul.apl_widget_content li.selected {
width:102px;
}
#apl_widget_level1 {
background-position: -13px -300px;
}
سيكون من الرائع أن تتخلص من معرفات "المستوى المحدد" (تلك التي تنتهي s) ، لكن لا يمكنني التفكير في طريقة معقولة لا تزال تدعم IE6.
أنا فقط أرى أنك قمت بتعيين li ل display: inline مع الحفاظ على عناصر كتلة insde لهم. ستحتاج إلى توخي الحذر من ذلك ، لأنه على الرغم من كونها CSS الصحيح التقني لا يتم تعريفها بالضبط. قد تفكر display: inline-block أو float: left في حين أن.
نصائح أخرى
فيما يلي مجرد تعليقات ؛ من الصعب إعطاء إجابات محددة على أسئلة مثل هذه ، esp. عندما لا يتوفر هيكل HTML.
أول ما حصل علي حقًا هو أسماء الطبقة الطويلة. عندما يكون لديك الكثير من التكرار داخل اسم من الفصول الدراسية ، أعتقد أنك تفعل شيئًا خاطئًا. أسماء مثل
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
يجب تقصيرها حقًا إلى (شيء مثل):
.apl_widget .fourlevel .panel img
خاصة عندما يتكرر المحددون في الأساس بنسبة 90 ٪ ، مثل
.apl_widget_level.apl_widget_level1
لا يوجد أي جدوى لهذا! في CSS ، يضمن التتالي الميراث ، لذا فإن إضافة بادئة أيضًا جميع أسماء الفصول الدراسية ضرورية. بالتأكيد إذا وصلت إلى نقطة الفهرسة أسماء صفك ، حان الوقت لتبديلها idق ، مثل
#level1
قد يبدو الأمر صغيرًا ، لكنه يجعل CSS أكثر قابلية للصيانة إذا كان لديك محددات مضغوطة وأقل تكرارًا - على الأقل لن تقضي الكثير من الوقت في المسح من خلال المحددات.
إذا كان هيكل HTML للعناصر واجهة المستخدم هو نفسه في جميع أنحاء الكود ، فيمكنك بالفعل تبديل بعض الفئات للعناصر. بالطبع سيقلل من قابلية إعادة استخدام الأسلوب ، ولكن بالنظر إلى أن الأدوات المصغّرة لا تشارك في الغالب نفس الهيكل وتصميم بقية الصفحة ، يجب أن يكون من الممكن أن يكون لأساليب عنصر واجهة مستخدم أبسط على الفصول الدراسية. المحددون مثل (قل)
.profile img
بالتأكيد سيكون أفضل من مجرد إعطاء ذلك img الفصل - من الواضح على الفور ما تفعله ، وسهلة الحفاظ عليها في نفس الوقت.
شيء آخر قد ترغب في القيام به هو رمز فقط للحالات الخاصة, ، مثل هذه الحالة المبسطة للغاية
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
أيضًا ، قم بإزالة الفئات المتكررة التي تبقى كما هي في كل حالة. مرة أخرى ، استخدم التتالي إلى إمكاناته الكاملة.
3-5 محددات ماكس ليست غير عادية. 3-5 ل كل واحد منهم ، رغم ذلك. يجب أن ينتقل محددات CSS بشكل منطقي من البسيطة إلى المعقدة ، حيث تتم إضافة المزيد من الحالات. وبالتالي ، حاول العثور على قاعدة القطعة ، وتحديد الافتراضي ، وترميز طريقك.
مقتطف الكود نفسه ليس كذلك جدا سيء باستثناء إدراج الكثير من أسماء الطبقة الطويلة للغاية. إعادة الكتابة من الأسفل إلى الأعلى على الرغم من أن يمكن أن تؤدي في كثير من الأحيان إلى تحسينات ، esp. إذا تغيرت متطلبات المشروع منذ آخر مطور (لم نعد نحتاج إلى دعم IE6 بعد الآن ، يا Hurray!) ولكن مرة أخرى ، دون رؤية الهيكل ، من الصعب تقديم حلول نهائية.
إذا كان الأمر يتعلق فقط بأربعة أزرار ، فسأقوم بسحب الصفحة في متصفح حديث واستخدم مجموعة أدوات تطوير (Firebug in Firefox ، Dragonfly في Opera ، وأدوات مطور WebKit في Safari/Chrome) لتفقد الأزرار المعنية ومعرفة ماذا الأنماط الفعالة على كل منها.
قد ترغب في الذهاب هذه المقالة لم أقرأ طويلاً ، فهي تتمتع بنظرة عامة جيدة حقًا عن Pro's و Con's لتنظيم CSS الخاص بك. سألقي نظرة على الجزء السفلي من المقالة ، ولديه بعض الروابط إلى مزيد من المعلومات.
من نظرات الأشياء التي يبدو أن أساليب واجهة المستخدم الخاصة بك تبدو وكأنها في الخارج مع التهاب الفصل ، ولكن على الأقل موثقة ، لا يمكنني حساب عدد المرات التي رأيت فيها فصول CSS غير الموثقة.
أعتقد أنك بحاجة إلى تغيير اسم Class الخاص بك ، أرى أنك تستخدم ".APL_WIDGET_LABEL" لكل شيء تقريبًا وتصميم العنصر اعتمادًا على المختارين.
علي سبيل المثال:
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
لماذا لا تنشئ فئة أخرى تسمى "Mini-Display" ثم سيكون عنصرك مثل:
<div class=".apl_widget_label mini-display">..</div>
وسيكون CSS الخاص بك:
.mini-display{..}
إذا كنت لا تحب ذلك ... لقد رأيت بعض الأشخاص الذين يخلقون فصولًا مثل هذا
<div class="left margin-auto big red ...">..</div>
حيث يغير كل فئة شيئًا محددًا على العنصر (أي اليسار => تعويم: يسار ؛). ولديهم مثل مكتبة الفصول التي يستخدمونها دائمًا.
