Error component/simple-element-selector

This error occurs when the framework is set to not allow to create components from simple element selectors. This is an intentional setting and a decision of the project maintainer.

You will never see this error in a default configuration! It is turned on by somebody in your team/project on purpose.

But it is highly recommended as a best practice to turn it on:

_main.sass

@import "~spotcss"

+spot-set('disallow-simple-element-components', true)
// expceptions for some elements that are allowed to be a component:
+spot-set('exceptions-of-simple-element-components', 'html, body, button, select, textarea')

my-component.sass

@import "main"

+component('a') // throws error
  ...
  ...

Throws error:

Error: SPOT CSS [component/simple-element-selector] - given selector is a simple element selector ('a') but the framework is currently set to not allow such selectors for components. Read more at https://spotcss.io/errors/component/simple-element-selector
        on line 96 of src/_public.mixins.scss, in mixin `component`
        from line 3 of my-code/my-component/my-component.sass
>> s a simple element selector ('"+$selector+"') but the framework is currently
   ------------------------------------------^

The mixins and functions used in the code above: spot-set, component, disallow-simple-element-components, exceptions-of-simple-element-components.

Solution

The best advice is: "do not create components from the simple HTML elements only". But all the options are:

1. use a specific class for the component, e.g. +component('a.link')
2. or use a context selector, e.g. +component('#content a')
3. or add this <a> element into other component structure, e.g. +element('a')
4. or add exception for this element if you know what you are doing, with +spot-set('exceptions-of-simple-element-components'...
5. or turn this feature off (if you really want), with +spot-set('disallow-simple-element-components'...

Reason of this error

We have experience from many projects that creating components from the basic semantic elements such a <a>, <p>, <h1-h6>, <img>, <ol>, <ul>, <li>, <strong>, <table>, etc. will lead to overload the component with many variants and contexts and it becomes unmanageable.

To prevent this undesirable result, the framework supports a setting to prevent the creation of such components.

Note: Of course you can use custom html elements such a +component('my-button').

You can find more about this topic in the documentation of the Best practices - Do not style standard HTML elements as components.