Как избежать конфликтов имен в css

Настройка страниц с помощью JavaScript и CSS

В своем расширении вы можете настраивать функциональность Plesk и внешний вид средствами JavaScript и Cascading Style Sheets (CSS). Эти технологии позволяют изменять множество настроек интерфейса Plesk, например, добавлять новые элементы графического интерфейса и скрывать существующие элементы.

Глобальные изменения в Plesk UI

Чтобы Plesk загружал ваш код JavaScript или CSS на каждой странице, поместите этот код в файлы global.css и global.js в папке /htdocs .

Изменение выбранных страниц

Чтобы загружать код только на некоторых страницах, используйте следующую конструкцию:

if ("/smb/file-manager/list" != window.location.pathname)  return; >

Изменение только страниц расширения

Чтобы включить JavaScript и CSS только на страницах расширения, используйте следующий подход:

Создайте отдельные файлы (например, custom.js и custom.css ) и поместите их в папку /htdocs ,
Там, где необходимо, загрузите эти файлы в соответствующих контроллерах, как описано ниже:

$this->view->headScript()->appendFile(pm_Context::getBaseUrl() . 'custom.js'); $this->view->headLink()->appendStylesheet(pm_Context::getBaseUrl() . 'styles.css');

Использование различных библиотек JavaScript

Фреймворк JavaScript в Plesk является прототипом.

Если вам надо загрузить дополнительные библиотеки и использовать их глобально, на всех страницах, вы можете сделать это непосредственно в файле global.js , например:

$$("head").first().insert( new Element("script", type:"text/javascript", src:"//example.com/example.js">) );

Если для расширения просто нужна другая библиотека, включите ее следующим образом:

$this->view->headScript()->appendFile(pm_Context::getBaseUrl() . 'library.js');

или, используя полный путь:

$this->view->headScript()->appendFile('//example.com/example.js');

Использование global.js и global.css

Помните о том, что код из global.js загружается и выполняется на каждой странице Plesk. Позаботьтесь о том, чтобы добавленный персональный код не нарушил общую производительность Plesk.

Советы по разработке:

Этот подход может быть наиболее полезен для серверных расширений, функциональность которых затрагивает все или почти все страницы интерфейса Plesk.
Избегайте добавления кода, относящегося только к страницам расширения, в файлы global.js и global.css . Вместо этого используйте включение в персональные файлы.
Избегайте включения запросов к внешним ресурсам, которые слишком долго выполняются, так как это замедлит загрузку всех страниц Plesk.

Советы по тестированию:

Проверяйте производительность и время загрузки как для страниц интерфейса Plesk, так и для страниц расширения.
В global.js могут возникнуть конфликты между библиотеками JavaScript, используемыми данным расширением, и библиотеками, используемыми другими расширениями.
Проверяйте консоль браузера и журналы на наличие ошибок JavaScript.

Как избежать конфликтов имен

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

Лицензирование библиотек

Если вашему расширению требуется платная лицензия для работы, проконсультируйтесь с юристами, чтобы удостовериться, что лицензия на библиотеку JavaScript, используемую расширением, разрешает коммерческое использование – так как в противном случае возможны противоречия с лицензией на использование библиотеки и юридические последствия.

Конфликт стилей в style.css

Допустим это все пишется в файл style.css, применяется и получается конфликт c тегом body и применяется это ко всему сайту. Как сделать, чтобы стили применялись только к этим элементам и не конфликтовали между собой?

Отслеживать
задан 18 авг 2018 в 16:15
Денис Пулинец Денис Пулинец
3 2 2 бронзовых знака

Я так и не понял, что конкретно вы хотите-то? Стили написаны для body — они и применяются для body и всех его наследников. Что ещё нужно-то?

18 авг 2018 в 16:20

Если вы хотите применить стили только к выпадающим меню — вот и пишите селекторы для выпадающих меню, а не для body

18 авг 2018 в 16:29
Создайте отдельный блок для меню приравняйте его к классу и делайте что угодно
18 авг 2018 в 16:34

Это понятно, я так и сделал , но тег body в css конфликтует и получется, что 2 разных по цвету меню становится одним цветом, так как из файла style.css берется последнее значение для тега body. Как правильно прописать стили для одного меню, второго?

18 авг 2018 в 16:57

Привидите конкретный пример и без «допустим», что и где у вас работает. Потому что ничего не понятно что и где у вас перекрывает, о каких меню и фонах идет речь.

How to prevent conflicts between css rules

What is the best strategy for creating css selectors for html widgets. Those selectors should not be in conflict with child elements nor with possible general selectors.

/* this item class it is already done, has no relation with my widgets´ items and i can´t modify it*/ .item < color:red; >.my-first-widget .my-first-widget .item < color: blue; font-size:16px;>.my-second-widget .my-second-widget .item

If I insert my-second-widget inside a my-first-widget (but not within a my-first-widget .item), the items from my-second-widget will be blue (I want them to inherit color from it´s parent).
I insert my-second-widget inside a project with a rule defined as .item , the items from my-second-widget will be red (I want them to inherit color from it´s parent; not from the unrelated general item´s class).

which is the best solution for styling exportable widgets?

Solution 1 (use parent class a prefix)

 .my-first-widget .my-first-widget-item < color: blue; font-size:16px;>.my-second-widget<> .my-second-widget-item

Solution 2 (use child selectors)

 .my-first-widget .my-first-widget > .item < color: blue; font-size:16px;>.my-second-widget < color: black;>.my-second-widget > .item

With the solution2 i still have a conflict with the general .item selector.

Русские Блоги

css для решения таких проблем, как конфликты имен классов и повторяющиеся стили

