Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Many people name their classes this way: header-menu
I personally prefer header_logo; as its easier to read as well as copy-paste for a lazy coder.
Is there any significant differences in between naming class with "_" or "-" ?
I am really curious and would love to go with the best method; please enlighten me;
Thanks!
Unfortunately _ is used to separate element or block modifiers. So it is not valid to use with BEM.
Valid names for your example:
header-menu
headerMenu
More related examples:
Hyphen style:
header-menu -> block
header-menu__logo -> element
header-menu_theme_xmas -> block modifier
header-menu__logo_size_big -> element modifier
camelCase style:
headerMenu -> block
headerMenu__logo -> element
headerMenu_theme_xmas -> block modifier
headerMenu__logo_size_big -> element modifier
From the docs:
Naming rules
block-name__elem-name_mod-name_mod-val
Names are written in lowercase Latin letters.
Words are separated by a hyphen (-).
The block name defines the namespace for its elements and modifiers.
The element name is separated from the block name by a double
underscore (__).
The modifier name is separated from the block or element name by a
single underscore (_).
The modifier value is separated from the modifier name by a single
underscore (_).
For boolean modifiers, the value is not included in the name.block-name__elem-name_mod-name_mod-val
More info on naming conventions: https://en.bem.info/methodology/naming-convention/
There is not proper way, just use whatever css name convention you like. Of course, there are some guidelines that you can follow or just ignore like: BEM, SMACSS and many more.
Related
I've been struggling with this for the last few days. I apologize if this is a duplicate, I wasn't able to find what I needed when searching for this particular question.
I have class names like the following:
class="block underline primary"
className="text-center block primary-dark"
class="grey bg-black inline-block block"
I'd like to search an entire codebase using Atom's regex search feature and replace every instance with a new class name. I would need the following rules:
Make sure the string is contained in class="" or className=""
Make sure it's only matching the exact word, so in the above it would only match block and not inline-block if that's what I was searching for.
I currently have this which almost does what I need, but isn't accounting for className or class and will return paragraphs or things not contained within a class which I don't want:
(\s(block)\s)|(="(block)\s)|(\s(block)")
Is there any way to do a regex find and replace in one fell swoop? I understand I might not get everything because classes can be programmatically added, but I'd like to get as much as possible with find and replace and not screw other things up. Any help or direction is greatly appreciated.
edit
I also need to account for class names like the following:
class="block block-title blockDisabled"
So in the end I only want to target block and nothing else.
You could use the following expression:
(className|class)="(?:block|block\s([^"]*)|([^"]*)\sblock|([^"]*)\sblock(?=\s)([^"]*))"
Live Example Here
From there, if you want to remove the block class, you would use $1="$2$3$4$5" for the replacement.
However, if you want to replace the block class, as your title implies, then you would use $1="$2$3$4$5 replacement-class" for the replacement (where the string "replacement-class" is the class you're replacing the block class with).
Explanation:
(className|class) - Capture the attribute name
=" - Match the opening of the attribute value
(?: - Start of a non-capturing group
block - Match the string block
| - or...
block\s([^"]*) - Capture the classes after the string block
| - or...
([^"]*)\sblock - Capture the classes before the string block
| - or...
([^"]*)\sblock(?=\s)([^"]*) - Capture the classes around the string block
) - End of the non-capturing group
" - Match the closing of the attribute value
In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier.
But why use block__element instead of block_element?
Double Underscore is used to define sub element of a block.
i.e:
<nav class="main-nav">
<a class="main-nav__item" href="#">Text</a>
</nav>
Where main-nav is a block & main-nav__item is a sub element.
This is done because some people might name their block like this main_nav which will create confusion with single underscore like this : main_nav_item
Therefore double underscore will clarify stuff like this: main_nav__item.
I'm going to 2nd #Imran Bughio's answer, but I'm trying to further clarify the issue.
In standard BEM style, single underscores are reserved for modifiers. Also, they usually represent a combination of key/value pairs. E.g.
.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small
This is in contrast to the modified BEM syntax championed by inuit.css for example, which are boolean.
.block--vertical
.block--horizontal
.block__element--big
.block__element--small
From my experience when using the modified syntax, you quickly run into expression limitations. E.g. if you would write
.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small
The key/value relation would not be unique, if you would try to describe a key such as background-attachment which would result in
.block__element--background-attachment-fixed
Another added benefit is, that you can use the libraries based on the standard naming convention for added productivity in your workflow:
http://bem.info/tools/bem/bem-tools/
https://github.com/hoho/jquery-bem
It's also worth mentioning that the BEM syntax is not forced upon us and if you find another syntax that you find more readable then by all means go with that. The important thing is consistency, ensuring other developers work to the same syntax.
An example of an alternative syntax used is in SUIT CSS by Nicolas Gallagher. Which uses the following syntax.
ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent
You can read more here SUIT CSS naming conventions
Because whose blocks can be hyphen or underscore delimited, for example:
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
or
.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */
According to BEM naming convention, single underscore has two other usages,
The modifier name is separated from the block or element name by a single underscore (_).
The modifier value is separated from the modifier name by a single underscore (_).
So for separating element name from the block name is done by a double underscore.
The element name is separated from the block name by a double underscore (__).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a search field form that I use to insert filterexpression on a aspx page.
I would like to force user to insert a string similar to a sql like condition, so it can be:
Start or not with %, so %?
Write letters, numbers, whitespace, underscore but not a special character like %, so [A-Za-z0-9-_+()\s]+
Ends or not with %, so %?$
My reg expression is %?[A-Za-z0-9-_+()\s]+%?$ but it doesn't work because I can write %test%test% that is not a sql like condition.
I have to force writing %test or test% or test or %test% but not %test%test% because the search goes in an error page.
How to do this?
Thanks
You were very close, just missing the start of string operator ^. Without that, you allow a match on your regex on any part of the input, which is why you were able to match things like %test%test%. The expression as you had it would just match starting at the second %.
using System.Text.RegularExpressions;
using System;
public class Program{
public static void Main(string[] args) {
Regex rgx = new Regex(#"^%?[A-Za-z0-9-_+()\s]+%?$");
Console.WriteLine(rgx.IsMatch("%test%")); //True
Console.WriteLine(rgx.IsMatch("%test %test%")); //False
}
}
This question already has answers here:
Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
(2 answers)
Closed 9 years ago.
I want to know whether numbers(only) can be used for naming a css class
is this valid?
.2{
display:block;
}
No, it's not valid.
But the more important fact is that you shouldn't define classes with no meaning as that doesn't make any sense when looking at writing semantic markup.
In CSS1, a class name could start with a digit (".55ft"), unless it
was a dimension (".55in"). In CSS2, such classes are parsed as unknown
dimensions (to allow for future additions of new units) To make "2x" a
valid class, CSS2 requires the first digit to be escaped ".\32x" [2x]
CSS Validator
No you can not use only numbers as a css3 class name. but check this link out.
here
No not possible
you can use like
._2{
}
or like
.a2{
}
No,it's not working.
a lot of language is not support the first word is number.
Maybe you can use .menu-1
No you can't, it throw the selector rule exception. its like declaring a variable in c or cpp... if u declare as 2 then its not a variable, its a constant. because int num=2; this is always correct form but string 2=num; is always wrong in programming.
Read more from http://www.w3.org/TR/CSS21/selector.html
I am using RegularExpressionValidator control with
[http(s)?://]*([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?
regular expression to validate Url. I need to allow german characters
(ä,Ä,É,é,ö,Ö,ü,Ü,ß)
in Url. What should be exact regular expression to allow these characters?
I hope you are aware that it is not easy to use regex for URL validation, because there are many valid variations of URLs. See for example this question.
First your regex has several flaws (this is only after a quick check, maybe not complete)
See here for online check on Regexr
It does not match
http://RegExr.com?2rjl6]
Why do you allow only \w and - after the first dot?
but it does match
hhhhhhppth??????ht://stackoverflow.com
You define a character group at the beginning [http(s)?://] what means match any of the characters inside (You probaly want (?:http(s)?://) and ? after wards instead of *.
To answer your question:
Create a character group with those letters and put it where you want to allow it.
[äÄÉéöÖüÜß]
Use it like this
(?:https?://)?([äÄÉéöÖüÜß\w-]+\.)+[äÄÉéöÖüÜß\w-]+(/[-äÄÉéöÖüÜß\w ./?%&=]*)?
Other hints
The - inside of a character group has to be at the start or the end or needs to be escaped.
(s)? is s?