В
Почитайте в normalizer описание или на хабре посмотрите статьи - нормализация это доопределение стилей до общего, сброс - это снос всех стилей под 0 а потом переопределение новых стилей
Size: a a a
2021 May 06
PН
Ну суть у этого одна и та же - глобальное определение стилей. Такой файл не отвечает принципу единой ответственности, потому что это god файл, который знает про все сущности. Это четкий критерий хрупкости архитектуры. Но если ты делаешь не библиотеку, а просто проект, то можно делать как тебе нравится, просто у этого могут быть проблемы с масштабированием, с контролем сущностей, с частым выпадением из кэша после обновления стилей для эксперементальных компонентов
В
По такой логике конфиг программы тоже вносит хрупкость а о БД и вообще говорить не приходится - нельзя так прямолинейно все к одному подводить - тема должна быть глобальной как для библиотеки так и для проекта как и наличие компонента кнопка - он тоже делает систему хрупкой - не будет его - большинство компонентов сломаются (слегка усиливаю гиперболу :) )
А глобальный файл темы наоборот отвечает принципу ежиной ответственности - он отвечает за параметры темы
А глобальный файл темы наоборот отвечает принципу ежиной ответственности - он отвечает за параметры темы
PН
Глобальный конфиг да, вносит хрупкость. Это общеизвестная проблема. Поэтому конфиг в хороших системах поставляется в контейнерах.
Кнопка это не глобальный объект. Она используется в компонентах как зависимость, реализация которой может быть подменена
Кнопка это не глобальный объект. Она используется в компонентах как зависимость, реализация которой может быть подменена
PP
Дан следующий инпут:
<input id="elem" type="email">
Дана также кнопка. По нажатию на кнопку выведите на экран содержимое атрибута type указанного выше инпута. Я решил так <!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let p1=document.querySelector('#elem1');
let elem=document.querySelector('#elem2');
elem.addEventListener('click',function(){
p1.innerHTML*=p1.innerHTML;
})
</script>
</body>
</html> Пока не работает
<input id="elem" type="email">
Дана также кнопка. По нажатию на кнопку выведите на экран содержимое атрибута type указанного выше инпута. Я решил так <!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let p1=document.querySelector('#elem1');
let elem=document.querySelector('#elem2');
elem.addEventListener('click',function(){
p1.innerHTML*=p1.innerHTML;
})
</script>
</body>
</html> Пока не работает
PP
Переслано от PHP PROGRAMMIST⬤👍3🅰️...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let p1=document.querySelector('#elem);
let elem=document.querySelector('#elem2');
elem.addEventListener('click',function(){
p1.innerHTML*=p1.innerHTML;
})
</script>
</body>
</html> ошибка Uncaught SyntaxError: '' string literal contains an unescaped line break
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let p1=document.querySelector('#elem);
let elem=document.querySelector('#elem2');
elem.addEventListener('click',function(){
p1.innerHTML*=p1.innerHTML;
})
</script>
</body>
</html> ошибка Uncaught SyntaxError: '' string literal contains an unescaped line break
PP
Переслано от PHP PROGRAMMIST⬤👍3🅰️...
Дан следующий инпут:
<input id="elem" type="email">
Дана также кнопка. По нажатию на кнопку запишите в атрибут type значение submit.
Я сделал так , но атрибут не поменялся <!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let elem=document.querySelector('#elem');
let elem2=document.querySelector('#elem2');
elem.addEventListener('click',function(){
elem.innerHTML='submit';
console.log(elem.type);
})
</script>
</body>
</html>
<input id="elem" type="email">
Дана также кнопка. По нажатию на кнопку запишите в атрибут type значение submit.
Я сделал так , но атрибут не поменялся <!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="elem" type="email">
<button type='submit' id="elem2">Отправить</button>
<script>
let elem=document.querySelector('#elem');
let elem2=document.querySelector('#elem2');
elem.addEventListener('click',function(){
elem.innerHTML='submit';
console.log(elem.type);
})
</script>
</body>
</html>
VH
Ещё один офтопик и будет бан
VH
Приведите примеры, когда это надо на практике
В
VH
Что из этого вам реально понадобилось на практике и при этом вы не переопределили это в своих компонентах на проекте?
В
да использовал многие вещи (посмотрите код - там много полезного), для нормализации общего вида и не переопределял в стилях - в стилях только то что нужно реализовать по дизайну: добавить рамку, цвет, поведение
В
это после reset нужно еще переопределять что-то в стилях - тут только приводим все к общему виду и поведению и в стилях - только стилизация
В
Большой плюс этого пакета что сообщество постоянно следит за багами и разницей в стилях и правит их - у нас как у команды голова занята только нашим дизайном
2021 May 07
PP
Как тогда мне учить?
VH
Найдите подходящее сообщество
EB
css-in-js мне субъективно не нравится как подход. css-modules интересно, но, кажется, это уже не про
@bem-react/*. Хочу оставаясь в рамках этих технологий решить задачу. В Яндексе же как то получается разделять платформы пользуясь этими пакетами. 😀A
Привет! Я так понял, themekit нельзя скормить свои кастомные платформы?
Хочется получить некий гибрид платформ + медиа запросов: desktop он то разный, одно дело 1200, другое 1920. Типа, как пример заголовок:
typo.tokens@xs
headline-h1: 32px
typo.tokens@sm
headline-h1: 48px
typo.tokens@md
headline-h1: 56px
typo.tokens@lg
headline-h1: 64px
typo.tokens@xl
headline-h1: 72px
И далее из этого получаем набор файлов с css переменными. Которые подключаются под нужную платформу и/или переопределяются через медиа-запросы.
Хочется получить некий гибрид платформ + медиа запросов: desktop он то разный, одно дело 1200, другое 1920. Типа, как пример заголовок:
typo.tokens@xs
headline-h1: 32px
typo.tokens@sm
headline-h1: 48px
typo.tokens@md
headline-h1: 56px
typo.tokens@lg
headline-h1: 64px
typo.tokens@xl
headline-h1: 72px
И далее из этого получаем набор файлов с css переменными. Которые подключаются под нужную платформу и/или переопределяются через медиа-запросы.
PP
можно ссылку