CSS инженерия

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

1. Соглашение об именах: спецификация БЭМ.

БЭМ — это набор методов именования стилей css.

Другие методы именования включают: OOCSS, AMCSS, SMACSS и т. Д.

Полное название БЭМ:Block Element Modifier

Полное название БЭМ-класса: block__element_modifier , Например: banner__dot_selected, может означать: маленькая точка в выбранном состоянии на картинке карусели

Конкретные значения трех частей:

Block: Большая область на странице представляет верхний раздел, например: карусель ( banner ), макет ( layout ),статья( article ) и многое другое
element: Компоненты в области, например: изображение баннера в карусели ( banner__img ), контейнер на диаграмме карусели ( banner__container ), голова в макете ( layout__header ), заголовок в статье ( article_title )
modifier: По желанию. Обычно указывает состояние, например: левый столбец макета в развернутом состоянии ( layout__left_expand ), маленькая точка ( banner__dot_selected )

В некоторых крупных проектах, если используется номенклатура БЭМ, может быть добавлен префикс, указывающий назначение имени класса. Распространенными префиксами являются:

l: layout, что означает, что этот стиль используется для макета
c: component, что указывает на то, что данный стиль является компонентом, то есть функциональной областью
u: util, что указывает на то, что этот стиль является универсальным и похожим на инструментальный.
j: javascript, что означает, что этот стиль не имеет практического значения, он специально предусмотрен для js для получения элементов

2、css in js

Взгляните на имя, мы должны почти выйти, написать css на js. Он превращает css в объект в js, так что вы можете в полной мере использовать преимущества языка js. например:

 const styles =  width: "400px", height: "500px", backgroundColor: "#ccc", >

Когда css станет объектом, конфликтов имен не возникнет.

css в js имеет следующие преимущества:

Нет возможности конфликта: Поскольку имени класса нет вообще, нет абсолютно никакой возможности конфликта имен классов
Более гибкий: Вы можете в полной мере использовать гибкие возможности языка JS и использовать различные движения для работы со стилями.
Более широкое приложение: Пока поддерживается язык js, может поддерживаться css в js. Поэтому он очень полезен при разработке мобильных приложений на языке JS, поскольку мобильные приложения могут не поддерживать css.

Но с css в js тоже есть проблемы:

Письмо неудобство: Написание стилей, особенно общедоступных, не очень удобно.
На страницу добавлено много избыточного контента: При работе с css в js на странице стиль часто добавляется к атрибуту стиля элемента, что значительно увеличивает встроенный стиль элемента, и может быть много повторений, что затрудняет чтение окончательного кода страницы.

Итак, как использовать css в js, мы можем применить его к странице с помощью различных методов, которые мы изучили, таких как написание цикла, использование фреймворка и т. Д., Если он поддерживает js, его можно использовать. И vue, и React поддерживают css в js

3、css module

Как следует из названия, модуль css должен записывать css в разные файлы и, наконец, объединять их в один файл с помощью инструмента сборки webpack. Несколько разных файлов имеют одно и то же имя класса, и после слияния нет конфликтующего имени класса.

В webpack мы используем css-loader для обработки css файлов, который реализует идею модуля css (использование css-loader описано в общих плагинах webpack). Чтобы включить модуль css, вам необходимо настроить css-loader modules Установить как true 。

css module принципОчень просто, css-loader преобразует имя класса в стиле в уникальное хеш-значение. Поскольку значение хеш-функции создается на основе пути к модулю и имени класса, разные модули css, даже если они имеют одинаковое имя класса, после преобразования будут иметь разные хеш-значения.

Следовательно, после того, как css-loader использует модуль css, имя класса исходного кода отличается от окончательного сгенерированного имени класса, и разработчик знает только имя класса в исходном коде, написанном им самим, и не знает, каково окончательное имя класса, css -loader экспортирует соответствующие отношения между ними, но также включает много другой информации. Загрузчик стиля удаляет другую информацию и показывает только имя класса и соответствующее значение хеш-функции.

/*----------index.css----------*/ body background-color: #ccc; > h1 color: #f40; > :global(.yellow) color: yellow; > .red color: red; > /*----------index.js----------*/ import style from "./index.css" console.log(style) let h1 = document.getElementsByTagName("h1")[0] h1.className = style.red /*----------webpack.config.js----------*/ modules: rules[  test:/\.css$/, use:["style-loader",  loader:"css-loader", options:modules:true> > ] > ] >

Объяснение：

Имя глобального класса: Некоторые имена классов являются глобальными и статическими, и их не нужно преобразовывать. Вам нужно только использовать специальный синтаксис в позиции имени класса:

:global(.main) . >

Имя локального класса: По умолчанию используется имя локального класса local, которое является именем класса, которое может вызывать конфликты и будет преобразовано модулем css.

Поскольку после того, как css-loader преобразует код css, он передается в style-loader для специальной обработки.Sytle-loader использует фрагмент js-кода для добавления стиля в файл стиля. Что нам обычно нужно, так это сгенерировать файл css. Итак, есть библиотека mini-css-extract-plugin , Эта библиотека предоставляет плагин и загрузчик:

plugin: Отвечает за создание файлов css
loader: Отвечает за запись содержимого создаваемого файла css и экспорт объекта стиля после открытия модуля css.

const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports =  module:  rules: [  test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"] > ] >, plugins: [ new MiniCssExtractPlugin( filename:"[name].[hash:5].css" >) // Отвечает за создание файла css, name - это имя чанка ] >

среди них «css-loader?modules» Эквивалентно

Читать:

Как соединить строки в sql