Использование CSS Namespace

Я нуб в CSS и HTML, так что терпите меня за этот вопрос.

Я интегрирую веб-приложение с нашим существующим приложением. Они определили некоторые правила CSS, что противоречит нашему приложению.

Моя проблема: есть ли хороший способ выделить правила CSS, которые будут использоваться на каждой странице приложения? Я попытался взглянуть на пространство имен CSS, кажется, много доработано, так как я должен добавить каждый элемент тега к пространству имен.

Обновление: я пытаюсь интегрировать приложение на основе Meteor в другое приложение на основе Meteor, теперь я не хочу, чтобы смесь 2 css two.

Источник

4 ответа

Решение

Я остановился на следующем решении, которое сработало для меня.

Для другого приложения, которое я интегрирую, я превратил все его тело в контейнер и дал ему класс.

В макете другого приложения,

<!-- Another application body layout-->
<body>
<div class="another-app-container">
  <!-- Here goes whole layout of page -->
   <p  class='someClass' > ....
     <div class='myClass'> </div>

   </p>
</div>

</body

В CSS этого приложения я применил следующее правило CSS:

    .another-app-container * .someclass{
    // CSS rule goes here
    }
   .another-app-container * .myClass {
    // CSS rule goes here
    }

Красота CSS, которую я здесь получил, заключается в том, что '*' применяет правила CSS, даже если в нем много вложенных элементов CSS.

Таким образом, он отделил CSS для моего собственного от другого приложения

Источник

Примените класс к телу для каждой страницы / модуля / приложения. Таким образом, ваш текущий CSS будет работать, и вы можете переопределить его, добавив новый CSS в класс body.

Источник

Пространство имен CSS - единственный хороший вариант. Вы можете очень легко редактировать все правила, используя функцию редактирования верхнего текста.

Источник

В зависимости от размера вашего приложения, очень грязное и быстрое решение состоит в том, чтобы добавить правила, которые вам нужны, для разделения файлов (и применять их соответствующим образом).

например

для main.html у вас есть main.css
about.html, есть about.css

однако, это довольно плохая практика, поскольку вы разделяете все ваши запросы по существу на одну и ту же информацию...

То, что вы МОЖЕТЕ сделать, это использовать язык предварительной обработки CSS в вашей среде разработки, такой как SASS, SCSS или LESS, где вы можете абстрагировать множество конкретных страниц в модульные файлы, такие как, main.sass, about, sass и т. Д., Которые будут скомпилирован в один файл main.css

Еще одна вещь, которую следует учитывать, это то, что CSS - это то, как классы, идентификаторы и псевдо-селекторы влияют на специфику правил, которые могут быть применены.

т.е.

!important > #id > .class > html_element

Вот отличная вступительная статья о специфике CSS для вас ~ http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Источник
Другие вопросы по тегам