Pull to refresh

Comments 14

CSS модули

особенно приятно работать, так как вам не придётся использовать строки в своих классах

что? вы одну строку заменили другой, с жестким указанием имени класса

Vue также позволяет вам переименовывать объект, так что вам не нужно обращаться к ним с помощью $style в вашем шаблоне, если вы этого не хотите

вообще ничего не понятно, как можно переименовать объект, если ты напрямую ссылаешься на название поля объекта?

  1. Здесь подразумевается что снижается риск опечатки обычной строки, а поле объекта вам подскажет IDE

  2. Объект $style можно переименовать, я думаю это автор имел ввиду

сегодня как раз столкнулся с тем что нужно было поменять цсс слота внутри scoped компонента, вконце сделал prop в которое передавал цсс свойство, после прочтения статья перепишу этот код немного.

На самом деле плюс css модулей больше не в предотвращении опечаток, а в том, что:

  • можно импортировать один файл стилей в разные компоненты как обычный js объект и удобно работать с ним из кода

  • следуя из п1: переиспользование css кода без влезания в глобальную область.

  • каждый класс уникален для всего приложения, на выходе получается более компактный код

  • нет проблем с вложенными компонентами, проще следить за деревом стилей т.к на входе и выходе одинаковый css код

Ну и еще не надо заморачиваться с именованием и т.п.

Не проползет какой нибудь `color: red` в другой элемент.

PS. Мы про однофайловые компоненты vue

Классные штуки которых не хватало. Как минимум прокидывание стиля для слотов и/или чилдренов, не делая его глобальным.

Подумал уже будто я дурак, но нет - "доступные в Vue 3.2" :D

svelte из коробки инкапсулирует стили компонентов. Впрочем, оба автора вполне себе сошлись.

Веганы мира фронтенда тут, как тут) Как бы, OK, и что? Тут целая статья о том, что Вью может инкапсулировать CSS, может не инкапсулировать, и еще может инкапсулировать с подвывертами, если того требует ситуация. В чем смысл вашего комментария? Напомнить о Свелти? Хорош фреймворк, если о нем приходится напоминать, чтобы не забыли.

Ладно. Вот такая загадка (не про шашлык)
vue -> svelte -> vite

в чем фишка и как связанно?


Так и не смог понять какой самый красивый способ для моего варианта.

Есть компонент "Покупка" где формочки поля и т.д.

хотим в них менять только стили например

<buy theme="red"></style>

Внутри используем tailwind , и каждая формочка превращается в длиннющий ад:

<input class="{ "aaa": theme=="red", "bb": theme="green", "shadow": theme == "red" }"

и так у каждого контрола

А чем tailwind сильно отличается от inline-style внутри html? Как по мне - это дорога в ад, просто под другим названием и благими намерениями (красивым дизайном).

В свойство класс можно передать объект с полями - именами классов и булевыми значениями (добавить/не добавлять) (в том числе computed). Генерируйте объект и передавайте лишь его в класс вместо вот этой вот портянки в шаблоне. (Частное, не претендующее на звание истины мнение).

да интересный вариант , есть какойто пример?

Подобный пример приведен на странице документации. Я уже давно использую Composition API, поэтому мой пример будет выглядеть примерно вот так:

<template>
  <div :class="componentClass"></div>
</template>

<script lang="ts">
// Vue 2 + Vue Composition API plugin + TypeScript
import { defineComponent, computed } from '@vue/composition-api';
 
interface Props {
  disabled?: boolean;
  highlight?: boolean;
  strong?: boolean;
}
  
function setup(props: Props) {
  const componentClass = computed(() => {
    let color: string;
    
    if (props.highlight) color = 'highlight';
    else if (props.strong) color = 'strong';
    else color = 'normal';

    return {
    	disabled: Boolean(props.disabled),
      [color]: true
    };
  });
  
  return { componentClass };
}

export default defineComponent({
  props: {
    disabled: Boolean,
    highlight: Boolean,
    strong: Boolean
  },
  
  setup
});
</script>

<style scoped>
.normal {
  color: #535353;
}
  
.highlight {
  color: #30de30;
}

.strong {
  color: #303030;
}
  
.disabled {
  color: #939393;
  user-select: none;
}
</style>
Only those users with full accounts are able to leave comments. Log in, please.