Stylesheet Guideline

Porque devo usar ou criar um Clóvis Neto

Clóvis Neto

Web Developer Engineer

clovisdasilvaneto.github.io/all-animation

Que tal participar?

Quem estiliza com CSS?

Quem  utiliza algum style guide?

Quem já criou seu próprio guideline?

Quem sabe CSS?

Vocês não sabem css 

Ninguém sabe css

Css é muito fácil!

E por ser fácil...

  • Não damos a devida atenção
  • Não usamos nenhum padrão
  • Não procuramos nos aprofundar

Acabamos transformando

O que deveria ser...

STYLESHEET

STYLESHIT

E agora?

fuck

KEEP CALM!

"CSS is not a pretty language. While it is simple to learn and get started with, it soon becomes problematic at any reasonable scale. There isn’t much we can do to change how CSS works, but we can make changes to the way we author and structure it.

In working on large, long-running projects, with dozens of developers of differing specialities and abilities, it is important that we all work in a unified"

"CSS não é uma linguagem bonita. Embora seja simples de aprender e começar a usar, logo se torna problemático em qualquer escala razoável. Não há muito que possamos fazer para mudar a forma como funciona CSS, mas podemos fazer alterações na maneira de como o autor lhe escreve.

Ao trabalhar em grandes empresas, de longa execução projetos, com vários desenvolvedores de diferentes especialidades e habilidades, é importante que todos nós trabalhamos de forma unificada."

Criando um styleguide 

Vejamos os principais conceitos

Table of Contents

80 Characteres Wide

Titling

O titulo da seção é prefixado com #, para nos permitir fazer buscas mais específicas

Para quem não modulariza

Padrões em cada declaração de propriedade

.baz {
    display: block;
    background-color: green;
    cor: vermelho;
}

Não fuja dos padrões


.icon - casa {background-position: 0 0; }
.icon - pessoa {background-position: -16px 0; }
.icon - arquivos {background-position: 0 -16px; }
.icon - configurações {background-position: -16px -16px; }

.foo, .foo - bar, .baz
{
	display: block;
	background-color: green;
	color: red}

Recuo

Usando algum pre-processador

Ainda no recuo

Recuo incorreto

Comentários

Comentários em pre-processadores (sprites)

Removendo Comentários

Lembre-se de quando for colocar algum projeto online, sempre suba tudo mimificado.

Nomeclaturas de classes

  • Oque sua classe faz
  • Onde uma classe pode ser usada
  • Com qual classe ela pode ser combinada (.btn .btn-block)

Hífen delimitado

Não use camel case, nem "_"

Reutilisar é importante

Evite usar seletores html

#header h1, #section h1 {
    color: red;
}

reutilize

.title {
    color: red;
}

Não combine o seletores html com classes

body.home div.header ul {}

Performance também é importante

.list {
    color: red;
}

Shit!

