I'm about to start a new project using Aurelia and I'm considering to use it in conjunction with CSS BEM methodology.
First question: Is this basically considered a good match or are there any alternatives which "fit" better with Aurelia?
Main question:
Best explained with an example for some custom Aurelia view (an app header):
<template>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
When embedded into another view, this leads to a resulting DOM like this (simplified):
<app-header>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu>
<!-- ... -->
</app-menu>
</div>
</app-header>
Obviously, the wrapper div with the AppHeader class is kind of superfluous since there's also the app-header tag. Unfortunately it doesn't seem to be possible to assign the CSS class AppHeader (which is needed for BEM) to the base element of the view (the template tag in the view file).
Are there any alternative ways that I'm not aware of or is it considered "good" practice (or at least acceptable) to have many wrapper elements inside views which somehow bloat the DOM?
I just realized, that putting custom classes on the custom elements themselves (the template) actually works, so I can simply write something like this:
<template class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</template>
Edit / Additional info
This won't work if the view is a "base view" of a route since the template element won't be rendered at all in this scenario but is replaced by the router-view element.
I believe that even a hundred extra DOM nodes is not a problem for contemporary browsers but if it's really important to avoid them you may try custom tags instead of classes (see list of restrictions here https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bem).
Perhaps the #containerless will solve your problems:
In your view model:
#containerless
export class AppHeader {
...
}
In this way, the <app-header> container will not be rendered.
If your component is a view-only component, you can declare containerless in the <template> tag:
<template containerless>
<div class="AppHeader">
<span class="AppHeader-logo"></span>
<span class="AppHeader-text"></span>
<app-menu></app-menu>
</div>
</template>
Related
I don't know how exactly this new feature must be work in Blazor, but I think that the current implementation work wrong. Below some typical situation:
Layout for some blazor component:
<button>
<span>Some Text</span>
<Icon> ... </Icon>
</button>
source scss file ...
that will be translated in to something like ...
after apply of CSS isolation we have :-( ...
Why NOT THIS????
And of course in DOM after rendering we have only button with scope id "b-l4md7xqlo6", but not span itself! Span don't have this attribute, and in my situation I don't need it.
In other words, after applying of scope id, the result CSS not equal exactly to my declared CSS!
Any ideas?
Thanks,
Nikolai
I have to create a primary heading component, below is my markup along with CSS classes. I'm following BEM naming convention for class name.
I have h1 element consists of two spans. One span for main heading text, and second span for sub heading text. The main and sub are variations of my heading.
I have not specified the Element class (Which could be heading-primary__text ) and i have directly attached modifier classes to span elements.
<h1 class="heading-primary">
<span class="heading-primary--main">Video Background Option</span>
<span class="heading-primary--sub">One Page Parallax</span>
</h1>
Is that a right way to follow BEM methodology without specifying Elements classes & attaching Block's modifiers classes to Elements(span)? Because i don't need elements classes.
Is there any alternate?
While this is subjective, and as per the convinience of the project . i'd recommend doing something like this- as you already have a header-primary_text element class
<h1 class="heading-primary">
<span class="heading-primary_text">Video Background Option</span>
<!--create a modifier -->
<span class="heading-primary_text--sub">One Page Parallax</span>
</h1>
In this way you can make the sub a modifier class for the subtext.
More info can be seen here https://en.bem.info/methodology/quick-start/#modifier
Hope this helps :)
I think there is a much simpler way to do this just using basic HTML. You only want to have one h1 per page and since you said that your second span of your h1 is a "subheading" I feel like you would be way better off marking that one as an h2 instead of two spans of different context within one h1 heading! Always good to use the built in benefits of HTML first if you can.
No, it is not the right way. You cannot use block (or element) modifier alone on the HTML tag without specifying the block (or element) class itself.
Please refer to BEM documentation here: https://en.bem.info/methodology/quick-start/#modifier
A modifier can't be used alone From the BEM perspective, a modifier
can't be used in isolation from the modified block or element. A
modifier should change the appearance, behavior, or state of the
entity, not replace it.
Here is a code example from the docs:
<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
You mentioned that you don't need an element class, this topic is also covered in BEM docs
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names
semuzaboi's suggestion sounds as a good alternative to me.
First of all, elements are specified after two __ like block__element_modifier.
Secondly, yes. Blocks may not have any elemenets inside, but rather have modifiers (most common case a block with lang modifiers for Internationalization (block_lang_ru))
PS as well as element may not have any modifiers inside. But block can not be nested inside another one. They should be placed inside one directory on the same level.
Today, I'd like to create an element that generated a list of "cards". On these cards there could be very different things according to which page it gets included. For instance, sometimes these cards contain a picture, sometimes there could be contact information (name, age, adress, phone...), sometimes it could contain only a video, etc...
So what my idea was to design a polymer element that handle the CSS, the ajax call to the datasource, the dom-repeat, and a <slot> (formerly known as <content>) which would include in this element the html template used to create the card content (picture, video, or contact card)
this is what I did so far:
Parent element:
<tiles-list id="tilesView" datas="[[datas]]">
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</tiles-list>
{{datas}}is replaced by the URL for the ajax call
and in the child element:
<iron-ajax
auto
url="[[datas]]"
handle-as="json"
last-response="{{ajax}}"
on-response="log"></iron-ajax>
<div id="grid">
<template is="dom-repeat" items="[[ajax.data]]">
<div class="card gridCell">
<slot></slot>
</div>
</template>
</div>
But yeah, it doesn't work. All I get is a list with the right amount of cards, but only the first one contains a picture, but no data. So I guess the slot doesn't work like I'm trying to make it work, and the data binding cannot work this way either.
Anybody has a solution?
I think what you want to achive is a perfect case for the Templatizer.
Change your code to:
<tiles-list id="tilesView" datas="[[datas]]">
<template tile>
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</template>
</tiles-list>
And then when your ajax request resolves do something like this:
var template = Polymer.dom(this).querySelector('template[tile]');
this.templatize(template);
ajax.data.forEach(function(item){
var instance = this.stamp(item);
Polymer.dom(this.$.grid).appendChild(instance.root);
});
This will create several instances of you template, no dom-repeat needed.
I'm trying to do some templating for the site I'm working on the make it more reusable. To do this I'm using knockout to help with data-binding to transfer info from a json fine.
However, I'm having quite a bit of trouble passing a css property object to a span element within my template.
My html template kind of looks like this
<div data-bind="cssProperties: properties, css: { hidden : EvalDisplay() == false }">
<p>
<!-- ko foreach: options -->
<label class="btn">
<input type="checkbox" />
**<span class='optionText' data-bind="cssProperties: $parent.properties, html: Value"></span>**
</label>
<!-- /ko -->
</p>
</div>
The span with the asterisks next to it is what's giving me trouble. If I move that outside of the foreach loop then it works fine and the property is added, but if I keep it inside that loop where I need it to be it's just not being applies.
Any help would be great. I am very new at knockout so I don't know all the cool little tricks yet.
And before you ask, yes the css property has to be in the json and not in a css sheet. It needs to be where non-technical people can access it to change it.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.