глобална CSS тематична комбинация със специфични за компонента локални таблици със стилове

Създавам модулиращо html/js приложение със самостоятелни UI компоненти. Всеки от моите UI компоненти може да има свой собствен шаблонен файл (структура), js файлове (поведение) и css файлове (презентация).

  • Сега бих искал тези компоненти да имат презентация „по подразбиране“ със собствен локален css файл
  • Това не е проблем и мога да дефинирам стила по подразбиране на компонента 'local' css
  • Но освен това имам нужда и от глобална тематика, css на темата дефинира стилове за „цялото приложение“
  • Ако потребител приложи тема, всички локални стилове на компоненти трябва да бъдат заменени от css на темата

Знам, че мога да направя това, като маркирам всички стилове в глобалната тема css като „важни“. Но аз не искам да вървя по този път. Някакви други предложения как да подходим към това?


themes css stylesheet
person Hasith    schedule 11.09.2012    source източник

Отговори (3)


arrow_upward
1
arrow_downward

Ако елементите, които се стилизират, се адресират чрез едни и същи селектори, напр. #something li във всички листове със стилове, тогава листът със стилове, включен по-късно, ще презапише всичко, зададено преди това (освен ако нещо не е „важно“). Това трябва да ви позволи да използвате теми -- просто импортирайте тези теми, след като локалните стилове вече са приложени.

Не съм сигурен, че разбирам въпроса ви за местния и глобалния стил. Но стиловете за всеки компонент не трябва да пречат на глобалния стил, при условие че давате правилните имена на елементите. (Добра практика е да използвате имена на класове/идентификатори вместо дълги вложени селектори като .some-table tr td .another- table tr td { ... } както за производителност на изобразяване, така и за четливост)

С други думи, можете да напишете следното на всяка своя страница:

  1. включват основното оформление по подразбиране
  2. презапишете основата с глобално оформление
  3. отново презапишете с дефинирани от потребителя теми
person Alexander Chen    schedule 11.09.2012

arrow_upward
1
arrow_downward

Предвид начина, по който структурирате RequireJS, бих предложил следното:

  • Разрешете или изисквайте стилизиране със style.css във всеки компонент
  • Осигурете структура за теми като папка themes/, която трябва да има същата папка като папката на компонентите
  • Когато оптимизирате или изтегляте CSS, ако е дефинирана тема, изтеглете CSS от папката на темата вместо основната папка на компонента или се върнете към компонента style.css (може би направете този резервен вариант конфигурируем), ако не бъде намерен, с предупреждение.
person georgiosd    schedule 21.09.2012
comment
благодаря за съветите.. да и аз ще помисля в тази посока!!! Отделните css, които се добавят като връзки, предизвикват предизвикателство, когато правим оптимизация (минификация). Но ако добавим CSS точно като CSS текст към самата DOM структура, минитизацията работи добре. От друга страна, когато добавим CSS като текст към DOM, не можем да препращаме към изображения от местоположението на CSS файла, а от местоположението на страницата.... - person Hasith; 21.09.2012
comment
Мисля, че е рядкост и вероятно лоша практика дизайнерите да добавят вграден CSS с URL адреси - звучи като справедливо ограничение. - person georgiosd; 21.09.2012

arrow_upward
0
arrow_downward

Можете да инжектирате стиловия си елемент (за всеки компонент), като използвате атрибута scope, така че това ще засегне само DOM обхвата, към който е инжектиран, а не да започне от основния елемент (HTML).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

<article>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

Поддръжка на браузър (в момента): Chrome и FF

person vsync    schedule 14.05.2014