.class-0.class-1.class-2.class-3.class-4.class-5.class-6.class-7.class-8.class-9.class-10.class-11.class-12.class-13.class-14.class-15.class-16.class-17.class-18.class-19.class-20.class-21.class-22.class-23.class-24.class-25.class-26.class-27.class-28.class-29.class-30.class-31.class-32.class-33.class-34.class-35.class-36.class-37.class-38.class-39.class-40.class-41.class-42.class-43.class-44.class-45.class-46.class-47.class-48.class-49.class-50.class-51.class-52.class-53.class-54.class-55.class-56.class-57.class-58.class-59.class-60.class-61.class-62.class-63.class-64.class-65.class-66.class-67.class-68.class-69.class-70.class-71.class-72.class-73.class-74.class-75.class-76.class-77.class-78.class-79.class-80.class-81.class-82.class-83.class-84.class-85.class-86.class-87.class-88.class-89.class-90.class-91.class-92.class-93.class-94.class-95.class-96.class-97.class-98.class-99.class-100.class-101.class-102.class-103.class-104.class-105.class-106.class-107.class-108.class-109.class-110.class-111.class-112.class-113.class-114.class-115.class-116.class-117.class-118.class-119.class-120.class-121.class-122.class-123.class-124.class-125.class-126.class-127.class-128.class-129.class-130.class-131.class-132.class-133.class-134.class-135.class-136.class-137.class-138.class-139.class-140.class-141.class-142.class-143.class-144.class-145.class-146.class-147.class-148.class-149.class-150.class-151.class-152.class-153.class-154.class-155.class-156.class-157.class-158.class-159.class-160.class-161.class-162.class-163.class-164.class-165.class-166.class-167.class-168.class-169.class-170.class-171.class-172.class-173.class-174.class-175.class-176.class-177.class-178.class-179.class-180.class-181.class-182.class-183.class-184.class-185.class-186.class-187.class-188.class-189.class-190.class-191.class-192.class-193.class-194.class-195.class-196.class-197.class-198.class-199.class-200.class-201.class-202.class-203.class-204.class-205.class-206.class-207.class-208.class-209.class-210.class-211.class-212.class-213.class-214.class-215.class-216.class-217.class-218.class-219.class-220.class-221.class-222.class-223.class-224.class-225.class-226.class-227.class-228.class-229.class-230.class-231.class-232.class-233.class-234.class-235.class-236.class-237.class-238.class-239.class-240.class-241.class-242.class-243.class-244.class-245.class-246.class-247.class-248.class-249.class-250.class-251.class-252.class-253.class-254.class-255.class-256.class-257.class-258.class-259.class-260.class-261.class-262.class-263.class-264.class-265.class-266.class-267.class-268.class-269.class-270.class-271.class-272.class-273.class-274.class-275.class-276.class-277.class-278.class-279.class-280.class-281.class-282.class-283.class-284.class-285.class-286.class-287.class-288.class-289.class-290.class-291.class-292.class-293.class-294.class-295.class-296.class-297.class-298.class-299.class-300.class-301.class-302.class-303.class-304.class-305.class-306.class-307.class-308.class-309.class-310.class-311.class-312.class-313.class-314.class-315.class-316.class-317.class-318.class-319.class-320.class-321.class-322.class-323.class-324.class-325.class-326.class-327.class-328.class-329.class-330.class-331.class-332.class-333.class-334.class-335.class-336.class-337.class-338.class-339.class-340.class-341.class-342.class-343.class-344.class-345.class-346.class-347.class-348.class-349.class-350.class-351.class-352.class-353.class-354.class-355.class-356.class-357.class-358.class-359.class-360.class-361.class-362.class-363.class-364.class-365.class-366.class-367.class-368.class-369.class-370.class-371.class-372.class-373.class-374.class-375.class-376.class-377.class-378.class-379.class-380.class-381.class-382.class-383.class-384.class-385.class-386.class-387.class-388.class-389.class-390.class-391.class-392.class-393.class-394.class-395.class-396.class-397.class-398.class-399.class-400.class-401.class-402.class-403.class-404.class-405.class-406.class-407.class-408.class-409.class-410.class-411.class-412.class-413.class-414.class-415.class-416.class-417.class-418.class-419.class-420.class-421.class-422.class-423.class-424.class-425.class-426.class-427.class-428.class-429.class-430.class-431.class-432.class-433.class-434.class-435.class-436.class-437.class-438.class-439.class-440.class-441.class-442.class-443.class-444.class-445.class-446.class-447.class-448.class-449.class-450.class-451.class-452.class-453.class-454.class-455.class-456.class-457.class-458.class-459.class-460.class-461.class-462.class-463.class-464.class-465.class-466.class-467.class-468.class-469.class-470.class-471.class-472.class-473.class-474.class-475.class-476.class-477.class-478.class-479.class-480.class-481.class-482.class-483.class-484.class-485.class-486.class-487.class-488.class-489.class-490.class-491.class-492.class-493.class-494.class-495.class-496.class-497.class-498.class-499.class-500.class-501.class-502.class-503.class-504.class-505.class-506.class-507.class-508.class-509.class-510.class-511.class-512.class-513.class-514.class-515.class-516.class-517.class-518.class-519.class-520.class-521.class-522.class-523.class-524.class-525.class-526.class-527.class-528.class-529.class-530.class-531.class-532.class-533.class-534.class-535.class-536.class-537.class-538.class-539.class-540.class-541.class-542.class-543.class-544.class-545.class-546.class-547.class-548.class-549.class-550.class-551.class-552.class-553.class-554.class-555.class-556.class-557.class-558.class-559.class-560.class-561.class-562.class-563.class-564.class-565.class-566.class-567.class-568.class-569.class-570.class-571.class-572.class-573.class-574.class-575.class-576.class-577.class-578.class-579.class-580.class-581.class-582.class-583.class-584.class-585.class-586.class-587.class-588.class-589.class-590.class-591.class-592.class-593.class-594.class-595.class-596.class-597.class-598.class-599.class-600.class-601.class-602.class-603.class-604.class-605.class-606.class-607.class-608.class-609.class-610.class-611.class-612.class-613.class-614.class-615.class-616.class-617.class-618.class-619.class-620.class-621.class-622.class-623.class-624.class-625.class-626.class-627.class-628.class-629.class-630.class-631.class-632.class-633.class-634.class-635.class-636.class-637.class-638.class-639.class-640.class-641.class-642.class-643.class-644.class-645.class-646.class-647.class-648.class-649.class-650.class-651.class-652.class-653.class-654.class-655.class-656.class-657.class-658.class-659.class-660.class-661.class-662.class-663.class-664.class-665.class-666.class-667.class-668.class-669.class-670.class-671.class-672.class-673.class-674.class-675.class-676.class-677.class-678.class-679.class-680.class-681.class-682.class-683.class-684.class-685.class-686.class-687.class-688.class-689.class-690.class-691.class-692.class-693.class-694.class-695.class-696.class-697.class-698.class-699.class-700.class-701.class-702.class-703.class-704.class-705.class-706.class-707.class-708.class-709.class-710.class-711.class-712.class-713.class-714.class-715.class-716.class-717.class-718.class-719.class-720.class-721.class-722.class-723.class-724.class-725.class-726.class-727.class-728.class-729.class-730.class-731.class-732.class-733.class-734.class-735.class-736.class-737.class-738.class-739.class-740.class-741.class-742.class-743.class-744.class-745.class-746.class-747.class-748.class-749.class-750.class-751.class-752.class-753.class-754.class-755.class-756.class-757.class-758.class-759.class-760.class-761.class-762.class-763.class-764.class-765.class-766.class-767.class-768.class-769.class-770.class-771.class-772.class-773.class-774.class-775.class-776.class-777.class-778.class-779.class-780.class-781.class-782.class-783.class-784.class-785.class-786.class-787.class-788.class-789.class-790.class-791.class-792.class-793.class-794.class-795.class-796.class-797.class-798.class-799.class-800.class-801.class-802.class-803.class-804.class-805.class-806.class-807.class-808.class-809.class-810.class-811.class-812.class-813.class-814.class-815.class-816.class-817.class-818.class-819.class-820.class-821.class-822.class-823.class-824.class-825.class-826.class-827.class-828.class-829.class-830.class-831.class-832.class-833.class-834.class-835.class-836.class-837.class-838.class-839.class-840.class-841.class-842.class-843.class-844.class-845.class-846.class-847.class-848.class-849.class-850.class-851.class-852.class-853.class-854.class-855.class-856.class-857.class-858.class-859.class-860.class-861.class-862.class-863.class-864.class-865.class-866.class-867.class-868.class-869.class-870.class-871.class-872.class-873.class-874.class-875.class-876.class-877.class-878.class-879.class-880.class-881.class-882.class-883.class-884.class-885.class-886.class-887.class-888.class-889.class-890.class-891.class-892.class-893.class-894.class-895.class-896.class-897.class-898.class-899.class-900.class-901.class-902.class-903.class-904.class-905.class-906.class-907.class-908.class-909.class-910.class-911.class-912.class-913.class-914.class-915.class-916.class-917.class-918.class-919.class-920.class-921.class-922.class-923.class-924.class-925.class-926.class-927.class-928.class-929.class-930.class-931.class-932.class-933.class-934.class-935.class-936.class-937.class-938.class-939.class-940.class-941.class-942.class-943.class-944.class-945.class-946.class-947.class-948.class-949.class-950.class-951.class-952.class-953.class-954.class-955.class-956.class-957.class-958.class-959.class-960.class-961.class-962.class-963.class-964.class-965.class-966.class-967.class-968.class-969.class-970.class-971.class-972.class-973.class-974.class-975.class-976.class-977.class-978.class-979.class-980.class-981.class-982.class-983.class-984.class-985.class-986.class-987.class-988.class-989.class-990.class-991.class-992.class-993.class-994.class-995.class-996.class-997.class-998.class-999 {
  color: blue;
}


