@react_js
Tony22.06.2016
11:43:36
11:43:36
Потсоны, оффтоп же? Это чат про жс а не про верстку
Aleksandr22.06.2016
11:44:56
11:44:56
font-size, line-height, letter-spacing
GoogleAleksandr22.06.2016
11:45:20
11:45:20
я рандомно поставил значения, не заморчаивайся
Владимир22.06.2016
11:45:34
11:45:34
а потом когда смотришь в цсс глаза округляются от того что ничего не понятно :)
Aleksandr22.06.2016
11:47:50
11:47:50
ну не знаю, по-моему все довольно очевидно, вот строка из реального проекта text: #ffffff 900 uppercase center 21px 25px -.02em;, неужели не понятно что здесь происходит?
Владимир22.06.2016
11:47:59
11:47:59
мне кажется эта сокращалка лишняя, потому что ты в 1 месте напишешь такой блок свойств, обычно line-height в 2-3 местах при многострочном тексте исспользуется, ну а межбуквенный интервал я даже не смогу сказать где оно нужно, в тегах h1...h6 разве что только
неа
Dmitry22.06.2016
11:48:35
11:48:35
Понятно, когда написано. Непонятно, когда надо самому писать
Dmitry22.06.2016
11:48:45
11:48:45
Потсоны, оффтоп же? Это чат про жс а не про верстку
Это чат про реактжиэс.
В то, что тут обсуждается в последнее время это про подход как в react-компоненты вливать стилиВладимир22.06.2016
11:48:54
11:48:54
сентер это вертикальное выравнивание ?
Aleksandr22.06.2016
11:48:55
11:48:55
у нас дизайнеры придираются к letter-spacing, так что я очень часто его использую, например
камон, это text-align: center;
Alexey22.06.2016
11:49:37
11:49:37
Зачем ещё использовать CSS? Почему не перейти на JSS/Radium и из него генерировать необходимый CSS для браузера, как JS-бандл?
Мы же давно уже ушли от того, что веб-разработка - это верстка HTML с добавлением JS. Мы сейчас делаем полноценные приложения, где HTML - это средство отображения UI в наших JS-приложениях. CSS - тоже самое.
В этом случае у тебя получится связанный код и зависимость от технологий, т.е. отдельно цсс из библиотеки выдрать не получится. А если в один день ты захочешь поменять стек технологий, то придется выкинуть весь код в трубу.Владимир22.06.2016
11:49:40
11:49:40
у текстового блока есть выравнивание по центру ?
это попахивает странной версткой
GoogleDmitry22.06.2016
11:51:32
11:51:32
Странно, что center в стилях текста, так как оно требует еще наличие правильного отображения
Владимир22.06.2016
11:51:42
11:51:42
я про то же
Aleksandr22.06.2016
11:52:14
11:52:14
очевидно что свойство text: , отвечает за отображение текста, причем здесь маргины и паддинги
Владимир22.06.2016
11:52:21
11:52:21
это можно тогда все свойства под 1 строку
но ты же засунул туда выравнивание
так же и отступы к тексту имеют отношение
Dmitry22.06.2016
11:53:32
11:53:32
Хотя это уже больше тянет на офтоп
Aleksandr22.06.2016
11:53:56
11:53:56
это похоже на занудство
Владимир22.06.2016
11:54:18
11:54:18
а если я хочу интервал между слов еще, я в эту строку засуну его ?
нет, это похоже на то что ты сократил запись и она стала не читаема
Aleksandr22.06.2016
11:56:23
11:56:23
ты можешь определить развертку этой записи как угодно, и достаточно будет просто зачекать ее api, это займет минуту, в данном конкретном случае достаточно зайти сюда: https://github.com/jonathantneal/postcss-short#text
Владимир22.06.2016
11:59:17
11:59:17
магия
Vladimir22.06.2016
12:15:03
12:15:03
я в файлах обращаюсь к именам классов, а на сервере что у меня будет ? ничего! потому что файл не подключен в итоге разная разметка от сервера и на клиенте
Почему же? Сгенерированный js экспортирует объект, в котором имена свойств - классы, которые были, а значения - классы, которые стали, а вот это if (isBrowser) require('my.css'); нужно только для того, чтобы вебпак потом подтянул эти стили.
В компоненте рекваерится этот js и при рендеринге на сервере получаются правильные классыВладимир22.06.2016
12:18:56
12:18:56
Ничего не понял
Denis22.06.2016
12:19:34
12:19:34
В этом случае у тебя получится связанный код и зависимость от технологий, т.е. отдельно цсс из библиотеки выдрать не получится. А если в один день ты захочешь поменять стек технологий, то придется выкинуть весь код в трубу.
Это ты сейчас про PostCSS :) Я про то, что хранить стили в JSON, с которым мы работаем в JavaScript, а не отдельном формате CSS, который для JavaScript простой текст.Владимир22.06.2016
12:21:49
12:21:49
Почему же? Сгенерированный js экспортирует объект, в котором имена свойств - классы, которые были, а значения - классы, которые стали, а вот это if (isBrowser) require('my.css'); нужно только для того, чтобы вебпак потом подтянул эти стили.
В компоненте рекваерится этот js и при рендеринге на сервере получаются правильные классы
А как ты стили на элементы навешиваешь? Когда у тебя глобальный реквайрGoogleAlexey22.06.2016
12:26:53
12:26:53
Это ты сейчас про PostCSS :) Я про то, что хранить стили в JSON, с которым мы работаем в JavaScript, а не отдельном формате CSS, который для JavaScript простой текст.
Я про Radium и jss. Не все же выносят стили в отдельный файлхотя это несильно меняет, так или иначе их надо как-то собирать и как-то шарить
Владимир22.06.2016
12:29:16
12:29:16
Не надо ничего собирать, оно само стили тебе выгрузит в дом
Да и в отдельный файл ты выносишь не стили а переменные проекта
Vladimir22.06.2016
12:31:01
12:31:01
А как ты стили на элементы навешиваешь? Когда у тебя глобальный реквайр
В общем логика такая:
button.styl --> gulp --> buildCssMap.js, button.css
в buildCssMap.js:
export default {
someClass: 'build-class-name'
};
if (isBrowser)
require('./button.css')
в button.jsx:
import style from './buildCssMap';Владимир22.06.2016
12:31:13
12:31:13
Зависимость есть, так же как и у всего другого
Цсс модули требуют сборщиков, бем свои тулзы
Evgeny22.06.2016
12:32:35
12:32:35
Кто может помочь разобратся с npm? Можете объяснить как так получается, в репозитории один package.json https://github.com/callemall/material-ui/blob/v0.15.1/package.json, а при скачивании через "npm install material-ui" другой...
Владимир22.06.2016
12:33:29
12:33:29
При этом у подхода jss есть 2 преимущества, это при первом рендеринге от сервера мы получаем не все стили, а только критичные для страницы, ну и серверный рендеринг происходит без хуков
Alexey22.06.2016
12:36:02
12:36:02
а кэш?
Владимир22.06.2016
12:37:37
12:37:37
Что кеш?
Владимир22.06.2016
12:38:28
12:38:28
Как он поможет тебе в разработке?
Alexey22.06.2016
12:38:39
12:38:39
я про прод
GoogleAlexey22.06.2016
12:38:53
12:38:53
ты говорил про ктитичные для страницы стили
Владимир22.06.2016
12:38:55
12:38:55
Чем прод отличается от дев?
Владимир22.06.2016
12:39:12
12:39:12
Ну да
Ты загрузишь толькл то что на странице
Я не про фактическое отличие, а разницу в файлах которые ты кешируешь
Alexey22.06.2016
12:40:05
12:40:05
скорее всего ты загрузишь один большой толстый бандл
AdminERROR: S client not available
Alexey22.06.2016
12:40:10
12:40:10
а не только то, что есть на странице
Владимир22.06.2016
12:40:16
12:40:16
При изменении новый хешь у файла, выложил на прод он кешировался со 2 попытки
Alexey22.06.2016
12:40:26
12:40:26
или не загрузишь, раньше уйдешь
Alexey22.06.2016
12:43:14
12:43:14
получается в любом случае, пока ты не загрузишь js, пользователь будет пялить в белый экран
Alexey22.06.2016
12:45:14
12:45:14
ну т.е. ты отдаешь разметку без стилей?
GoogleAlexey22.06.2016
12:45:27
12:45:27
или какую-то минимальную заглушку?
мне просто интересно, как в этом случае решаете начальный рендер
Anton22.06.2016
12:46:50
12:46:50
Почему без стилей-то?
Ssr загрузит целиком страницу, как она должна быть
Со стилями и всем что ей там надо
Denis22.06.2016
12:47:30
12:47:30
Я про Radium и jss. Не все же выносят стили в отдельный файл
Нормальная практика выносить в styles.js
Igor22.06.2016
12:49:04
12:49:04
Нормальная. Не выносить - тоже нормалная :)
Владимир22.06.2016
12:49:06
12:49:06
У тебя жсс, он знает какие стили нужны компонентам которые на экране, потому что он находится в методе рендер, на сервере ты рендеришь разметку, жсс тебе выдает все нужные стили, вставляешь их в шаблон
Alexey22.06.2016
12:50:26
12:50:26
ну ок, я понял
т.е. в любом случае ты генерирешь бандл отдельный для страницы
Владимир22.06.2016
12:50:46
12:50:46
Нет лишних стилей которые не используются, сплит кода тебе помогает достичь минимального размера чанка, то есть отклик ты получаешь практически мгновенный
Alexey22.06.2016
12:50:49
12:50:49
со стилями
Alexey22.06.2016
12:51:14
12:51:14
т.е. из js?
Открыть в Telegram