Названия для класса школы
Варианты названий для младших, средних и старших классов с уклонами и без
Придумывать названия и девизы нас учат с самых ранних лет. Уже в школе детям задают назвать и свой класс, и его уголок, и команды класса. Неохота? Нет проблемм!
Название для средних и старших классов должно быть современным, прикольным и в меру агрессивным. Вот список вариантов названий: «Кластер», «Антимуму», «Одноклассники.ру», «iКласс», «Чёрная молния», «Ля-Тополя» (для класса с углубленным изучением французского), «Электровеник», «Лес рук», «Тектоник», «Портфеленосители».
Названия для младших классов школы: «Бурундуки», «Медвежадины», «Броненосцы», «Капитошка». Школьный класс под буковой «В» можно назвать «Вареники» (забавно, если два других класса параллели «А» и «Б» называются, соответственно «Эники» и «Бэники»).
Названия для художественного класса: «Аквадрель», «Пикассо у кассы», «Мольберт Энштейн», «Галерея кадров», «Двадцать шесть кистей», «Общество станкового примитивизма».
Названия для математического класса: «Микропрофессоры», «Уравнение с двадцатью двумя неизвестными», «Синус-шминус», «Приколисты в третьей степени», или даже «Логорифмические лентяи». Девиз класса с таким названием «Стремимся к пяти».
Бесконечное количество Красивых и оригинальных названий математического класса можно получить, комбинируя названия греческих букв и цифр: «ТетраОмегаАльфа», «КсиТауОмега», «ГаммаРо», «ПентаЭпсилонПи», «ДельтаФи», «ПсиОмегаГамма».
Еще один вариант названия школьного класса с математическим уклоном «Делённые на ноль». Девиз – «Мы своей добьемся цели! Если что – на ноль разделим!». Больше названий для математических команд, кружков и стенгазет можно найти тут.
Названия для экономического класса: «Начальный капитал», «Дети Доу Джонса», «МММ», «5 копеек», «Челси».
Названия для спортивного класса: «Губернаторы Калифорний», «Третий дан по макраме», «Баскет-голд», «Скоро сборы», «Три богатыря», «Лыжебоки», «Волейболеум».
Интересное название для класса спортсменов «Ближайший резерв». Для класса с таким названием есть отличный девиз – «Сегодня у тренера на уме, завтра у Губерниева на языке!».
Так как обычно название класса неразлучно соседствует с девизом, мы подготовили для вас пару таких комплектов.
Название класса (московской школы): «Торнадо»
Девиз: «Мы – веселое торнадо! Все снесем в пределах МКАДа!»
Название класса: «Кластер». Девиз: «Кластер» покруче чем суперблокбастер!
Еще девизов для класса вы можете найти тут.
Кроме названий самих классов, порой требуется как-то назвать команду класса для спортивных соревнований или игры КВН.
Примеры прикольных названий для спортивной команды класса: «Сестры Березуцкие», «Тяни-толкай», «48 приседаний», «Хочим в Сочи», «Горка мышц», «Штанга втроем», «Кекс-инструкторы» (чтобы все переспрашивали)
Еще одна случающаяся потребность – название уголка класса. Для этого у нас тоже есть несколько оригинальных вариантов названий: Стенгазета «Правда, правда!», «Точка с запятой», «Седьмой «Б» Times», «ЖиШи Дайджест».
На этом пока все. Веселых вам школьных денёчков!
Название и девиз класса
В нем размещается информация:
— название класса;
— девиз класса;
— достижения;
— дежурство и другая информация.
Придумывать названия и девизы не сложно, но можно воспользоваться уже готовыми идеями названий команд и девизов.
Идеи названий команд и девизов класса
Команда «Мечтатели»
Девиз:
Мечтать! Надо мечтать
Детям единого племени!
Есть воля и смелость у нас
Стать героями нашего времени!
Команда «Светлячки»
Девиз:
Сияем ясным светом
Зимой, и летом.
Хоть свет наш слаб и мы малы,
Но мы дружны и тем сильны!
Команда «Апельсин»
Девиз:
Мы все дольки апельсина:
Мы дружны и неделимы!
Команда «Удача»
Девиз:
Всем всегда нужна удача,
Только так, а не иначе!
Команда «Лучики»
Девиз:
Нам лучики светят, сияют
Учиться и жить помогают.
Команда «Следопыты»
Девиз:
Учись писать,
Учись считать,
Важнее нет науки,
Тот, кто стремится всё узнать,
Совсем не знает скуки!
Команда «Новое поколение»
Девиз:
Мы – молодые, сильные, здоровые,
У нас мечты, идеи, мысли – Новые.
Команда «Прометей»
Девиз:
Зажжем огонь в сердцах людей,
Как это сделал Прометей!
Команда «Искра»
Девиз:
Гореть самим и зажигать других.
Команда «Солнышко»
Девиз:
Мы солнечные дети,
Мы лучше всех на свете!
Команда «Радуга»
Девиз:
Мы, как радуги цвета,
Неразлучны никогда.
Команда «Дети 21 века»
Девиз:
Мы дети 21 века,
Всегда и везде мы добьёмся успеха!
Мы лучшими будем, победу добудем,
А всех кто поможет, вовек не забудем!
Команда «Дружба»
Девиз:
Давайте смеяться, давайте дружить,
Давайте учиться и весело жить!
Команда «Охотники за удачей»
Девиз:
Нас преследует удача,
Только так, а не иначе!
Команда «Интернет»
Девиз:
Мы команда INTERNET,
Круче нас на свете нет!
Команда «Радуга»
Девиз:
Мы, как радуги цвета,
Неразлучны ни¬когда.
Команда «Улыбка»
Девиз:
Жить без улыбки — просто ошибка,
всюду улыбки — повсюду добро.
Команда «Алые паруса»
Девиз:
Плыви всегда, плыви везде
И путь найдешь к своей мечте!
Команда «Оптимисты»
Девиз:
Песни петь, шутить всегда,
Не падать духом никогда!
Команда «Отважные ребята»
Девиз:
Мы отважные ребята,
За себя мы постоим.
Всё мы знаем, всё мы видим,
Слабых тоже защитим.
Как правильно назвать класс
Допустим есть базовый шрифт, который задан для body размером 14px. Есть ссылки, которые в большинстве случаев аналогичного размера, но встречаются места где такие же ссылки, отличаются только размером, т.е не 14px, а 12 или 16. Вопрос, как более правильно им давать класс? ведь надо давать класс из-за одного свойства всего лишь. Правильно ли дать класс .fs12 / .fs16? или link-small / link-large? И второй вопрос, лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс? к примеру так .block-parent a
Отслеживать
задан 22 июл 2021 в 23:02
15 3 3 бронзовых знака
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Однозначно ответить нельзя. Есть разные подходы и ситуации. Обычно есть какой-то компромисс и решение не идеальное с разных точек зрения. Бывает есть гайдлайны и там описаны все размеры и где они применяются, оттуда можно выделить классы. Чаще всего, особенно на фрилансе, всё это на усмотрение верстальщика, и выбор не сходится у разных людей. Из-за разного опыта или разной аргументации. Может быть например так:
- По умолчанию ссылка может брать размер от окружающего текста. Поэтому не следует задавать ссылкам размер для всего документа.
- Если по дизайну можно выделить постоянно повторяющийся размер текста, то можно сделать класс для него, не только для ссылок. Назвать лучше не числом, а словом типа text-small или text-middle , потому что число может измениться в будущем или на других размерах экранов (мобильники/телевизоры) в медиазапросах для данного класса. Вместо link-small обычно лучше text-small . Класс fs16 из вашего вопроса — это точно не правильно. Потому что вы через месяц или другой человек могут не понять что это значит.
- Если у ссылки можно определить какое-то предназначение, то лучше сделать класс предназначения, и в нём уже описывать особенности. включая размер. Например для тегов под постом класс post-tag и в нём размер.
- Если блок ссылок имеет какое-то особое назначение, например блок тегов, то селектор со стилем ссылки может отталкиваться от родителя, как вы описали в конце вопроса.
Отслеживать
ответ дан 23 июл 2021 в 0:04
user347472 user347472
Все перечисленные варианты правильны, т.к. все они валидны с точки зрения синтаксиса CSS. а других правил не существует.
Говоря не о правильности, но о хороших практиках в верстке. и не только в контексте вопроса, а о том что касается именования в целом:
- Читать имена-с-разделителями гораздо легче, чем именабезразделителей , и особенно когда в именах используются числа
- Имя утилити-класса логически должно соответствовать общему назначению, оно не должно быть привязано по смыслу к каким-то частным случаям применения
(что если нужно будет еще и параграфу уменьшить шрифт. добавим ему нелогичный класс .link-small , или внесем еще один класс .paragraph-small ? Все это как-то неуклюже и неудобно. гораздо лучше, когда класс изначально назван как .font-small , например) - Имена по сущности, должны описывать именно сущность (например, .receipt-link ), а не ее визуальные свойства / зависимость / тип элемента / и т.д.
(насчет типа спорно, т.к. есть распространенное мнение что например .link лучше чем a в плане специфичности. но сторонники такого мнения почему-то не могут внятно объяснить зачем же создавать в стилях такие серьезные проблемы приоритета, которые вынуждают повышать специфичность базовых стилей «зеркаля» типы элементов классами) - Имена характеризующих свойств желательно переиспользовать, если они применимы к нескольким сущностям
(например, вместо .menu-item-active и .invoice-form-active использовать .menu-item.active и .invoice-form.active — добавляя класс используемый только вместе с классом какой-либо сущности, но не сам по себе) - Именование по сущности/характеристике предпочтительнее именования по значению
(потому что если придется менять значения свойств — то придется менять и имена классов, например подобное будет с .fs-12 . тогда как с характеризующим именем, например с тем же .font-small , переименований не потребуется)
лучше задать конкретно ссылкам класс, или может отталкиваясь от блока родителя задавать ссылке класс?
Вопросы такого рода уже не совсем об именах, они больше о методах организации стилей.
Если на уровне частного мнения, то я бы посоветовал использовать утилити-классы размера шрифта (типа .font- ) редко и точечно, на «особых» ссылках которые являются исключением из правил — а в большинстве остальных случаев, при зависимости от «места использования», применять селектор с комбинатором потомка (то есть, в контексте той сущности, к которой относятся ссылки).
Вот представь, что у тебя есть компонент «уведомление», в котором находится некий текст со ссылками на разделы сайта, плюс в нижней части уведомления еще содержатся ссылки с контактными данными (mailto:). Добавлять каждой из ссылок утилити-класс будет менее удобно, чем сначала описать общие стили ссылок в этом компоненте ( .notification a ) и затем лишь уточнить их для «подвида» контактных ссылок ( .notification .contacts ). ведь это схожие элементы — при грамотном дизайне, многие стили у них будут одинаковы. А еще, утилити-классы обманчиво удобны и поэтому имеют тенденцию разрастаться: в один прекрасный момент, ты можешь обнаружить себя выстраивающим целые поезда из классов, типа class=»underline-dashed font-small has-icon icon-left color-darkgreen hover-fade » — это безусловно жесть, которую трудно читать и поддерживать (т.к. вспомогательные классы предполагают !important , а это ведет к проблемам приоритета).
// Пожалуйста, пожалуйста, не именуй классы как .block : мало того что этот фрагмент никак не описывают именуемое, он еще и прочно ассоциируется с низкой технической грамотностью: когда у веб-специалиста в разметке и речи только «блёк, блёк» — о нем может сложиться негативное мнение (появляются сомнения насчет того, отличает ли он блок от html-элемента и структурного компонента страницы, понимает ли верстку в принципе, и т.д.).
// Еще, маленький совет относительно значений: в размерах шрифтов, вместо px лучше использовать rem или em (для того чтобы они масштабировались от «базового» размера шрифта браузера либо родителя). И не стоит указывать размер шрифта в стилях body — так ты делаешь неэффективной соотв. настройку браузера, а пользователей весьма раздражает необходимость вручную менять масштаб.
Как называть css-классы
Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.
0. Прежде чем думать о названии класса, выберите подходящее название для HTML-элементов
Если это поле, используйте элемент input
Читать HTML-документ будет гораздо легче.
Пример:
1. Назначайте классы как можно ниже по DOM-дереву
Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.
Пример:
Lorem ipsum
main.mainly p < /* Не делайте этого */ >/* Вместо этого присвойте название класса p : */ .paragraphly
Источник: Крис Койер
2. Называйте классы по содержимому
Пример:
.c-header-logo < /* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */ >Источник: phpied.com
3. Не называйте класс по содержимому, если картинка нагляднее
Скажем, лого шапки на самом деле выглядит так:
Тогда не называйте его header-logo.
.guillotine < /* О, сразу видно, что мы хотим стилизовать */ >4. Попробуйте суффикс -like для лучшей переносимости кода.
h3, .h3-like < /* какое-то оформление */ >Источник: KNACSS v4
5. Не используйте верблюжийРегистр
Это затрудняет чтение
Пример:
.navToOneModuleICreated < font-size:2em; >/* против */ .nav-to-one-module-i-created
6. Пробуйте БЭМ
На сегодняшний день это одно из самых популярных соглашений.
- Поначалу он кажется странным, но не бойтесь.
- Порог вхождения очень низкий
- Можно использовать его уже сейчас в любой части проекта.
- Долгосрочные перспективы колоссальны
(двойной дефис) означает вариант элемента.
(двойное подчёркивание) означает дочерний элемент.
Пример:
.btn--warning < /* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */ >.btn__text < /* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */ >7. Пробуйте ещё страшнее
БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.
Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.
Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.
Пример:
.DIMENSIONS_OF_mycomponent < /* Куда ещё противнее. Зато теперь понятнее, о чём речь. */ /* Я использую его для классов-заготовок в SASS. */ /* Но всё же не злоупотребляйте этим правилом. */ >8. Не сокращайте описывающие слова
Помимо уже устоявшихся nav , txt , url … следует избегать любых аббревиатур.
Источник: phpied.com
9. Пробуйте использовать только одну букву в качестве осмысленного префикса
В случае визуального компонента начинайте с c- , а в случае объекта (напр. макет) — с o- , мне просто нравится этот трюк Гарри Робертса.
Пример:
10. Пробуйте [] , когда слишком много классов одного типа
Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .] , они нужны только здесь, чтобы помочь другим читать HTML.
Пример:
11. Используйте префикс js- , если он используется только для JavaScript
Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js- .
Пример:
12. Старайтесь отделить родительский элемент от дочернего
Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.
Пример:
13. Несемантические классы должны явно описывать свои свойства.
Большинство из них содержат только одно свойство, и незачем его скрывать.
.horizontal-alignment < /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */ text-align: center; >/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */ .u-text-align--center
14. Явные хаки (I)
Если вы не довольны вашем CSS-селектором, скажите это всем.
Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.
Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.
Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.
Пример:
.my-component < margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */ >15. Явные хаки (II)
Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css
Опять же, Гарри Робертс подсказал
16. Старайтесь избегать более двух слов для одного имени
Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.
Пример:
.button < /* Хорошо */ >.dropdown-button < /* Всё ещё хорошо */ >.dropdown-button-part-one < /* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */ >.dropdown-button-part-one__button-admin < /* Ой, всё. */ >17. Используйте атрибут data-state для указания состояния компонента
Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.
Пример:
Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.
18. Используйте префиксы has- или is- для состояния
Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.
Пример:
.activated < /* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */ >.is-activated < /* Да, вы оформляете состояние. */ >19. Используйте дефис в качестве префикса при сочетании нескольких состояний
Нужно избегать сочетания состояний любой ценой. А когда это невозможно, на помощь придёт очень полезный трюк Бена Смифета.
Пример:
Источник: Бен Смифет
20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных
Это упрощает чтение документа.
Пример:
Источник: я узнал это, когда работал с командой Predicsis
21. Не следуйте правилам
Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.
Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:
1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.
Если правило вам не подходит, просто пропустите его
Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.