.one, .tho, .tree, .four {
    color: black;
}

Good!

.dark {
    color: black;
}

.positive {
    color: blue;
}

Evite usar id's no seu código

Id's não são re-utilizáveis, eles são "anomalias" em questão de modularizarão css

Vantagens de usar

  • CSS simples em relação a manutenção
  • Folha de estilo escalável
  • Código transparente e legível

  • Sensação familiar com todo o código base

  • Aumento na produtividade (tempo = dinheiro)

Um guia de estilos é uma ferramenta valiosa para as equipes que:

  • Constroem e mantém um projeto com um tempo de vida rasoável
  • Possuem membros com habilidades e especializações diferentes
  • Possuem um grande número de desenvolvedores ativos.

MAS SOU FREELA NÃO TENHO O PORQUE DE USAR

Voltamos as vantagens

Desenvolvimento ágil = Ganho de tempo

Ganho de tempo = Dinheiro

Exemplos bacanas

Google HTML/CSS guideline

Dúvidas

Obrigado!

facebook.com/ClovisDaSilvaNeto

github.com/clovisdasilvaneto

@clovissneto

clovisdasilvaneto.github.io

Stylesheet Guideline

By Clóvis Neto

Stylesheet Guideline

Porque eu devo usar ou criar um

  • 293
Loading comments...

More from Clóvis Neto